/* Turbofin design for the public auth screens on turbofin.renofms.com. */
html.tf-auth #root div.relative.min-h-screen[style*="bgImage"] {
  background-image: url('/turbofin/turbofin-fondo-20261103.jpg') !important;
  background-position: center !important;
}
html.tf-auth #root .bg-login-Gradient,
html.tf-auth #root .bg-signup-Gradient {
  background: linear-gradient(90deg, rgba(20, 24, 32, 0.55) 0%, rgba(20, 24, 32, 0.25) 45%, rgba(20, 24, 32, 0.45) 100%) !important;
}
/* RENO logo and RENO copy are replaced by the Turbofin header and pitch */
html.tf-auth #root div.relative.min-h-screen img.absolute.w-fit[src*="/assets/logo-"],
html.tf-auth #root div.relative.min-h-screen .max-w-lg.md\:flex > div {
  visibility: hidden !important;
}
html.tf-auth #root button.bg-loginGradient {
  background: linear-gradient(90deg, #e3141b 0%, #b00d13 100%) !important;
  border-color: transparent !important;
}

#tf-brand { display: none; }
html.tf-auth #tf-brand { display: block; position: fixed; inset: 0; pointer-events: none; z-index: 5; color: #fff; font-family: inherit; }
#tf-brand .tf-header { position: absolute; top: 28px; left: 48px; display: flex; align-items: center; gap: 16px; }
#tf-brand .tf-header img { height: 40px; width: auto; }
#tf-brand .tf-sep { width: 1px; height: 40px; background: rgba(255, 255, 255, 0.4); }
#tf-brand .tf-powered { font-size: 14px; color: rgba(255, 255, 255, 0.85); }
#tf-brand .tf-pitch { display: none; }
html.tf-pitch #tf-brand .tf-pitch { display: block; position: absolute; top: 50%; left: 52%; right: 48px; transform: translateY(-50%); max-width: 640px; }
#tf-brand .tf-h { display: flex; gap: 16px; }
#tf-brand .tf-slash { flex: none; width: 12px; height: 56px; margin-top: 8px; background: #e3141b; transform: skewX(-18deg); }
#tf-brand h1 { margin: 0; font-size: clamp(36px, 4vw, 60px); font-weight: 600; line-height: 1.12; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); }
#tf-brand p { margin: 24px 0 0; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.55; color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); }
#tf-brand ul { display: flex; gap: 40px; margin: 40px 0 0; padding: 0; list-style: none; }
#tf-brand li { display: flex; width: 120px; flex-direction: column; align-items: center; text-align: center; font-size: 16px; }
#tf-brand .tf-ico { display: flex; width: 56px; height: 56px; margin-bottom: 12px; align-items: center; justify-content: center; border: 2px solid #e3141b; border-radius: 10px; background: rgba(0, 0, 0, 0.2); }
#tf-brand .tf-ico svg { width: 28px; height: 28px; }

/* The pitch needs the right half of the screen: only from 1024px; below, the card stands alone. */
@media (max-width: 1023px) {
  html.tf-pitch #tf-brand .tf-pitch { display: none; }
}
@media (max-width: 767px) {
  #tf-brand .tf-header { top: 18px; left: 16px; right: 64px; gap: 8px; }
  #tf-brand .tf-header img { height: 22px; max-width: 34vw; object-fit: contain; }
  #tf-brand .tf-sep { height: 22px; }
  #tf-brand .tf-powered { font-size: 10px; white-space: nowrap; }
}

/* Loading screen (Suspense fallback in App.tsx: white page with the RENO loader GIF).
   The GIF is hidden and replaced by the Turbofin wordmark with its speed lines sliding in
   and a red bar sweeping underneath. Drawn with CSS so it never depends on the cached GIF. */
#root div.fixed.bg-white:has(> img[alt="loader"]) {
  background: #fff url('/turbofin/turbofin-word-20261103.png') no-repeat calc(50% + 30px) calc(50% - 10px) / 232px auto;
}
#root div.fixed.bg-white > img[alt="loader"] { visibility: hidden; }
#root div.fixed.bg-white:has(> img[alt="loader"])::before {
  content: '';
  position: absolute;
  left: calc(50% - 147px);
  top: calc(50% - 10px);
  width: 52px;
  height: 53px;
  margin-top: -26px;
  background: url('/turbofin/turbofin-speed-20261103.png') no-repeat center / contain;
  animation: tf-speed 1.2s cubic-bezier(0.22, 0.8, 0.3, 1) infinite;
}
#root div.fixed.bg-white:has(> img[alt="loader"])::after {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(50% + 34px);
  width: 220px;
  height: 3px;
  margin-left: -110px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent 0%, #e3141b 50%, transparent 100%) no-repeat, rgba(227, 20, 27, 0.12);
  background-size: 45% 100%, 100% 100%;
  animation: tf-sweep 1.2s ease-in-out infinite;
}
@keyframes tf-speed {
  0% { transform: translateX(-28px); opacity: 0; }
  45% { transform: translateX(0); opacity: 1; }
  80% { transform: translateX(4px); opacity: 1; }
  100% { transform: translateX(10px); opacity: 0; }
}
@keyframes tf-sweep {
  0% { background-position: -60% 0, 0 0; }
  100% { background-position: 160% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  #root div.fixed.bg-white:has(> img[alt="loader"])::before,
  #root div.fixed.bg-white:has(> img[alt="loader"])::after { animation: none; }
}