/* ==========================================================================
   REV TORQ Customer PWA — Build 170 "Launch"
   Splash ("lights out") + animated login. Loaded after premium-167.css.
   Every animation is switched off under prefers-reduced-motion.
   ========================================================================== */

/* ---------- Splash: five lights, hold until ready, lights out ---------- */
.splash{
  gap:30px!important;
  background:
    radial-gradient(55% 32% at 50% 44%,rgba(185,37,54,.24),rgba(185,37,54,0) 70%),
    radial-gradient(120% 80% at 50% 50%,#0d0a0a 0%,#050404 100%)!important;
  transition:opacity .42s .14s ease,transform .56s .1s cubic-bezier(.16,1,.3,1);
  overflow:hidden;
}
.rt-splash-logo{
  position:relative;
  z-index:2;
  display:inline-block;
  animation:rtLogoIn .75s cubic-bezier(.16,1,.3,1) both;
}
.rt-splash-logo img{display:block}
.rt-splash-shine{
  position:absolute;
  inset:0;
  pointer-events:none;
  -webkit-mask:url("../assets/logo-mark.png?v=20261002-img180") center/contain no-repeat;
  mask:url("../assets/logo-mark.png?v=20261002-img180") center/contain no-repeat;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.9) 50%,transparent 62%);
  background-size:260% 100%;
  background-position:160% 0;
  animation:rtShine 1.15s .5s ease-in-out both;
}
@keyframes rtLogoIn{from{opacity:0;transform:scale(.9);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
@keyframes rtShine{from{background-position:160% 0}to{background-position:-60% 0}}

/* the five start lights: one sleek row instead of the boxed gantry */
.splash .rt-gantry{
  gap:14px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
}
.splash .rt-gantry span{padding:0!important;background:none!important;box-shadow:none!important;border-radius:0!important}
.splash .rt-gantry span i{
  width:13px!important;height:13px!important;
  border-radius:50%;
  /* no !important on the animated properties, or the keyframes could never light them */
  background:#2a1114;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  animation:rtLightOn .16s ease-out both!important;
}
.splash .rt-gantry span:nth-child(1) i{animation-delay:.25s!important}
.splash .rt-gantry span:nth-child(2) i{animation-delay:.4s!important}
.splash .rt-gantry span:nth-child(3) i{animation-delay:.55s!important}
.splash .rt-gantry span:nth-child(4) i{animation-delay:.7s!important}
.splash .rt-gantry span:nth-child(5) i{animation-delay:.85s!important}
@keyframes rtLightOn{
  from{background:#2a1114;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
  to{background:radial-gradient(circle at 35% 30%,#ffd9d6 0,#ff2b3d 38%,#a10d1c 100%);box-shadow:0 0 10px #ff2b3d,0 0 26px rgba(255,43,61,.6)}
}

/* speed streaks, only during the exit */
.rt-splash-streaks{position:absolute;inset:0;z-index:1;pointer-events:none}
.rt-splash-streaks i{
  position:absolute;
  left:0;
  height:2px;
  width:55%;
  border-radius:2px;
  opacity:0;
  background:linear-gradient(90deg,transparent,#ff3b4f 70%,#fff);
  transform:translateX(-120%);
}
.rt-splash-streaks i:nth-child(1){top:38%}
.rt-splash-streaks i:nth-child(2){top:47%;width:70%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85))}
.rt-splash-streaks i:nth-child(3){top:55%}
.rt-splash-streaks i:nth-child(4){top:61%;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6))}

/* exit: lights out, logo launches, streaks fly, splash dissolves into Home */
.splash.rt-splash-out{opacity:0;transform:scale(1.04);pointer-events:none}
.splash.rt-splash-out .rt-gantry span i{animation:none!important;background:#1c0b0d!important;box-shadow:none!important}
.splash.rt-splash-out .rt-splash-logo{animation:rtLaunch .5s cubic-bezier(.55,0,.75,.2) forwards}
.splash.rt-splash-out .rt-splash-streaks i{animation:rtStreak .42s cubic-bezier(.3,0,.2,1) forwards}
.splash.rt-splash-out .rt-splash-streaks i:nth-child(2){animation-delay:.04s}
.splash.rt-splash-out .rt-splash-streaks i:nth-child(3){animation-delay:.08s}
.splash.rt-splash-out .rt-splash-streaks i:nth-child(4){animation-delay:.02s}
@keyframes rtLaunch{to{transform:scale(1.14) translateX(14px);filter:blur(6px);opacity:0}}
@keyframes rtStreak{0%{opacity:0;transform:translateX(-120%)}25%{opacity:1}100%{opacity:0;transform:translateX(240%)}}

/* ---------- Login: dark stage + sliding form sheet ---------- */
.screen:has(.rt-auth-v2){padding:0!important;width:100%!important;max-width:none!important}
body.rt-light-theme .rt-auth-v2{
  position:relative;
  display:flex!important;
  flex-direction:column;
  min-height:100dvh;
  background:#070605!important;
  overflow:hidden;
}

.rt-auth-stage{
  position:relative;
  isolation:isolate;
  min-height:clamp(300px,44dvh,420px);
  padding:calc(30px + env(safe-area-inset-top,0px)) 22px 54px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  overflow:hidden;
}
.rt-auth-glow{
  position:absolute;
  inset:-20% -30% 10%;
  z-index:-1;
  background:radial-gradient(45% 40% at 50% 55%,rgba(212,45,66,.34),rgba(212,45,66,0) 70%);
  animation:rtBreathe 5s ease-in-out infinite;
}
@keyframes rtBreathe{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}

/* 3D checkered track rolling towards you */
.rt-auth-floor{
  position:absolute;
  left:-60%;right:-60%;
  bottom:-2px;
  height:58%;
  z-index:-1;
  perspective:300px;
  perspective-origin:50% 0%;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.85) 35%,transparent 92%);
  mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.85) 35%,transparent 92%);
}
.rt-auth-floor>i{
  position:absolute;
  left:0;right:0;
  top:0;
  height:260%;
  transform-origin:50% 0%;
  transform:rotateX(68deg);
}
.rt-auth-floor>i::before{
  content:"";
  position:absolute;
  left:0;right:0;
  top:-56px;bottom:0;
  background-image:conic-gradient(#1f1b1b 25%,#0c0a0a 0 50%,#1f1b1b 0 75%,#0c0a0a 0);
  background-size:56px 56px;
  animation:rtTrack 1.15s linear infinite;
}
@keyframes rtTrack{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,56px,0)}}
.rt-auth-floor::after{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,59,79,.7),transparent);
  box-shadow:0 0 18px 2px rgba(255,59,79,.45);
}

.rt-auth-streaks{position:absolute;inset:0;z-index:-1;pointer-events:none}
.rt-auth-streaks i{
  position:absolute;
  left:0;
  height:2px;
  border-radius:2px;
  opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,59,79,.95));
  animation:rtStreakLoop 3.2s cubic-bezier(.4,0,.2,1) infinite;
}
.rt-auth-streaks i:nth-child(1){top:22%;width:38%;animation-delay:.6s}
.rt-auth-streaks i:nth-child(2){top:34%;width:56%;animation-delay:1.7s;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7))}
.rt-auth-streaks i:nth-child(3){top:63%;width:44%;animation-delay:2.4s}
.rt-auth-streaks i:nth-child(4){top:12%;width:30%;animation-delay:3.1s;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5))}
@keyframes rtStreakLoop{0%{opacity:0;transform:translateX(-110%)}12%{opacity:1}38%{opacity:0;transform:translateX(280%)}100%{opacity:0;transform:translateX(280%)}}

.rt-auth-logo{
  position:relative;
  width:min(230px,62vw);
  margin:0 auto 18px;
  animation:rtLogoIn .8s cubic-bezier(.16,1,.3,1) both;
}
.rt-auth-logo img{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 18px rgba(0,0,0,.6))}
.rt-auth-logo-shine{
  position:absolute;
  inset:0;
  pointer-events:none;
  -webkit-mask:url("../assets/logo-mark.png?v=20261002-img180") center/contain no-repeat;
  mask:url("../assets/logo-mark.png?v=20261002-img180") center/contain no-repeat;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.85) 50%,transparent 60%);
  background-size:280% 100%;
  background-position:170% 0;
  animation:rtShineLoop 5.5s 1s ease-in-out infinite;
}
@keyframes rtShineLoop{0%{background-position:170% 0}22%,100%{background-position:-70% 0}}

.rt-auth-title{
  margin:0;
  font-family:var(--rt-font-display);
  font-weight:700;
  font-size:clamp(30px,8.6vw,40px);
  line-height:1;
  letter-spacing:0;
  color:#fff;
}
.rt-auth-title span,.rt-auth-title em{display:block;animation:rtRise .6s cubic-bezier(.16,1,.3,1) both}
.rt-auth-title span{animation-delay:.18s}
.rt-auth-title em{font-style:normal;color:#ff3b4f;animation-delay:.28s}
.rt-auth-chips{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-top:16px;
}
.rt-auth-chips span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  color:rgba(255,255,255,.86);
  font-size:11.5px;
  font-weight:600;
  animation:rtRise .55s cubic-bezier(.16,1,.3,1) both;
}
.rt-auth-chips span:nth-child(1){animation-delay:.38s}
.rt-auth-chips span:nth-child(2){animation-delay:.46s}
.rt-auth-chips span:nth-child(3){animation-delay:.54s}
.rt-auth-chips .rt-svg-icon{width:14px;height:14px;color:#ff5a6b}

/* the white form sheet slides up over the stage */
body.rt-light-theme .rt-auth-v2 .rt-auth-form-wrap{
  position:relative;
  z-index:2;
  flex:1;
  display:block!important;
  margin-top:-30px;
  padding:0!important;
  background:none!important;
  animation:rtSheetRise .7s .12s cubic-bezier(.16,1,.3,1) both;
}
.app.rt-light .rt-auth-v2 .rt-auth-card-clean{
  width:100%!important;
  max-width:none!important;
  min-height:100%;
  margin:0!important;
  padding:26px 20px calc(26px + env(safe-area-inset-bottom,0px))!important;
  border:0!important;
  border-radius:28px 28px 0 0!important;
  background:#fff!important;
  box-shadow:0 -14px 40px rgba(0,0,0,.35)!important;
}
@keyframes rtSheetRise{from{transform:translate3d(0,60px,0);opacity:0}to{transform:none;opacity:1}}
.app.rt-light .rt-auth-v2 .rt-auth-card-clean::before{
  content:"";
  display:block;
  width:40px;height:4px;
  margin:-12px auto 18px;
  border-radius:4px;
  background:#e7e1df;
}
.app.rt-light .rt-auth-v2 .rt-auth-heading{text-align:left!important;margin-bottom:18px!important}
.app.rt-light .rt-auth-v2 .rt-auth-heading h2{
  margin:0 0 4px;
  font-family:var(--rt-font-display);
  font-size:30px;
  font-weight:700;
  line-height:1;
  color:var(--rt-ink);
}
.app.rt-light .rt-auth-v2 .rt-auth-heading p{margin:0;font-size:13.5px!important;color:var(--rt-muted)!important}

/* fields arrive one after another */
.rt-auth-v2 .rt-auth-heading,
.rt-auth-v2 .rt-auth-fields .field,
.rt-auth-v2 .rt-login-primary,
.rt-auth-v2 .rt-forgot-link,
.rt-auth-v2 .rt-register-box,
.rt-auth-v2 .rt-auth-note{animation:rtRise .55s cubic-bezier(.16,1,.3,1) both}
.rt-auth-v2 .rt-auth-heading{animation-delay:.32s}
.rt-auth-v2 .rt-auth-fields .field:nth-child(1){animation-delay:.4s}
.rt-auth-v2 .rt-auth-fields .field:nth-child(2){animation-delay:.47s}
.rt-auth-v2 .rt-login-primary{animation-delay:.54s}
.rt-auth-v2 .rt-forgot-link{animation-delay:.6s}
.rt-auth-v2 .rt-register-box{animation-delay:.66s}
.rt-auth-v2 .rt-auth-note{animation-delay:.72s}
@keyframes rtRise{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}

.app.rt-light .rt-auth-v2 .field label{
  font-size:12px!important;
  font-weight:600!important;
  letter-spacing:.02em;
  color:var(--rt-ink-2)!important;
  transition:color .2s ease;
}
.app.rt-light .rt-auth-v2 .field:focus-within label{color:var(--rt-red-600)!important}
.app.rt-light .rt-auth-v2 .rt-auth-card-clean .input{
  min-height:54px;
  border-radius:16px!important;
  border:1px solid var(--rt-line)!important;
  background:#faf8f7!important;
  font-size:16px!important; /* 16px stops iOS zooming into the field */
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.app.rt-light .rt-auth-v2 .rt-auth-card-clean .input:focus{
  background:#fff!important;
  border-color:var(--rt-red-600)!important;
  box-shadow:0 0 0 4px rgba(185,37,54,.12)!important;
}
.app.rt-light .rt-auth-v2 .rt-password-toggle{
  display:grid;
  place-items:center;
  width:40px;height:40px;
  border-radius:12px;
  color:var(--rt-muted)!important;
  font-size:0!important;
}
.app.rt-light .rt-auth-v2 .rt-password-toggle[aria-pressed="true"]{color:var(--rt-red-600)!important}
.app.rt-light .rt-auth-v2 .rt-password-toggle .rt-svg-icon{width:20px;height:20px}

/* primary button: idle shimmer + loading spinner */
.app.rt-light .rt-auth-v2 .rt-login-primary{
  position:relative;
  overflow:hidden;
  min-height:56px!important;
  margin-top:6px;
  border-radius:16px!important;
  font-size:15px!important;
  font-weight:700!important;
  letter-spacing:.08em!important;
}
.app.rt-light .rt-auth-v2 .rt-login-primary::after{
  content:"";
  position:absolute;
  top:0;bottom:0;left:-40%;
  width:30%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-18deg);
  animation:rtBtnShine 4.2s 1.6s ease-in-out infinite;
}
@keyframes rtBtnShine{0%{left:-40%}24%,100%{left:130%}}
.app.rt-light .rt-auth-v2 .rt-login-primary.is-loading{color:transparent!important;pointer-events:none}
.app.rt-light .rt-auth-v2 .rt-login-primary.is-loading::after{
  left:50%;top:50%;bottom:auto;
  width:22px;height:22px;
  margin:-11px 0 0 -11px;
  border-radius:50%;
  border:2.5px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  background:none;
  transform:none;
  animation:rtSpin .7s linear infinite;
}
@keyframes rtSpin{to{transform:rotate(360deg)}}

.app.rt-light .rt-auth-v2 .rt-forgot-link{font-size:13px!important;font-weight:600!important}
.app.rt-light .rt-auth-v2 .rt-register-box{
  border:0!important;
  border-radius:18px!important;
  background:#f7f4f3!important;
  padding:12px 12px 12px 16px!important;
}
.app.rt-light .rt-auth-v2 .rt-register-box>span{font-size:13px!important;font-weight:600!important}
.app.rt-light .rt-auth-v2 .rt-register-btn{
  min-height:42px!important;
  padding:0 16px!important;
  border:0!important;
  border-radius:999px!important;
  background:#fff!important;
  box-shadow:inset 0 0 0 1px var(--rt-red-200)!important;
  font-size:12px!important;
  font-weight:700!important;
  letter-spacing:.04em!important;
}

/* wrong password: a short shake */
.app.rt-light .rt-auth-v2 .rt-auth-card-clean.rt-shake{animation:rtShake .42s cubic-bezier(.36,.07,.19,.97) both}
@keyframes rtShake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}

/* tablets / desktop: stage on the left, form on the right */
@media (min-width:900px){
  body.rt-light-theme .rt-auth-v2{flex-direction:row}
  .rt-auth-stage{flex:1.1;min-height:100dvh;padding:48px}
  .rt-auth-title{font-size:56px}
  body.rt-light-theme .rt-auth-v2 .rt-auth-form-wrap{flex:.9;margin-top:0;display:grid!important;place-items:center;background:#f5f2f0!important;animation-name:rtFadeIn}
  .app.rt-light .rt-auth-v2 .rt-auth-card-clean{width:min(440px,90%)!important;min-height:0;border-radius:28px!important;box-shadow:0 24px 60px rgba(30,18,20,.12)!important}
  .app.rt-light .rt-auth-v2 .rt-auth-card-clean::before{display:none}
}

@media (prefers-reduced-motion:reduce){
  .splash,.splash *,
  .rt-auth-v2,.rt-auth-v2 *,
  .rt-auth-v2 *::before,.rt-auth-v2 *::after{animation:none!important;transition:none!important}
  .rt-splash-shine,.rt-auth-logo-shine,.rt-auth-streaks,.rt-splash-streaks{display:none}
  .splash .rt-gantry span i{background:#ff2b3d!important;box-shadow:0 0 10px rgba(255,43,61,.6)!important}
}