/* ══════════════════════════════════════════════════════════════
   Dongfeng Pretoria — MOTION LAYER
   A purely additive "wow" layer. Everything here is gated behind
   html.has-motion, which motion.js only adds AFTER GSAP loads.
   If the CDN is blocked or JS fails, NONE of this applies and the
   site renders exactly like the base design. No-JS / fail = safe.
   ══════════════════════════════════════════════════════════════ */

/* ── selection + scrollbar polish (safe everywhere) ──────────── */
::selection{background:var(--red);color:#fff}
.has-motion::-webkit-scrollbar{width:10px;height:10px}
.has-motion::-webkit-scrollbar-track{background:#0e0e10}
.has-motion::-webkit-scrollbar-thumb{background:#2a2a2e;border-radius:20px;border:2px solid #0e0e10}
.has-motion::-webkit-scrollbar-thumb:hover{background:var(--red)}

/* ── Lenis smooth scroll ─────────────────────────────────────── */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* ── curtain is purely visual; it must NEVER lock scroll ─────────
   (a stuck lock used to freeze the whole page — see motion.js break-through) */
body.fx-lock{}

/* ══════════════════════════════════════════════════════════════
   PAGE-LOAD CURTAIN (CSS-driven — works even if GSAP fails)
   ══════════════════════════════════════════════════════════════ */
#fx-curtain{
  position:fixed;inset:0;z-index:100000;
  background:#070708;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:26px;
  transition:opacity .6s ease,visibility .6s ease;
}
#fx-curtain.lift{
  /* fallback removal if JS can't run the fancy version */
  opacity:0;visibility:hidden;
}
#fx-curtain .fx-mark{
  display:flex;align-items:center;gap:14px;
  opacity:0;transform:translateY(8px);
  animation:fxMarkIn .8s .05s var(--ease,cubic-bezier(.16,1,.3,1)) forwards;
}
#fx-curtain .fx-mark img{height:30px;width:auto}
#fx-curtain .fx-mark span{
  font-size:18px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;
}
#fx-curtain .fx-mark i{width:1px;height:22px;background:rgba(255,255,255,.3);display:inline-block}
#fx-curtain .fx-bar{
  width:160px;height:2px;background:rgba(255,255,255,.12);overflow:hidden;position:relative;
  opacity:0;animation:fxMarkIn .6s .25s ease forwards;
}
#fx-curtain .fx-bar::after{
  content:'';position:absolute;inset:0;left:-100%;background:var(--red);
  animation:fxLoad 1.5s .3s var(--ease,cubic-bezier(.16,1,.3,1)) forwards;
}
@keyframes fxMarkIn{to{opacity:1;transform:none}}
@keyframes fxLoad{to{left:0}}

/* the dramatic split-panel reveal driven by JS */
#fx-curtain .fx-panel{position:absolute;left:0;width:100%;background:#070708;z-index:-1}
#fx-curtain .fx-panel.top{top:0;height:50%}
#fx-curtain .fx-panel.bot{bottom:0;height:50%}

/* ══════════════════════════════════════════════════════════════
   WEBGL AURORA (injected into dark heroes: #hero, .page-head)
   ══════════════════════════════════════════════════════════════ */
.fx-aurora{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  mix-blend-mode:screen;opacity:0;transition:opacity 1.2s ease;
}
.fx-aurora.on{opacity:.62}
.page-head .fx-aurora.on{opacity:.5}
#hero .fx-aurora{z-index:1}

/* light vehicle hero gets a CSS animated mesh instead of WebGL */
.has-motion .veh-hero::before{
  content:'';position:absolute;inset:-10%;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 50% at 18% 22%,rgba(194,40,45,.10),transparent 60%),
    radial-gradient(34% 44% at 84% 16%,rgba(255,140,90,.10),transparent 62%),
    radial-gradient(50% 60% at 70% 90%,rgba(194,40,45,.07),transparent 60%);
  animation:vehMesh 16s ease-in-out infinite alternate;
}
.veh-hero>*{position:relative;z-index:1}
@keyframes vehMesh{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(2%,-1.5%) scale(1.06)}
  100%{transform:translate(-1.6%,1.8%) scale(1.03)}
}

/* ══════════════════════════════════════════════════════════════
   SPLIT-TEXT (headings) — wrappers added by motion.js
   ══════════════════════════════════════════════════════════════ */
.sx-line{display:block;overflow:hidden;padding-bottom:.04em}
.sx-w{display:inline-block;will-change:transform}
.sx-c{display:inline-block;will-change:transform,opacity}
.sx-sp{display:inline-block;width:.28em}

/* hero headline: let GSAP drive — silence the base CSS keyframes */
.has-motion .hero-h1-line>span{animation:none;transform:translateY(0)}
.has-motion #hero .hero-eyebrow,
.has-motion #hero .hero-sub,
.has-motion #hero .hero-ctas,
.has-motion #hero .hero-scroll{animation:none;opacity:1;transform:none}
.has-motion .hero-w{display:inline-block;white-space:nowrap}
.has-motion .hero-c{display:inline-block;will-change:transform,opacity}

/* ── generic reveal seed (motion.js sets exact states via gsap) ─ */
.has-motion [data-rvx]{will-change:transform,opacity}

/* ══════════════════════════════════════════════════════════════
   NAV hide-on-scroll-down / show-on-up
   ══════════════════════════════════════════════════════════════ */
#nav{transition:background .4s,border-color .4s,box-shadow .4s,transform .5s var(--ease,cubic-bezier(.16,1,.3,1))}
#nav.nav-hidden{transform:translateY(-100%)}

/* ══════════════════════════════════════════════════════════════
   MAGNETIC / interactive flourishes
   ══════════════════════════════════════════════════════════════ */
.has-motion .btn,.has-motion .btn-solid,.has-motion .btn-outline,
.has-motion .cta-btn,.has-motion .v-btn-drive{will-change:transform}

/* marquee strip (optional, used on homepage) */
.fx-marquee{overflow:hidden;white-space:nowrap;display:flex}
.fx-marquee-track{display:inline-flex;gap:0;white-space:nowrap;will-change:transform}
.fx-marquee-track span{
  font-size:clamp(48px,9vw,128px);font-weight:900;letter-spacing:-.03em;
  text-transform:uppercase;line-height:1;padding:0 .25em;
  color:transparent;-webkit-text-stroke:1.2px rgba(10,10,10,.16);
}
.bg-dark .fx-marquee-track span,#feature .fx-marquee-track span{-webkit-text-stroke-color:rgba(255,255,255,.14)}

/* ══════════════════════════════════════════════════════════════
   3D TILT + specular sheen on product renders
   ══════════════════════════════════════════════════════════════ */
.has-motion .v-img,.has-motion .veh-stage{transform-style:preserve-3d}
.has-motion .v-img img,.has-motion .veh-render{will-change:transform;backface-visibility:hidden}
.has-motion .v-img img{transition:none}
.fx-sheen{
  position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;
  transition:opacity .35s ease;mix-blend-mode:overlay;
}
.veh-stage .fx-sheen{mix-blend-mode:soft-light}

/* ══════════════════════════════════════════════════════════════
   REDUCED MOTION — disable the whole layer's motion, keep visible
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  #fx-curtain{display:none!important}
  .fx-aurora{display:none!important}
  .fx-sheen{display:none!important}
  .has-motion .v-img img,.has-motion .veh-render{transform:none!important}
  .has-motion .veh-hero::before{animation:none}
  .sx-line{overflow:visible}
  .sx-w,.sx-c{transform:none!important;opacity:1!important}
  #nav.nav-hidden{transform:none}
}