:root{
  --border-med: #262a33;
  --text-tert: #5a5f6b;
  --ease-out-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-soft: cubic-bezier(0.33, 1, 0.68, 1);
}
html,body{height:100%;}
body{margin:0;background:#0a0b0d;-webkit-font-smoothing:antialiased;}
a{color:oklch(52% 0.16 250);text-decoration:none}
a:hover{color:oklch(60% 0.15 250)}
*{box-sizing:border-box}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:var(--border-med);border-radius:3px}
input::placeholder{color:var(--text-tert)}
input,select,button,textarea{font-family:inherit}
button{border:none;background:none;padding:0;}

/* Soft fade for non-drill page changes (fallback when View Transitions aren't used). */
@keyframes pageFadeIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
/* Catalog push — slide in from the right like a native hierarchy step. */
@keyframes drillForwardIn{
  from{opacity:0;transform:translateX(36px)}
  to{opacity:1;transform:translateX(0)}
}
/* Catalog pop — slide in from the left when stepping back. */
@keyframes drillBackIn{
  from{opacity:0;transform:translateX(-36px)}
  to{opacity:1;transform:translateX(0)}
}
/* Card lift under a drill transition — transform only so inline opacity
   (e.g. Coming soon cards at .72) isn't overridden by animation fill. */
@keyframes drillCardIn{
  from{transform:translateY(10px)}
  to{transform:translateY(0)}
}

@keyframes popIn{0%{transform:scale(.92)}55%{transform:scale(1.035)}100%{transform:scale(1)}}
@keyframes fadeSlideIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.page-content{overflow-x:hidden;}
.page-enter{animation:pageFadeIn .38s var(--ease-out-premium) both}
.page-enter-forward{animation:drillForwardIn .42s var(--ease-out-premium) both}
.page-enter-back{animation:drillBackIn .42s var(--ease-out-premium) both}

/* Staggered card entrance on drill push only — delay via --stagger set inline.
   Back-steps keep the simpler whole-panel slide so popping out feels snappy. */
.page-enter-forward .drill-card{
  /* backwards (not both) so hover/active transforms work after the entrance */
  animation:drillCardIn .45s var(--ease-out-premium) backwards;
  animation-delay:calc(0.05s + (var(--stagger, 0) * 0.035s));
}

.result-card{animation:fadeSlideIn .32s var(--ease-out-premium) both}
.filter-pop{animation:popIn .3s cubic-bezier(.34,1.56,.64,1) both}

.chip-btn{transition:transform .18s var(--ease-out-soft), filter .18s ease, background .18s ease, color .18s ease, border-color .18s ease;}
.chip-btn:hover{transform:translateY(-2px);filter:brightness(1.1);}
/* Lighter press than the old scale(.96) — a hard squash was getting captured
   mid-click and reading as a glitch into the next page. */
.chip-btn:active{transform:translateY(0) scale(.985);}

.nav-item{transition:color .2s ease;}
.subtab-btn{transition:background .2s ease, color .2s ease, transform .15s ease;}
.subtab-btn:active{transform:scale(.97);}

@keyframes heroFadeIn{from{opacity:0}to{opacity:1}}
@keyframes heroFadeOut{from{opacity:1}to{opacity:0}}

@keyframes tickerScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-track{animation:tickerScroll linear infinite;}
.ticker-board:hover .ticker-track{animation-play-state:paused;}

@keyframes sheetBackdropIn{from{opacity:0}to{opacity:1}}
@keyframes sheetSlideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes sheetBackdropOut{from{opacity:1}to{opacity:0}}
@keyframes sheetSlideDown{from{transform:translateY(0)}to{transform:translateY(100%)}}

.hide-scrollbar{scrollbar-width:none;}
.hide-scrollbar::-webkit-scrollbar{display:none;}

@keyframes expandIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.expand-in{animation:expandIn .28s var(--ease-out-premium) both;transform-origin:top;}

/* Duration must match EXPAND_EXIT_MS in app.js. */
@keyframes expandOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-8px)}}
.expand-out{animation:expandOut .22s ease both;transform-origin:top;}

/* Total duration must match WAITLIST_TOAST_MS in app.js. A slight scale
   overshoot (matching popIn's spirit) on the way in makes the "sent"
   acknowledgment read as a deliberate pop, not just a fade. */
@keyframes toastLife{
  0%{opacity:0;transform:translate(-50%,-14px) scale(.9)}
  8%{opacity:1;transform:translate(-50%,0) scale(1.04)}
  14%{transform:translate(-50%,0) scale(1)}
  88%{opacity:1;transform:translate(-50%,0) scale(1)}
  100%{opacity:0;transform:translate(-50%,-10px) scale(.98)}
}
.toast-banner{animation:toastLife 2.6s var(--ease-out-premium) both;}

/* Theme / Car Detail View Transitions — opacity-only crossfade, no extra
   movement (content CSS entrances are skipped whenever VT runs). */
@keyframes vtFadeOut{from{opacity:1}to{opacity:0}}
@keyframes vtFadeIn{from{opacity:0}to{opacity:1}}
::view-transition-old(root){
  animation:vtFadeOut .28s ease both;
}
::view-transition-new(root){
  animation:vtFadeIn .36s var(--ease-out-premium) both;
}

@media (prefers-reduced-motion: reduce){
  .page-enter,
  .page-enter-forward,
  .page-enter-back,
  .page-enter-forward .drill-card,
  .result-card,
  .filter-pop,
  .expand-in,
  .expand-out,
  .toast-banner{animation-duration:.01ms !important;animation-delay:0s !important;}
  .chip-btn{transition:none;}
  ::view-transition-old(root),
  ::view-transition-new(root){animation-duration:.01ms !important;}
}