/* FLOWFALL Inertia home page. Shared header, footer, buttons and tokens live in flowfall.css. */
:root{--circle:#40e6ff;--cross:#ffd140;--square:#ff59cc;--line-c:#80ff73;--tint:#55e4ff}
body.home{overflow-x:hidden}
.home h2{font-family:Outfit,system-ui,sans-serif;font-weight:800;letter-spacing:-.03em}
.home h3{font-family:Outfit,system-ui,sans-serif;font-weight:700;letter-spacing:-.01em}
.site-header{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:rgba(8,13,27,.72)}
.glow-text{background:linear-gradient(90deg,var(--circle),var(--square),var(--cross),var(--line-c),var(--circle));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:hue 12s linear infinite}
@keyframes hue{to{background-position:300% 0}}

/* Hero ------------------------------------------------------------------------------------------------ */
.hero2{position:relative;isolation:isolate;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:#05080f url('assets/hero-poster.webp') center/cover}
.hero2 video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:saturate(1.15)}
.hero2:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 70% 50%,transparent 0,rgba(5,8,15,.35) 55%,rgba(5,8,15,.85) 100%),linear-gradient(90deg,rgba(5,8,15,.92) 0,rgba(5,8,15,.55) 45%,rgba(5,8,15,.15) 100%)}
.hero2:after{content:'';position:absolute;inset:auto 0 0;height:30%;z-index:-1;background:linear-gradient(0deg,var(--bg),transparent)}
.hero2 .wrap{width:100%;padding-top:6rem;padding-bottom:7rem}
.hero2 .hero-logo{width:420px;max-width:72vw;margin:0 0 1.2rem;filter:drop-shadow(0 0 30px rgba(64,230,255,.35))}
.hero2 h1{font-family:FlowDisplay,system-ui,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:-.16em;word-spacing:.4em;line-height:1.05;font-size:clamp(2rem,4.4vw,3.6rem);margin:.6rem 0 1rem;max-width:16ch;filter:drop-shadow(0 0 18px rgba(85,228,255,.45))}
.hero2 .lede{font-size:clamp(1.05rem,1.6vw,1.25rem);max-width:46ch;color:#e6eeff}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;padding:0;margin:1.4rem 0 0}
.chips li{padding:.4rem .9rem;border:1px solid rgba(255,255,255,.18);background:rgba(8,13,27,.6);backdrop-filter:blur(6px);border-radius:999px;font-size:.92rem;color:#d7e2f7}
.chips li:first-child{border-color:var(--gold);color:var(--gold);font-weight:700}
.button svg{width:1.15em;height:1.15em;margin-right:.55rem;flex:none}
.button.ghost{background:rgba(8,13,27,.55);border-color:rgba(255,255,255,.35);backdrop-filter:blur(6px)}
.scroll-cue{position:absolute;left:50%;bottom:1.6rem;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--muted);font-size:.72rem;letter-spacing:.35em;text-decoration:none}
.scroll-cue i{display:block;width:2px;height:46px;background:linear-gradient(var(--circle),transparent);animation:drop 1.8s ease-in infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* World ticker ---------------------------------------------------------------------------------------- */
.ticker{border-block:1px solid var(--line);overflow:hidden;background:#070b16;padding:.9rem 0}
.ticker-track{display:flex;width:max-content;animation:tick 60s linear infinite}
.ticker span{font:800 1rem/1 Outfit,system-ui,sans-serif;letter-spacing:.28em;text-transform:uppercase;white-space:nowrap;padding:0 1.6rem;color:#6f81a3}
.ticker span:nth-child(4n+1){color:var(--circle)}.ticker span:nth-child(4n+2){color:var(--cross)}.ticker span:nth-child(4n+3){color:var(--square)}.ticker span:nth-child(4n){color:var(--line-c)}
@keyframes tick{to{transform:translateX(-50%)}}

/* Split layout ------------------------------------------------------------------------------------------ */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:4rem;align-items:center}
.split.flip>:first-child{order:2}
.shape-chips{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.6rem 0}
.shape-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .9rem .45rem .55rem;border:1px solid currentColor;border-radius:999px;font-weight:700;font-size:.92rem;background:rgba(255,255,255,.03)}
.shape-chip svg{width:22px;height:22px;filter:drop-shadow(0 0 6px currentColor)}
.c-circle{color:var(--circle)}.c-cross{color:var(--cross)}.c-square{color:var(--square)}.c-line{color:var(--line-c)}

/* The shaft: gates rush toward a morphing piece ---------------------------------------------------------- */
.shaft{position:relative;aspect-ratio:1;max-width:520px;width:100%;margin:auto;border:1px solid #2a3a58;background:radial-gradient(circle at 50% 50%,#0f1a33 0,#060a14 70%);overflow:hidden;box-shadow:0 0 0 1px rgba(64,230,255,.08),0 30px 80px -20px rgba(64,230,255,.25)}
.shaft-lines{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.gate{position:absolute;inset:0;margin:auto;width:84%;height:84%;border:2px solid currentColor;border-radius:4px;opacity:0;transform:scale(.08);animation:gate 6.4s linear infinite;box-shadow:0 0 14px currentColor inset,0 0 18px currentColor;color:var(--c)}
.gate svg{position:absolute;inset:0;margin:auto;width:28%;height:28%;filter:drop-shadow(0 0 6px currentColor)}
.gate:nth-of-type(1){--c:var(--circle);animation-delay:0s}
.gate:nth-of-type(2){--c:var(--cross);animation-delay:-4.8s}
.gate:nth-of-type(3){--c:var(--square);animation-delay:-3.2s}
.gate:nth-of-type(4){--c:var(--line-c);animation-delay:-1.6s}
@keyframes gate{0%{transform:scale(.08);opacity:0}12%{opacity:.25}70%{opacity:.9}80%{transform:scale(1);opacity:1}88%{transform:scale(1.6);opacity:0}100%{transform:scale(1.6);opacity:0}}
.piece{position:absolute;inset:0;margin:auto;width:24%;height:24%}
.piece svg{position:absolute;inset:0;width:100%;height:100%;opacity:0;animation:morph 6.4s linear infinite;filter:drop-shadow(0 0 10px currentColor) drop-shadow(0 0 24px currentColor)}
.piece svg:nth-child(1){color:var(--circle);animation-delay:-2.08s}
.piece svg:nth-child(2){color:var(--cross);animation-delay:-.48s}
.piece svg:nth-child(3){color:var(--square);animation-delay:-5.28s}
.piece svg:nth-child(4){color:var(--line-c);animation-delay:-3.68s}
@keyframes morph{0%{opacity:0;transform:scale(.7) rotate(-20deg)}3%{opacity:1;transform:scale(1.08)}6%,22%{opacity:1;transform:scale(1)}25%,100%{opacity:0;transform:scale(.7) rotate(20deg)}}
.shaft-hud{position:absolute;left:1rem;top:.8rem;font:700 1.1rem/1.2 Outfit,system-ui,sans-serif;color:white;text-shadow:0 0 8px rgba(0,0,0,.8)}
.shaft-hud small{display:block;font-size:.7rem;letter-spacing:.2em;color:var(--circle)}
.shaft-call{position:absolute;left:0;right:0;top:17%;text-align:center;font-family:FlowDisplay,system-ui,sans-serif;letter-spacing:-.12em;font-size:clamp(1.4rem,3.4vw,2.2rem);color:#ff8ae0;opacity:0;animation:call 1.6s ease-out infinite;text-shadow:0 0 14px #ff59cc}
@keyframes call{0%,10%{opacity:0;transform:translateX(-18px)}20%,55%{opacity:1;transform:none}80%,100%{opacity:0}}

/* Trailer ------------------------------------------------------------------------------------------------ */
.trailer{position:relative;border:1px solid #2c3d5c;background:#000;box-shadow:0 0 0 1px rgba(255,89,204,.15),0 40px 120px -30px rgba(85,228,255,.35),0 20px 80px -40px rgba(255,89,204,.5)}
.trailer iframe{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0;background:#000}
.trailer-link{margin:0;padding:12px 16px;font-size:.9rem}.trailer-link a{color:var(--circle)}
.trailer:before{content:'';position:absolute;inset:-2px;z-index:-1;background:linear-gradient(120deg,var(--circle),var(--square),var(--cross),var(--line-c));filter:blur(18px);opacity:.35}

/* MULTI-FLOW ------------------------------------------------------------------------------------------- */
.mp{position:relative;padding:6rem 0;background:radial-gradient(ellipse at 20% 30%,rgba(255,89,204,.16),transparent 55%),radial-gradient(ellipse at 85% 70%,rgba(64,230,255,.14),transparent 55%),#070b17;border-block:1px solid var(--line)}
.badge{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .8rem;border-radius:999px;background:rgba(255,209,64,.12);color:var(--gold);font-weight:700;font-size:.85rem;border:1px solid rgba(255,209,64,.4)}
.mp-list{list-style:none;padding:0;margin:1.8rem 0 0;display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.mp-list li{padding:1.1rem 1.2rem;background:rgba(17,26,45,.75);border:1px solid var(--line);border-left:3px solid var(--c,var(--circle))}
.mp-list strong{display:block;font-family:Outfit,system-ui,sans-serif;font-size:1.05rem;margin-bottom:.25rem}
.mp-list span{color:var(--muted);font-size:.95rem;line-height:1.55}
.race .rival{position:absolute;width:12%;height:12%;left:50%;top:50%;margin:-6% 0 0 -6%;animation:jostle 3.2s ease-in-out infinite}
.race .rival i{display:block;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle,#fff 0,var(--c) 45%,transparent 72%);box-shadow:0 0 22px var(--c)}
.race .rival b{position:absolute;left:50%;bottom:110%;transform:translateX(-50%);font:700 .7rem/1 Outfit,system-ui,sans-serif;letter-spacing:.08em;padding:.25rem .45rem;background:rgba(5,8,15,.8);border:1px solid var(--c);color:var(--c);white-space:nowrap;border-radius:3px}
.race .r1{--c:var(--circle);--x:-150%;--y:-120%}
.race .r2{--c:var(--cross);--x:170%;--y:-150%;animation-delay:-.8s}
.race .r3{--c:var(--square);--x:-170%;--y:160%;animation-delay:-1.6s}
.race .r4{--c:var(--line-c);--x:150%;--y:130%;animation-delay:-2.4s}
@keyframes jostle{0%,100%{transform:translate(var(--x),var(--y))}35%{transform:translate(calc(var(--x) * .45),calc(var(--y) * .7)) scale(1.06)}70%{transform:translate(calc(var(--x) * .8),calc(var(--y) * .35))}}

/* Journey --------------------------------------------------------------------------------------------- */
.journey2{position:relative;padding:6rem 0 4rem;transition:background-color .8s}
.journey2:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 20%,color-mix(in srgb,var(--tint) 18%,transparent),transparent 60%);transition:background .8s;pointer-events:none}
.depth{position:sticky;top:84px;z-index:5;display:flex;justify-content:center;margin:0 0 2rem;pointer-events:none}
.depth div{display:flex;align-items:center;gap:.8rem;padding:.5rem 1rem;border:1px solid color-mix(in srgb,var(--tint) 60%,transparent);background:rgba(8,13,27,.85);backdrop-filter:blur(8px);border-radius:999px;font:700 .82rem/1 Outfit,system-ui,sans-serif;letter-spacing:.2em;color:var(--tint);transition:color .5s,border-color .5s;box-shadow:0 0 24px -6px var(--tint)}
.depth .bar{position:relative;width:120px;height:4px;background:#1b2740;border-radius:2px;overflow:hidden}
.depth .bar i{position:absolute;inset:0 auto 0 0;width:var(--p,0%);background:var(--tint);transition:width .5s,background .5s}
.worlds{list-style:none;padding:0;margin:0;position:relative}
.worlds:before{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);background:linear-gradient(#55e4ff,#6f7dff,#ff9a5c,#6dff8a,#ffb347,#ff6a3d,#9fe8ff,#2f9dff,#ff4d1f,#c58a4a,#c76bff,#ff3fd2,#8cff5a,#ff3b5c);opacity:.5}
.world2{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:4.5rem;align-items:center;padding:2.2rem 0}
.world2:before{content:'';position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--wc);box-shadow:0 0 16px var(--wc)}
.world2:nth-child(even) .w-img{order:2}
.w-img{display:block;border:1px solid color-mix(in srgb,var(--wc) 45%,#2a3a58);overflow:hidden;box-shadow:0 20px 60px -25px var(--wc)}
.w-img img{aspect-ratio:16/9;object-fit:cover;width:100%;transition:transform .5s}
.world2:hover .w-img img{transform:scale(1.04)}
.w-num{font:800 .85rem/1 Outfit,system-ui,sans-serif;letter-spacing:.25em;color:var(--wc)}
.w-text h3{font-size:clamp(1.5rem,2.6vw,2.1rem);margin:.4rem 0 .5rem}
.w-text p{margin:0}
.w-text a{font-size:.9rem;font-weight:600;color:var(--wc);text-decoration:none}
.w-text a:hover{text-decoration:underline}

/* Modes ------------------------------------------------------------------------------------------------- */
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.mode{position:relative;padding:1.8rem;background:linear-gradient(160deg,#141f36,#0b1222);border:1px solid var(--line);overflow:hidden;transition:transform .25s,border-color .25s}
.mode:hover{transform:translateY(-4px);border-color:var(--c)}
.mode:after{content:'';position:absolute;inset:0 0 auto;height:2px;background:var(--c);box-shadow:0 0 18px var(--c)}
.mode svg{width:38px;height:38px;color:var(--c);filter:drop-shadow(0 0 8px var(--c));margin-bottom:1rem}
.mode h3{margin:0 0 .5rem}.mode p{margin:0;font-size:.98rem}

/* Soundtrack ---------------------------------------------------------------------------------------- */
.ost{display:grid;grid-template-columns:auto 1fr;gap:3rem;align-items:center;padding:3rem;background:linear-gradient(120deg,#1a1033,#0c1a2e);border:1px solid #3b3463}
.eq{display:flex;align-items:flex-end;gap:6px;height:120px;width:150px}
.eq i{flex:1;background:linear-gradient(var(--square),var(--circle));border-radius:2px;animation:eq 1.1s ease-in-out infinite alternate}
.eq i:nth-child(2){animation-delay:-.3s}.eq i:nth-child(3){animation-delay:-.7s}.eq i:nth-child(4){animation-delay:-.15s}.eq i:nth-child(5){animation-delay:-.5s}.eq i:nth-child(6){animation-delay:-.9s}.eq i:nth-child(7){animation-delay:-.4s}
@keyframes eq{0%{height:15%}100%{height:100%}}

/* Launch ------------------------------------------------------------------------------------------- */
.launch{position:relative;text-align:center;padding:6rem 2rem;overflow:hidden;border:1px solid #2c4060;background:radial-gradient(ellipse at 50% 120%,rgba(85,228,255,.25),transparent 60%),linear-gradient(#0a1224,#060a14)}
.launch h2{font-size:clamp(2.2rem,5vw,3.6rem);margin:.5rem 0}
.launch p{margin:0 auto}
.countdown{display:flex;justify-content:center;gap:clamp(.6rem,2vw,1.4rem);margin:2rem 0}
.countdown div{min-width:clamp(64px,10vw,104px);padding:1rem .5rem;background:rgba(17,26,45,.8);border:1px solid var(--line)}
.countdown strong{display:block;font:800 clamp(1.8rem,4.5vw,3rem)/1 Outfit,system-ui,sans-serif;color:white;font-variant-numeric:tabular-nums}
.countdown span{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.launch .actions{justify-content:center}
.platforms{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.4rem;margin-top:1.6rem;color:var(--muted);font-size:.92rem}
.platforms span:before{content:'◆';color:var(--circle);margin-right:.5rem;font-size:.7em}

/* Reveal on scroll -------------------------------------------------------------------------------- */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.js .reveal.in{opacity:1;transform:none}

@media(max-width:950px){.split{grid-template-columns:1fr;gap:2.5rem}.split.flip>:first-child{order:0}.modes{grid-template-columns:repeat(2,1fr)}.world2{gap:2.5rem}.ost{grid-template-columns:1fr;gap:1.5rem}}
@media(max-width:700px){
  .hero2 .wrap{padding-top:5rem;padding-bottom:6rem}
  .hero2:before{background:linear-gradient(0deg,rgba(5,8,15,.9),rgba(5,8,15,.55))}
  .mp{padding:4rem 0}.mp-list{grid-template-columns:1fr}
  .modes{grid-template-columns:1fr}
  .worlds:before{left:9px}
  .world2{grid-template-columns:1fr;gap:1rem;padding:1.4rem 0 1.4rem 2.2rem}
  .world2:before{left:9px;top:2.2rem}
  .world2:nth-child(even) .w-img{order:0}
  .depth{top:92px}.depth .bar{width:70px}
  .ost{padding:1.8rem}.eq{height:70px;width:110px}
  .launch{padding:4rem 1.2rem}
}
@media(prefers-reduced-motion:reduce){
  .hero2 video{display:none}
  .ticker-track,.gate,.piece svg,.shaft-call,.race .rival,.eq i,.scroll-cue i,.glow-text{animation:none!important}
  .gate:nth-of-type(1){opacity:1;transform:scale(1)}
  .piece svg:nth-child(1){opacity:1}
  .js .reveal{opacity:1;transform:none}
}