/* ============================================================
   ANIMATION LAYER — loaded after cinematic.css
   The intro sequence, the drive-in, and the gloss sweeps.

   The whole intro runs on CSS animation-delay, not JS timers, so
   it can't desync. JS only handles the ENTER click and reveals.
   ============================================================ */

/* (The vector showroom that used to live here has been removed —
   the splash now shows real footage. See media.css.) */

/* ============================================================
   4 — TITLE + ENTER
   ============================================================ */
.splash-ui > *{opacity:0;animation:riseIn .8s cubic-bezier(.2,.7,.3,1) forwards}
.splash-ui h1      {animation-delay:0.70s}
.splash-ui .kicker {animation-delay:0.85s}
.splash-ui #enter  {animation-delay:1.00s}
#skip{opacity:0;animation:riseIn .6s ease forwards;animation-delay:1.2s}
@keyframes riseIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* a slow breathing ring so ENTER reads as the thing to click */
#enter::after{
  content:"";position:absolute;inset:-1px;border:1px solid var(--accent);
  opacity:0;animation:pulseRing 2.6s ease-out 1.9s infinite;
}
@keyframes pulseRing{
  0%  {opacity:.9;transform:scale(1)}
  70% {opacity:0;transform:scale(1.14)}
  100%{opacity:0}
}

/* ============================================================
   5 — THE CAMERA PUSH on ENTER
   ============================================================ */
#splash{transition:opacity .85s ease, visibility .85s, transform .85s cubic-bezier(.5,0,.75,0)}
#splash.gone{opacity:0;visibility:hidden;transform:scale(1.18)}

/* the site behind it eases forward to meet you */
body.entering .hero-inner{animation:settle 1.1s cubic-bezier(.2,.7,.3,1) both}
@keyframes settle{from{opacity:0;transform:translateY(26px) scale(.985)}to{opacity:1;transform:none}}

/* ============================================================
   6 — GLOSS SWEEP  (the "just polished" shine)
   The most on-theme flourish available to a detailing site.
   ============================================================ */
.shine{position:relative;overflow:hidden}
.shine::after{
  content:"";position:absolute;top:-60%;bottom:-60%;width:42%;left:-60%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);
  transform:skewX(-18deg);pointer-events:none;
}
.shine:hover::after{animation:sweep .9s ease-out}
/* service cards sweep once as they arrive */
.svc article.in::after{animation:sweep 1.1s ease-out .35s}
@keyframes sweep{from{left:-60%}to{left:120%}}

/* ============================================================
   7 — HERO: slow drift + light bloom
   ============================================================ */
.hero-bg{animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.06) translate3d(0,0,0)}to{transform:scale(1.14) translate3d(-1.6%,-1.2%,0)}}

.hero-inner .display{
  background:linear-gradient(100deg,#fff 20%,rgba(255,255,255,.62) 42%,#fff 64%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:titleSheen 7s ease-in-out 1s infinite;
}
@keyframes titleSheen{0%,100%{background-position:120% 0}50%{background-position:-20% 0}}

.scroll-cue{animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}

/* ============================================================
   8 — SECTION REVEALS with direction
   ============================================================ */
.js .rv-l{opacity:0;transform:translateX(-30px)}
.js .rv-r{opacity:0;transform:translateX(30px)}
.js .rv-l,.js .rv-r{transition:opacity .9s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1)}
.js .rv-l.in,.js .rv-r.in{opacity:1;transform:none}

/* pricing tiers lift as they land */
.tier{transition:background .3s ease, transform .45s ease}
.tier:hover{transform:translateY(-6px)}

/* work grid: scale-in rather than slide */
.js .work figure{opacity:0;transform:scale(.94);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.3,1)}
.js .work figure.in{opacity:1;transform:none}

/* ============================================================
   9 — ANIMATED STAT COUNTERS
   ============================================================ */
.count{font-variant-numeric:tabular-nums}

/* ============================================================
   10 — RESPECT THE USER
   Everything above is decoration. If they've asked for less
   motion, the site must still be complete and readable.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .slat{display:none}
  .bay::before,.bay .glow,.bay .car,.bay .beam,
  .splash-ui > *,#skip{animation:none!important;opacity:1!important;transform:none!important}
  #enter::after{animation:none}
  .hero-bg,.hero-inner .display,.scroll-cue{animation:none!important}
  .hero-inner .display{color:#fff;-webkit-text-fill-color:#fff}
  .rv-l,.rv-r,.work figure,.rv{opacity:1!important;transform:none!important}
  .shine::after{display:none}
}