/* =====================================================================
   COWBOYS AC — MOTION LAYER  (cinematic, cascade-ready, additive)
   Pair with js/motion.js. Loads AFTER site.css.
   Everything degrades to clean static under prefers-reduced-motion
   and under .no-motion (set by JS on weak/mobile devices).
   ===================================================================== */

/* ---- Motion tokens layered on top of site.css :root ---- */
:root {
  --mo-dur-fast:   0.5s;
  --mo-dur:        0.9s;
  --mo-dur-slow:   1.4s;
  --mo-ease:       var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
  --mo-ease-spring:var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
  --mo-stagger:    0.08s;
  --mo-lift:       40px;
}

/* =====================================================================
   1 — SMOOTH SCROLL (Lenis)
   ===================================================================== */
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; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* =====================================================================
   2 — REVEAL SYSTEM  (upgrades the existing [data-reveal])
   JS sets .is-in when the element scrolls into view.
   These classes give a styled fallback even before JS runs.
   ===================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--mo-lift), 0);
  transition:
    opacity var(--mo-dur) var(--mo-ease),
    transform var(--mo-dur) var(--mo-ease);
  will-change: opacity, transform;
}
[data-reveal="scale"]       { transform: scale(0.94); }
[data-reveal="slide-left"]  { transform: translate3d(-48px, 0, 0); }
[data-reveal="slide-right"] { transform: translate3d(48px, 0, 0); }
[data-reveal="blur"]        { filter: blur(14px); transition: opacity var(--mo-dur) var(--mo-ease), transform var(--mo-dur) var(--mo-ease), filter var(--mo-dur) var(--mo-ease); }

[data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Stagger children of a [data-reveal-group] */
[data-reveal-group] > * {
  opacity: 0;
  transform: translate3d(0, var(--mo-lift), 0);
  transition:
    opacity var(--mo-dur) var(--mo-ease),
    transform var(--mo-dur) var(--mo-ease);
}
[data-reveal-group].is-in > * { opacity: 1; transform: none; }

/* Mask wipe — content slides up from behind a clipping edge */
[data-reveal-mask] { overflow: hidden; }
[data-reveal-mask] > * {
  display: block;
  transform: translate3d(0, 110%, 0);
  transition: transform var(--mo-dur-slow) var(--mo-ease);
}
[data-reveal-mask].is-in > * { transform: none; }

/* =====================================================================
   3 — SPLIT-TYPE HEADLINE REVEAL
   JS (SplitType) wraps words in .mo-word > .mo-word__inner
   ===================================================================== */
.mo-split .mo-word { overflow: visible; display: inline-block; vertical-align: top; }
.mo-split .mo-word__inner {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 0.45em, 0);
  transition: opacity 0.55s ease, transform 0.7s var(--mo-ease);
  /* per-word cascade — JS sets --i */
  transition-delay: calc(var(--i, 0) * 0.04s);
}
.mo-split.is-in .mo-word__inner { opacity: 1; transform: none; }

/* =====================================================================
   4 — MAGNETIC / TACTILE UI
   ===================================================================== */
[data-magnetic] {
  transition: transform 0.35s var(--mo-ease-spring);
  will-change: transform;
}
[data-tilt] {
  transition: transform 0.4s var(--mo-ease);
  transform-style: preserve-3d;
  will-change: transform;
}

/* =====================================================================
   5 — AMBIENT LIFE  (drifting gradients + heat shimmer)
   ===================================================================== */
.mo-ambient {
  position: absolute;
  inset: -20% -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 50% at 18% 30%, var(--gold-glow, rgba(212,165,116,.3)) 0%, transparent 60%),
    radial-gradient(38% 46% at 82% 70%, var(--red-glow, rgba(230,57,70,.28)) 0%, transparent 62%);
  filter: blur(40px);
  opacity: 0.55;
  animation: mo-drift 22s ease-in-out infinite alternate;
}
@keyframes mo-drift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(3%, -2%, 0) scale(1.06); }
  100% { transform: translate3d(-2%, 2%, 0) scale(1.02); }
}

.mo-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =====================================================================
   6 — SCROLL CINEMATIC SCAFFOLD  (pinned scenes)
   ===================================================================== */
.scene { position: relative; }
.scene--pin { min-height: 100vh; }
.scene__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.scene__layer { position: absolute; inset: 0; }
.scene__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: transform;
}
.scene__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,24,40,.35) 0%, rgba(10,24,40,.78) 70%, var(--bg-deep, #0a1828) 100%);
}

/* Word-by-word "story" steps that swap on scroll */
.scene__step {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  opacity: 0;
  pointer-events: none;
}
.scene__step.is-active { opacity: 1; pointer-events: auto; }

/* =====================================================================
   7 — HERO 3D CANVAS
   ===================================================================== */
.hero3d {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero3d canvas { display: block; width: 100%; height: 100%; }
.hero3d[data-interactive="true"] { pointer-events: auto; cursor: grab; }
.hero3d[data-interactive="true"]:active { cursor: grabbing; }
.hero3d__fallback {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .6s ease;
}
.hero3d.is-fallback .hero3d__fallback { opacity: 1; }

/* =====================================================================
   8 — MARQUEE (trust strip)
   ===================================================================== */
.mo-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mo-marquee__track { display: flex; gap: 4rem; width: max-content; animation: mo-marquee 38s linear infinite; }
.mo-marquee:hover .mo-marquee__track { animation-play-state: paused; }
@keyframes mo-marquee { to { transform: translate3d(-50%, 0, 0); } }

/* =====================================================================
   9 — SCROLL CUE
   ===================================================================== */
.mo-scrollcue {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  font: 600 .68rem/1 var(--font-mono, monospace);
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--text-muted, rgba(180,200,220,.5)); z-index: 4;
}
.mo-scrollcue__line { width: 1px; height: 46px; background: linear-gradient(var(--gold-bright,#e0ad4a), transparent); }
.mo-scrollcue__line::after {
  content: ""; position: absolute; top: 0; left: 0; width: 1px; height: 40%;
  background: var(--gold-bright,#e0ad4a); animation: mo-cue 2.2s var(--mo-ease) infinite;
}
.mo-scrollcue__line { position: relative; }
@keyframes mo-cue { 0% { transform: translateY(-100%); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(250%); opacity: 0; } }

/* =====================================================================
   10 — WIDE / TV TIER  (lobby screen + 4K)
   ===================================================================== */
@media (min-width: 2200px) {
  :root { --container-max: 1840px; }
  html { font-size: 22px; }
  .mo-tv-hide { display: none !important; }
}
body.tv-mode {
  cursor: none;
}
body.tv-mode .nav,
body.tv-mode .nav__toggle { display: none; }

/* =====================================================================
   11 — REDUCED MOTION + LOW-POWER KILL SWITCH
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  [data-reveal], [data-reveal-group] > *, [data-reveal-mask] > *, .mo-split .mo-word__inner { opacity: 1 !important; transform: none !important; filter: none !important; }
  .mo-ambient, .mo-marquee__track, .mo-scrollcue__line::after { animation: none !important; }
}
html.no-motion [data-reveal],
html.no-motion [data-reveal-group] > *,
html.no-motion [data-reveal-mask] > *,
html.no-motion .mo-split .mo-word__inner {
  opacity: 1 !important; transform: none !important; filter: none !important;
}
html.no-motion .mo-ambient { animation: none !important; }
html.no-motion .hero3d { display: none; }
html.no-motion .hero3d.is-fallbac