/* ============================================================
   U3 · Monolith — FX layer (loaded AFTER monolith.css)
   Dark liquid-chrome hero · custom cursor · motion
   ============================================================ */

/* ---------- DARK CHROME HERO ---------- */
.hero{position:relative;min-height:100vh;padding:120px 0 84px;overflow:hidden;
  background:#08080B;color:#F3F1EB;display:flex;flex-direction:column;justify-content:center}
.hero-fx-wrap{position:absolute;inset:0;z-index:0}
#heroFx{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-fx-wrap::before{content:"";position:absolute;inset:0;
  background:radial-gradient(125% 95% at 68% 18%,#2b3552 0%,#12141d 42%,#06070b 82%),linear-gradient(120deg,#0a0b10,#16131c)}
.has-webgl .hero-fx-wrap::before{opacity:0}
.hero-grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.045) .5px,transparent .5px);background-size:3px 3px}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:24vh;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(243,241,235,0) 0%,rgba(243,241,235,0) 38%,#F3F1EB 100%)}
.hero .hero-inner{position:relative;z-index:2;width:100%;will-change:transform,opacity}

/* hero text on dark */
.hero .hero-top{border-bottom-color:rgba(243,241,235,.16)}
.hero .lbl{color:rgba(243,241,235,.72)}
.hero .meta{color:rgba(243,241,235,.5)}
.hero h1{color:#F7F6F3;margin-top:38px}
.hero .hero-sub{border-top-color:rgba(243,241,235,.16)}
.hero .lede{color:#F1EFEA}
.hero .lede b{color:#8FA6FF}
.hero .side{color:rgba(243,241,235,.64)}
.hero .ticker{border-color:rgba(243,241,235,.16);color:rgba(243,241,235,.58)}
.hero .ticker span{border-right-color:rgba(243,241,235,.13)}
.hero .ticker b{color:#F3F1EB}
.hero .btn-primary{background:#F3F1EB;color:#08080B}
.hero .btn-primary:hover{background:var(--accent);color:#fff}
.hero .btn-ghost{border-color:rgba(243,241,235,.32);color:#F3F1EB}
.hero .btn-ghost:hover{border-color:#fff;color:#fff}

/* chrome lettering on the accent word */
.hero h1 .ac{
  background-image:linear-gradient(176deg,#ffffff 0%,#b9c0cc 24%,#5c6473 46%,#e7ebf2 58%,#7d8696 74%,#ffffff 100%);
  background-size:100% 230%;background-position:0 0;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 2px 18px rgba(120,150,255,.28))}
@media(prefers-reduced-motion:no-preference){
  .hero h1 .ac{animation:chromeShift 7.5s ease-in-out infinite}}
@keyframes chromeShift{0%,100%{background-position:0 0}50%{background-position:0 100%}}

/* scroll cue */
.scrollcue{margin-top:54px;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(243,241,235,.5)}
.scrollcue .bar{position:relative;width:30px;height:1px;background:rgba(243,241,235,.3);overflow:hidden}
.scrollcue .bar::after{content:"";position:absolute;left:-40%;top:0;width:40%;height:100%;background:#F3F1EB;
  animation:cueSlide 2.2s cubic-bezier(.7,0,.3,1) infinite}
@keyframes cueSlide{0%{left:-40%}60%,100%{left:100%}}

/* ---------- NAV over dark hero ---------- */
.nav{background:transparent;border-bottom-color:transparent}
.nav .mark img{filter:none}
.nav .nav-links a{color:rgba(243,241,235,.78)}
.nav .nav-links a:hover{color:#fff}
.nav .nav-cta{background:#F3F1EB;color:#08080B}
.nav .nav-cta:hover{background:var(--accent);color:#fff}
.nav.scrolled{background:rgba(243,241,235,.97);border-bottom-color:var(--rule)}
.nav.scrolled .mark img{filter:brightness(0)}
.nav.scrolled .nav-links a{color:var(--ink-2)}
.nav.scrolled .nav-links a:hover{color:var(--accent)}
.nav.scrolled .nav-cta{background:var(--ink);color:var(--paper)}
.nav.scrolled .nav-cta:hover{background:var(--accent);color:#fff}

/* ---------- CUSTOM CURSOR ---------- */
.has-cursor{cursor:none}
.has-cursor a,.has-cursor button,.has-cursor .mw,.has-cursor input,.has-cursor textarea{cursor:none}
.u3-cursor{position:fixed;top:0;left:0;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;
  background:#1F44E0;z-index:9999;pointer-events:none;mix-blend-mode:difference}
.u3-cursor-ring{position:fixed;top:0;left:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.55);z-index:9999;pointer-events:none;mix-blend-mode:difference;
  transition:width .22s ease,height .22s ease,margin .22s ease,background .22s ease,border-color .22s}
.cursor-active .u3-cursor-ring{width:56px;height:56px;margin:-28px 0 0 -28px;background:rgba(255,255,255,.10)}
.cursor-down .u3-cursor-ring{width:24px;height:24px;margin:-12px 0 0 -12px}

/* ---------- REVEAL + MOTION (gated by .anim) ---------- */
.anim .rv{opacity:0;transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.anim .rv.in{opacity:1;transform:none}
.anim .rv.d1{transition-delay:.08s}
.anim .rv.d2{transition-delay:.16s}
.anim .rv.d3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){
  .anim .rv{opacity:1;transform:none;transition:none}
  .hero .hero-inner{transform:none!important;opacity:1!important}}

/* section rows get a gentle stagger on hover already; add lift on reveal for live/world rows */
.anim .wrow.rv,.anim .lrow.rv{transform:translateY(30px)}
.anim .wrow.rv.in,.anim .lrow.rv.in{transform:none}

@media(max-width:760px){
  .hero{min-height:auto;padding:128px 0 72px}
  .scrollcue{display:none}
}