:root {
  --void: #080711;
  --ultraviolet: #18112d;
  --milk: #f6f0fb;
  --lilac: #c5a8fa;
  --peach: #f1b5ab;
  --citron: #daf884;
  --jade-porcelain: #e4f1d9;
  --jade-mist: #9bc8b5;
  --jade-depth: #235e55;
  --muted: #a9a6b8;
  --line: rgba(255,255,255,.23);
  --display: "Instrument Serif", Georgia, serif;
  --sans: "Space Grotesk", "Arial", sans-serif;
  --mono: "DM Mono", "Courier New", monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 0; }
body { margin: 0; background: var(--void); color: var(--milk); font-family: var(--sans); overflow-x: clip; }
body, button, input { font-family: var(--sans); }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--lilac); color: var(--void); }
:focus-visible { outline: 2px solid var(--citron); outline-offset: 5px; }
html { scrollbar-color: #6d5b8e #100e1a; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; background: #100e1a; }
::-webkit-scrollbar-thumb { border-radius: 20px; background: #665882; border: 2px solid #100e1a; }
::-webkit-scrollbar-thumb:hover { background: #a287d4; }
::-webkit-scrollbar-thumb:active { background: var(--lilac); }
.mono { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; font-weight: 500; }
.skip-link { position: fixed; top: -70px; left: 20px; z-index: 100; background: var(--citron); padding: 14px 20px; color: #0c0a13; border-radius: 3px; }
.skip-link:focus { top: 15px; }

/* Branded loading transition */
.intro { position: fixed; inset: 0; background: radial-gradient(ellipse at center,#1c0e29 0%,#080711 42%,#000 78%); z-index: 90; display: grid; place-content: center; justify-items: center; text-align: center; pointer-events: none; animation: introAway .85s 2.45s ease-in-out forwards; }
.intro-mascot { width: clamp(155px,22vw,260px); max-width: 68vw; filter: drop-shadow(0 0 35px rgba(192,147,245,.38)); animation: introMascot 1.5s cubic-bezier(.16,1,.3,1) both; }
.intro-mark { font-size: clamp(3.6rem, 11vw, 8rem); line-height: .8; letter-spacing: -.105em; font-weight: 700; margin-top: 20px; animation: introMark .85s .5s cubic-bezier(.17,.8,.2,1) both; }
.intro-mark .dot { color: var(--lilac); }
.intro-caption { margin-top: 26px; font: 10px var(--mono); text-transform: uppercase; letter-spacing: .26em; color: #b8a9c5; animation: introMark .9s .85s both; }
@keyframes introAway { to { opacity: 0; visibility: hidden; } }
@keyframes introMark { from { transform: translateY(26px) scale(.94); opacity: 0; filter: blur(8px); } to { transform: none; opacity: 1; filter: blur(0); } }
@keyframes introMascot { from { transform: scale(.45) rotate(-22deg) translateY(70px); opacity: 0; filter: blur(20px); } to { transform: scale(1) rotate(0); opacity: 1; filter: none; } }

/* Minimal fixed shell over the moving world */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 23px clamp(22px,3.5vw,62px); transition: background .35s, border-color .35s, padding .35s; border-bottom: 1px solid transparent; }
.site-header.scrolled { background: rgba(9,7,19,.8); backdrop-filter: blur(24px); border-bottom-color: rgba(255,255,255,.1); padding-top: 16px; padding-bottom: 16px; }
.brand { display: inline-flex; align-items: center; justify-self: start; gap: 5px; font-weight: 700; font-size: 26px; letter-spacing: -.09em; line-height: 1; white-space: nowrap; }
.brand-stop { color: var(--lilac); }
.brand-mascot { width: 47px; height: 44px; object-fit: contain; filter: drop-shadow(0 0 11px rgba(207,168,253,.26)); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.brand:hover .brand-mascot { transform: rotate(10deg) scale(1.08); }
.site-links { display: flex; align-items: center; gap: clamp(18px,3.3vw,54px); }
.site-links a { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; color: rgba(255,255,255,.75); transition: color .2s; }
.site-links a:hover { color: #fff; }
.header-cta { justify-self: end; display: inline-flex; align-items: center; gap: 25px; border: 1px solid rgba(255,255,255,.55); padding: 13px 17px 13px 21px; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; font-size: 11px; background: rgba(10,7,20,.12); transition: background .2s, color .2s, border-color .2s; }
.header-cta:hover { background: var(--milk); color: #15101d; border-color: var(--milk); }
.header-cta span { font-size: 15px; }

.story-rail { position: fixed; right: clamp(22px,3vw,48px); top: 50%; transform: translateY(-50%); z-index: 48; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 12px 6px; }
.rail-line { position: absolute; top: 12px; bottom: 12px; width: 1px; background: rgba(255,255,255,.21); z-index: -1; }
.rail-dot { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; outline-offset: 5px; }
.rail-dot span { width: 5px; height: 5px; background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.2); border-radius: 50%; transition: transform .25s, background .25s, box-shadow .25s; }
.rail-dot:hover span { transform: scale(1.6); background: var(--citron); }
.rail-dot.active span { transform: scale(1.85); background: var(--lilac); box-shadow: 0 0 0 3px rgba(197,168,250,.18),0 0 13px rgba(197,168,250,.4); }
body.light-chapter .rail-line { background: rgba(31,21,41,.18); }
body.light-chapter .rail-dot span { background: rgba(31,21,41,.55); }
body.light-chapter .rail-dot.active span { background: #7350b4; box-shadow: 0 0 0 3px rgba(110,72,170,.17); }

/* Cinematic scenes */
.scene { min-height: 100svh; position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; }
.scene-art { position: absolute; inset: -3%; width: 106%; height: 106%; object-fit: cover; z-index: -3; transform: scale(1.05) translate3d(0,var(--parallax,0px),0); will-change: transform; }
.scene-vignette { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg,rgba(4,4,14,.85) 2%,rgba(6,4,17,.53) 44%,rgba(2,2,9,.07) 80%),linear-gradient(0deg,rgba(4,3,12,.74),transparent 22%,transparent 65%,rgba(5,4,13,.2)); }
.scene-kicker { display: flex; align-items: center; gap: 14px; color: rgba(255,255,255,.82); font: 500 10px var(--mono); letter-spacing: .19em; text-transform: uppercase; margin: 0 0 24px; }
.scene-kicker .rule { width: 33px; height: 1px; background: currentColor; opacity: .65; }
.scene-kicker.dark-ink { color: #1e1725; }
.scene h1, .scene h2, .scene h3, .scene p { margin-top: 0; }
.scene h1,.scene h2 { font-weight: 500; letter-spacing: -.075em; line-height: .91; }
.scene h1 em,.scene h2 em,.scene h3 em { font-family: var(--display); font-weight: 400; letter-spacing: -.05em; }
.scene-index { position: absolute; bottom: 38px; left: clamp(22px,4.4vw,74px); z-index: 8; color: rgba(255,255,255,.55); }
.scene-index span { opacity: .45; padding: 0 12px; }
.scene-index-dark { color: rgba(25,18,32,.68); }
.js .reveal { opacity: 0; transform: translate3d(0,48px,0); filter: blur(3px); transition: opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1),filter 1s; }
.js .reveal.in-view { opacity: 1; transform: none; filter: blur(0); }

/* Arrival */
.scene-hero { background: #0c091d; align-items: center; }
.hero-noise { position: absolute; inset: 0; z-index: -1; opacity: .17; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.15' filter='url(%23n)'/%3E%3C/svg%3E"); pointer-events: none; }
.hero-topline { position: absolute; top: 120px; left: clamp(22px,4.4vw,74px); display: flex; align-items: center; gap: 10px; color: #e1d9e6; opacity: .8; }
.signal-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--citron); box-shadow: 0 0 13px var(--citron); animation: signal 2.2s ease-in-out infinite; }
@keyframes signal { 50% { opacity: .35; } }
.hero-content { position: relative; z-index: 3; padding: 0 0 0 clamp(22px,7.1vw,125px); max-width: 890px; }
.hero-content h1 { font-size: clamp(5.8rem,8.9vw,11.8rem); margin: 0 0 25px; text-shadow: 0 5px 32px rgba(10,4,17,.2); }
.hero-content h1 em { color: #dfcaee; }
.hero-lede { font-size: clamp(16px,1.6vw,20px); line-height: 1.55; max-width: 420px; color: #e8e1ed; margin-bottom: 35px; text-shadow: 0 2px 17px rgba(0,0,0,.5); }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 42px; border: 1px solid transparent; padding: 19px 22px; min-width: 230px; min-height: 54px; text-transform: uppercase; font-weight: 700; font-size: 11px; letter-spacing: .1em; transition: background .25s,color .25s,transform .25s; }
.button:hover { transform: translateY(-3px); }
.button-light { background: var(--milk); color: #1b1522; }
.button-light:hover { background: var(--citron); }
.button span { font-size: 18px; font-weight: 400; }
.hero-side-label { position: absolute; right: clamp(70px,7vw,120px); top: 50%; writing-mode: vertical-rl; text-orientation: mixed; color: rgba(255,255,255,.67); }
.scroll-cue { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; z-index: 10; font: 500 9px var(--mono); letter-spacing: .17em; white-space: nowrap; }
.scroll-ring { display: grid; place-items: center; width: 49px; height: 49px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; transition: background .2s, transform .2s; }
.scroll-cue:hover .scroll-ring { background: rgba(255,255,255,.2); transform: translateY(5px); }
.scroll-ring span { font: 20px var(--sans); }

/* Zero-backed genesis */
.scene-zero { background: radial-gradient(circle at 50% 51%, #29203e 0,#0f0b1e 35%,#030308 78%); justify-content: center; text-align: center; padding: 150px 50px 105px; }
.starfield { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.starfield i { position: absolute; width: var(--size); height: var(--size); top: var(--y); left: var(--x); background: #faf3ff; opacity: var(--alpha); border-radius: 50%; box-shadow: 0 0 6px rgba(223,213,255,.7); animation: twinkle var(--speed) ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .08; transform: scale(.6); } to { opacity: var(--alpha); transform: scale(1.15); } }
.enormous-zero { position: absolute; left: 50%; top: 49%; transform: translate(-50%,-50%); font-family: var(--display); font-size: min(83vw,95vh); line-height: .7; color: transparent; -webkit-text-stroke: 1px rgba(226,210,255,.15); text-shadow: 0 0 95px rgba(170,123,240,.04); user-select: none; }
.zero-orbit { position: absolute; width: min(72vw,70vh); aspect-ratio: 1; left: 50%; top: 49%; transform: translate(-50%,-50%); opacity: .55; }
.zero-orbit span { position: absolute; border: 1px solid rgba(197,168,250,.16); border-radius: 50%; inset: 10%; box-shadow: 0 0 42px rgba(197,168,250,.04); }
.zero-orbit .orbit-two { inset: -5%; transform: rotateX(61deg) rotate(17deg); }
.zero-orbit .orbit-three { inset: 1%; transform: rotateY(59deg) rotate(-24deg); }
.zero-content { z-index: 2; max-width: 850px; margin-top: 20px; }
.zero-content .scene-kicker { justify-content: center; }
.zero-content h1,.zero-content h2 { font-size: clamp(5rem,9.1vw,11rem); margin: 0 0 26px; }
.zero-content h1 em,.zero-content h2 em { color: var(--lilac); }
.zero-content > p:not(.scene-kicker) { font-size: clamp(15px,1.45vw,19px); line-height: 1.7; color: #d4cbdc; max-width: 615px; margin: 0 auto 46px; }
.zero-facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.18); max-width: 650px; margin: auto; text-align: left; backdrop-filter: blur(20px); }
.zero-facts div { display: flex; flex-direction: column; gap: 12px; padding: 20px 25px; background: rgba(9,7,19,.7); }
.zero-facts strong { font: 400 38px var(--display); letter-spacing: -.03em; }
.zero-facts span,.zero-footnote { font: 10px var(--mono); color: #d0c6d8; letter-spacing: .08em; }
.zero-footnote { position: absolute; bottom: 39px; right: 100px; opacity: .65; }

/* The fee-driven portal */
.scene-portal { background: #f8eaf4; color: #1b1222; }
.scene-portal .scene-art { object-position: 50% 48%; }
.portal-shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg,rgba(247,236,250,.84),rgba(250,239,247,.55) 34%,transparent 68%),linear-gradient(0deg,rgba(239,217,239,.3),transparent 35%); }
.portal-content { position: relative; z-index: 2; width: min(860px,58vw); padding-left: clamp(22px,7vw,125px); }
.portal-content h2 { font-size: clamp(5.4rem,9vw,10.7rem); margin-bottom: 34px; }
.portal-content h2 em { color: #754b9e; }
.portal-content > p:not(.scene-kicker) { max-width: 440px; font-size: clamp(16px,1.5vw,19px); line-height: 1.58; color: #32253d; }
.portal-footnote { display: inline-flex; align-items: center; gap: 11px; margin-top: 30px; padding: 14px 20px; background: rgba(255,255,255,.64); border: 1px solid rgba(70,37,92,.18); font: 500 10px var(--mono); letter-spacing: .08em; color: #3c274b; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: #8b58b6; box-shadow: 0 0 0 5px rgba(139,88,182,.1); }

/* A universe of possible token species */
.scene-world { background: #f1edff; color: #181425; align-items: flex-start; }
.scene-world .scene-art { object-position: center 56%; }
.world-shade { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(245,244,255,.72),rgba(245,244,255,.12) 48%,rgba(237,229,251,.27) 72%,rgba(226,215,245,.82)); z-index: -2; }
.world-content { position: relative; z-index: 2; padding: clamp(145px,16vh,210px) 0 0 clamp(22px,7vw,125px); max-width: 870px; }
.world-content h2 { font-size: clamp(5rem,9vw,10.6rem); margin-bottom: 26px; text-shadow: 0 2px 30px rgba(255,255,255,.5); }
.world-content h2 em { color: #704e9d; }
.world-content p:not(.scene-kicker) { max-width: 455px; font-size: clamp(16px,1.45vw,19px); line-height: 1.57; color: #3e3049; }
.species-strip { position: absolute; bottom: 70px; left: clamp(22px,7vw,125px); right: clamp(50px,8vw,150px); display: flex; align-items: center; gap: clamp(16px,2vw,40px); padding: 21px 24px; background: rgba(253,250,255,.73); border: 1px solid rgba(55,30,89,.22); backdrop-filter: blur(25px); z-index: 5; box-shadow: 0 15px 60px rgba(49,36,73,.1); }
.species-strip > span { margin-right: auto; font: 500 10px var(--mono); letter-spacing: .14em; color: #60536e; }
.species-strip b { font-size: 13px; letter-spacing: .04em; white-space: nowrap; }
.species-strip i { font-style: normal; color: #8060af; padding-left: 6px; }

/* Mechanic lab and live local concept controls */
.scene-lab { background: #0e0b1a; display: block; padding: clamp(120px,12vw,180px) clamp(22px,6vw,110px) 125px; min-height: max(100svh,940px); }
.lab-atmosphere { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 80% 19%,rgba(141,93,223,.18),transparent 37%),radial-gradient(ellipse at 8% 75%,rgba(215,118,139,.1),transparent 32%); }
.lab-heading { text-align: center; max-width: 780px; margin: 0 auto 63px; }
.lab-heading .scene-kicker { justify-content: center; }
.lab-heading h2 { font-size: clamp(5.5rem,8.4vw,10rem); margin-bottom: 18px; }
.lab-heading h2 em { color: var(--lilac); }
.lab-heading > p:not(.scene-kicker) { max-width: 570px; margin: 0 auto; line-height: 1.6; color: #c3b8d2; font-size: 17px; }
.lab-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; max-width: 1160px; margin: 0 auto; }
.specimen-card,.mechanics-card { position: relative; border: 1px solid rgba(210,185,240,.2); background: linear-gradient(145deg,rgba(29,22,49,.95),rgba(13,12,24,.97)); min-width: 0; }
.card-topline { display: flex; align-items: center; justify-content: space-between; color: #aaa0bd; padding: 26px 27px; border-bottom: 1px solid rgba(255,255,255,.11); gap: 20px; }
.live-indicator { display: flex; align-items: center; gap: 7px; color: var(--citron); }
.live-indicator i { width: 6px; height: 6px; background: currentColor; border-radius: 50%; }
.specimen-visual { height: 305px; position: relative; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 48%,rgba(164,117,227,.16),transparent 52%); }
.specimen-halo { width: 244px; height: 244px; border-radius: 50%; position: absolute; background: radial-gradient(circle,rgba(186,134,242,.33),transparent 60%); filter: blur(10px); }
.specimen-mascot { position: relative; z-index: 2; height: 255px; width: 270px; object-fit: contain; filter: drop-shadow(0 18px 25px rgba(157,99,212,.35)); animation: mascotFloat 5.5s ease-in-out infinite; }
.specimen-mascot.is-switching { animation: morphSwitch .45s cubic-bezier(.2,.65,.22,1) both, mascotFloat 5.5s ease-in-out .45s infinite; }
@keyframes morphSwitch { 0% { opacity: .35; transform: translateY(19px) scale(.78) rotate(-14deg); filter: blur(6px) drop-shadow(0 18px 25px rgba(157,99,212,.35)); } 100% { opacity: 1; transform: translateY(5px) scale(.98) rotate(-4deg); filter: blur(0) drop-shadow(0 18px 25px rgba(157,99,212,.35)); } }
.specimen-ring { position: absolute; width: 290px; height: 290px; border: 1px solid rgba(210,181,245,.19); border-radius: 50%; transform: rotateX(64deg) rotate(-21deg); }
.ring-b { width: 320px; height: 320px; transform: rotateY(62deg) rotate(19deg); }
.orbit-mote { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--citron); box-shadow: 0 0 16px currentColor; }
.mote-a { top: 21%; left: 30%; }.mote-b { top: 75%; right: 22%; width: 5px; height: 5px; background: #ffa4d1; }.mote-c { top: 29%; right: 31%; width: 3px; height: 3px; }
@keyframes blobFloat { 50% { transform: rotate(-10deg) translateY(-14px) scale(1.03); } }
@keyframes mascotFloat { 0%,100% { transform: translateY(5px) rotate(-4deg) scale(.98); } 50% { transform: translateY(-14px) rotate(5deg) scale(1.04); } }
.species-actions { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 0 25px; padding-bottom: 21px; gap: 8px; }
.species-button { border: 1px solid rgba(199,177,218,.25); color: #c5bfd2; background: rgba(255,255,255,.03); padding: 8px 5px 10px; min-width: 0; min-height: 81px; font-size: 12px; font-weight: 600; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; transition: background .2s,border-color .2s,color .2s; }
.species-button img { display: block; width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 3px 7px rgba(202,143,253,.26)); transition: transform .22s; }
.species-button:hover img,.species-button.selected img { transform: scale(1.13) translateY(-2px); }
.species-button:hover { border-color: var(--lilac); color: white; }
.species-button.selected { background: var(--lilac); border-color: var(--lilac); color: #191125; }
.specimen-copy { padding: 24px 27px 34px; border-top: 1px solid rgba(255,255,255,.09); min-height: 198px; }
.specimen-type { color: var(--citron); margin-bottom: 10px; }
.specimen-copy h3 { font-size: 27px; margin-bottom: 9px; letter-spacing: -.05em; }
.specimen-copy p { color: #bcb0ca; font-size: 14px; line-height: 1.55; max-width: 430px; margin-bottom: 0; }
.mechanics-card { padding-bottom: 32px; }
.mechanics-card h3 { font-weight: 500; letter-spacing: -.055em; font-size: clamp(3rem,4vw,5.1rem); line-height: .96; padding: 37px 36px 0; margin-bottom: 20px; }
.mechanics-card h3 em { color: var(--lilac); }
.mechanics-desc { font-size: 14px; color: #beb2cb; line-height: 1.65; max-width: 450px; padding: 0 36px; margin-bottom: 50px; }
.metric-label { display: flex; justify-content: space-between; gap: 16px; margin: 0 36px 14px; color: #bdb1d0; }
.metric-label output { color: var(--milk); font-size: 13px; }
input[type="range"] { margin: 0 36px 31px; width: calc(100% - 72px); accent-color: var(--lilac); cursor: pointer; height: 24px; background: transparent; }
input[type="range"]:focus-visible { outline: 2px solid var(--citron); outline-offset: 5px; }
.mechanic-values { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.13); margin: 0 36px 19px; }
.mechanic-values div { background: #211932; padding: 20px 18px 25px; display: flex; flex-direction: column; gap: 15px; min-width: 0; }
.mechanic-values span { color: #a9a0b8; font: 10px var(--mono); letter-spacing: .08em; }
.mechanic-values strong { font-size: clamp(22px,2.6vw,33px); font-weight: 500; letter-spacing: -.06em; overflow-wrap: anywhere; color: var(--citron); }
.calc-footer { display: flex; justify-content: space-between; color: #b2a9c0; padding: 0 36px; gap: 14px; }
.model-disclaimer { font-size: 11px; line-height: 1.55; color: #867d96; margin: 22px 36px 0; }

/* Finale */
.scene-future { background: radial-gradient(ellipse at 54% 45%,#29143e 0,#110b23 34%,#05040a 77%); justify-content: center; text-align: center; padding: 125px 24px 150px; }
.future-glow { position: absolute; height: 70vw; width: 70vw; max-width: 800px; max-height: 800px; border-radius: 50%; background: radial-gradient(circle,rgba(187,124,245,.18),rgba(184,124,242,.05) 40%,transparent 62%); filter: blur(35px); }
.future-orb { position: absolute; width: min(70vw,780px); aspect-ratio: 1; border: 1px solid rgba(222,193,255,.12); border-radius: 50%; box-shadow: 0 0 40px rgba(197,168,250,.09), inset 0 0 50px rgba(197,168,250,.05); animation: futurePulse 11s ease-in-out infinite; }
.future-orb::before,.future-orb::after { content:""; position: absolute; inset: 9%; border-radius: 50%; border: 1px solid rgba(226,198,255,.1); transform: rotateX(60deg); }
.future-orb::after { inset: 22%; transform: rotateY(70deg); }
@keyframes futurePulse { 50% { transform: scale(1.04) rotate(5deg); } }
.future-content { z-index: 2; }
.future-content .scene-kicker { justify-content: center; }
.future-content h2 { font-size: clamp(8rem,23vw,28rem); line-height: .65; margin: 58px 0 53px; font-weight: 700; letter-spacing: -.13em; }
.future-content h2 em { color: var(--lilac); font-size: .9em; }
.future-content > p:not(.scene-kicker) { color: #d0c4de; line-height: 1.6; max-width: 520px; margin: 0 auto 38px; font-size: 18px; }
.final-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 26px; }
.text-link { font-size: 12px; text-transform: uppercase; letter-spacing: .09em; border-bottom: 1px solid rgba(255,255,255,.4); padding: 13px 0; transition: border-color .2s; }
.text-link:hover { border-color: white; }
.text-link span { padding-left: 15px; }
.footer { position: absolute; left: clamp(22px,4.4vw,74px); bottom: 20px; right: clamp(55px,4.4vw,74px); display: flex; justify-content: space-between; align-items: center; gap: 18px; border-top: 1px solid rgba(255,255,255,.19); padding-top: 22px; color: #a69ab8; font-size: 9px; }
.scene-future .scene-index { display: none; }

@media (min-width: 1450px) {
  .scene-hero .scene-art { object-position: center 48%; }
  .hero-content { max-width: 1000px; }
}
@media (max-width: 1050px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-links { display: none; }
  .hero-content { padding-left: 7vw; max-width: 710px; }
  .hero-content h1 { font-size: clamp(5.3rem,10.5vw,8rem); }
  .scene-hero .scene-art { object-position: 63% 50%; }
  .world-content h2 { font-size: clamp(5rem,10vw,8.5rem); }
  .species-strip { flex-wrap: wrap; }
  .species-strip > span { flex-basis: 100%; }
}
@media (max-width: 760px) {
  .site-header { padding: 17px 20px; }
  .site-header.scrolled { padding: 12px 20px; }
  .brand { font-size: 25px; }
  .brand-mascot { width: 40px; height: 38px; }
  .header-cta { font-size: 10px; padding: 12px; gap: 13px; }
  .story-rail { right: 14px; gap: 13px; }
  .rail-dot { width: 16px; height: 16px; }
  .scene-index { bottom: 22px; left: 22px; font-size: 9px; }
  .scene-hero { align-items: flex-end; padding-bottom: 17vh; min-height: 100svh; }
  .scene-hero .scene-art { object-position: 59% 45%; }
  .scene-vignette { background: linear-gradient(0deg,rgba(4,3,12,.99) 1%,rgba(5,4,13,.65) 44%,rgba(4,3,11,.05) 76%), linear-gradient(90deg,rgba(5,3,13,.15),transparent); }
  .hero-topline { top: 94px; left: 22px; font-size: 9px; }
  .hero-content { padding: 0 48px 0 22px; }
  .hero-content h1 { font-size: clamp(4.5rem,17vw,7.2rem); line-height: .9; margin-bottom: 20px; }
  .hero-lede { font-size: 15px; max-width: 350px; margin-bottom: 24px; }
  .hero-side-label { display: none; }
  .scroll-cue { bottom: 36px; }
  .scroll-cue > span:first-child { display: none; }
  .scroll-ring { width: 40px; height: 40px; }
  .scene-hero .scene-index { display: none; }
  .scene-kicker { font-size: 9px; margin-bottom: 20px; }
  .scene-zero { padding: 120px 25px 110px; }
  .enormous-zero { font-size: 95vw; opacity: .6; }
  .zero-content h1,.zero-content h2 { font-size: clamp(4.4rem,15vw,7rem); }
  .zero-content > p:not(.scene-kicker) { font-size: 15px; }
  .zero-facts { gap: 0; }
  .zero-facts div { padding: 14px 11px; gap: 9px; }
  .zero-facts strong { font-size: 29px; }
  .zero-facts span { font-size: 8px; line-height: 1.4; }
  .zero-footnote { bottom: 57px; right: 20px; left: 20px; text-align: center; font-size: 9px; }
  .scene-zero .scene-index { display: none; }
  .scene-portal { align-items: flex-end; padding-bottom: 100px; }
  .scene-portal .scene-art { object-position: 62% center; }
  .portal-shade { background: linear-gradient(0deg,rgba(250,239,249,.97),rgba(250,239,249,.83) 30%,transparent 66%); }
  .portal-content { width: 100%; padding: 0 48px 0 22px; }
  .portal-content h2 { font-size: clamp(4.6rem,16vw,7rem); margin-bottom: 20px; }
  .portal-content > p:not(.scene-kicker) { font-size: 15px; max-width: 440px; }
  .portal-footnote { font-size: 9px; margin-top: 16px; padding: 13px; }
  .scene-world { align-items: flex-start; }
  .scene-world .scene-art { object-position: 65% center; }
  .world-shade { background: linear-gradient(180deg,rgba(249,245,255,.92) 2%,rgba(249,245,255,.8) 27%,transparent 54%,rgba(243,234,250,.78) 83%); }
  .world-content { padding: 123px 45px 0 22px; }
  .world-content h2 { font-size: clamp(4.6rem,16vw,7.5rem); margin-bottom: 17px; }
  .world-content p:not(.scene-kicker) { font-size: 14px; max-width: 350px; }
  .species-strip { left: 18px; right: 18px; bottom: 58px; padding: 15px; gap: 11px; }
  .species-strip > span { font-size: 9px; }
  .species-strip b { font-size: 11px; }
  .scene-world .scene-index { display: none; }
  .scene-lab { padding: 125px 18px 100px; }
  .lab-heading { margin-bottom: 33px; }
  .lab-heading h2 { font-size: clamp(4.5rem,15vw,6.8rem); }
  .lab-heading > p:not(.scene-kicker) { font-size: 15px; }
  .lab-grid { grid-template-columns: 1fr; gap: 16px; }
  .specimen-visual { height: 240px; }
  .specimen-mascot { width: 226px; height: 220px; }
  .species-actions { margin: 0 15px; gap: 6px; }
  .species-button { font-size: 11px; }
  .specimen-copy { padding: 21px; min-height: 0; }
  .mechanics-card h3 { padding: 30px 22px 0; font-size: 3.6rem; }
  .mechanics-desc { padding: 0 22px; margin-bottom: 40px; }
  .metric-label { margin: 0 22px 13px; }
  input[type="range"] { margin-left: 22px; margin-right: 22px; width: calc(100% - 44px); }
  .mechanic-values { margin: 0 22px 18px; }
  .mechanic-values div { padding: 14px 11px 17px; }
  .mechanic-values span { font-size: 9px; }
  .mechanic-values strong { font-size: 24px; }
  .calc-footer { padding: 0 22px; font-size: 9px; }
  .model-disclaimer { margin: 18px 22px 0; }
  .scene-lab .scene-index { display: none; }
  .scene-future { padding: 110px 25px 180px; }
  .future-content h2 { font-size: clamp(7rem,28vw,13rem); margin: 55px 0; }
  .future-content > p:not(.scene-kicker) { font-size: 15px; }
  .footer { flex-direction: column; text-align: center; bottom: 16px; left: 22px; right: 22px; gap: 7px; }
}
@media (max-width: 380px) {
  .header-cta { gap: 6px; font-size: 9px; }
  .brand { font-size: 23px; }
  .hero-content h1 { font-size: 4.45rem; }
  .zero-facts span { font-size: 7px; }
  .species-strip { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .intro { animation: none; opacity: 0; visibility: hidden; }
  .intro-mascot,.intro-mark,.intro-caption,.signal-dot,.starfield i,.specimen-mascot,.future-orb { animation: none !important; }
  .js .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .scene-art { transform: none !important; will-change: auto; }
  .button,.header-cta,.rail-dot span,.scroll-ring,.species-button { transition-duration: .01ms; }
}

/* MORPHIT FILM / The user's six Wan generations, one uninterrupted 30-second journey.
   The footage is kept legible as a square image, while a softened extension fills
   widescreen and portrait displays. No stretched or cropped mascot. */
.intro { animation: introAway .7s 1.1s ease-in-out forwards; }
.cinema-shell { position: relative; isolation: isolate; background: #050309; }
.cinema-stage { position: sticky; top: 0; z-index: 3; isolation: isolate; width: 100%; height: 100svh; min-height: 450px; overflow: hidden; background: #06040a; color: #fff8fc; }
.cinema-track { position: relative; height: 600svh; margin-top: -100svh; pointer-events: none; }
.cinema-anchor { height: 100svh; scroll-margin-top: 0; }
.cinema-ambient { position: absolute; inset: -15%; z-index: 0; background: url('./assets/film/01-awaken.webp') center / cover no-repeat; filter: blur(84px) brightness(.68) saturate(1.65); transform: scale(1.14); transition: filter 1s ease, background-image .3s ease; will-change: filter; }
.cinema-stage.is-light { background: #e8e4e3; color: #1d1821; }
.cinema-stage.is-light .cinema-ambient { filter: blur(78px) brightness(1.07) saturate(.8); }
.cinema-backlight { position: absolute; z-index: 1; inset: 0; pointer-events: none; background: radial-gradient(ellipse 58% 62% at 51% 42%,transparent 28%,rgba(5,3,13,.34) 88%),linear-gradient(90deg,rgba(4,3,12,.64),transparent 45%,rgba(4,3,12,.18) 100%),linear-gradient(0deg,rgba(4,3,12,.82),transparent 29%,transparent 74%,rgba(4,3,12,.26)); transition: opacity .6s ease; }
.cinema-stage.is-light .cinema-backlight { opacity: .12; }
.cinema-video { position: absolute; z-index: 2; left: 50%; top: 49%; width: min(108svh,108vw); height: min(108svh,108vw); aspect-ratio: 1; object-fit: contain; display: block; transform: translate(-50%,-50%); -webkit-mask-image: radial-gradient(ellipse at 50% 50%,#000 57%,rgba(0,0,0,.96) 63%,transparent 77%); mask-image: radial-gradient(ellipse at 50% 50%,#000 57%,rgba(0,0,0,.96) 63%,transparent 77%); filter: saturate(1.1) contrast(1.035); }
.cinema-grain { position: absolute; z-index: 3; inset: -70%; opacity: .15; pointer-events: none; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); background-size: 150px; animation: cinemaNoise .45s steps(3) infinite; }
@keyframes cinemaNoise { 0% { transform: translate(0,0); } 25% { transform: translate(1%,-1%); } 50% { transform: translate(-1%,1%); } 75% { transform: translate(1%,1%); } }
.cinema-flash { position: absolute; z-index: 4; inset: 0; pointer-events: none; opacity: 0; background: #fff8e6; transition: opacity .24s ease; }
.cinema-flash.is-flashing { opacity: .28; transition-duration: .06s; }
.cinema-editorial { position: absolute; z-index: 5; inset: 0; pointer-events: none; }
.cinema-editorial a,.cinema-editorial button { pointer-events: auto; }
.cinema-topline { position: absolute; top: clamp(102px,15vh,170px); left: clamp(23px,5.4vw,104px); right: clamp(60px,5.4vw,104px); display: flex; align-items: center; justify-content: space-between; gap: 20px; color: rgba(255,248,255,.72); font-size: clamp(8px,.75vw,11px); letter-spacing: .19em; white-space: nowrap; }
.cinema-live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--citron); box-shadow: 0 0 18px var(--citron); margin-right: 10px; vertical-align: 1px; animation: cinemaPulse 2s ease-in-out infinite; }
@keyframes cinemaPulse { 50% { opacity: .35; box-shadow: 0 0 4px var(--citron); } }
.cinema-copy { position: absolute; left: clamp(24px,7vw,135px); bottom: clamp(130px,20vh,250px); max-width: min(730px,71vw); opacity: 0; visibility: hidden; transform: translate3d(0,27px,0); filter: blur(9px); transition: opacity .58s ease,transform .7s cubic-bezier(.16,1,.3,1),filter .7s ease,visibility 0s linear .6s; pointer-events: none; }
.cinema-copy.is-active { opacity: 1; visibility: visible; transform: none; filter: none; transition-delay: 0s; pointer-events: auto; }
.cinema-eyebrow { color: #d8f68d; font-size: 10px; letter-spacing: .2em; margin: 0 0 18px; }
.cinema-copy h1,.cinema-copy h2 { margin: 0; font-family: var(--sans); font-size: clamp(5.3rem,10vw,12.4rem); font-weight: 700; line-height: .77; letter-spacing: -.105em; text-transform: uppercase; text-wrap: balance; text-shadow: 0 14px 80px rgba(0,0,0,.28); }
.cinema-copy h1 em,.cinema-copy h2 em { font-family: var(--display); font-weight: 400; letter-spacing: -.045em; color: var(--lilac); text-transform: none; }
.cinema-lede { max-width: 370px; margin: 25px 0 0; font-size: clamp(13px,1.25vw,17px); letter-spacing: -.02em; color: #e5dbe8; line-height: 1.6; }
.cinema-phrase { margin: 0; max-width: 720px; font-size: clamp(3.4rem,7.2vw,8.9rem); font-weight: 600; line-height: .98; letter-spacing: -.082em; text-shadow: 0 8px 35px rgba(0,0,0,.42); }
.cinema-phrase em { font-family: var(--display); font-weight: 400; letter-spacing: -.03em; color: #f0bfd9; }
.cinema-copy-light { bottom: clamp(170px,24vh,280px); }
.cinema-copy-light h2 { font-size: clamp(4.9rem,9.5vw,10.8rem); text-shadow: none; }
.cinema-copy-light h2 em { color: #7450ab; }
.cinema-copy-finale { bottom: clamp(135px,20vh,255px); }
.cinema-copy-finale h2 { font-size: clamp(7rem,15vw,16rem); }
.cinema-copy-finale .button { margin-top: 24px; box-shadow: 0 15px 80px rgba(0,0,0,.23); }
.cinema-side-index { position: absolute; top: 50%; right: clamp(28px,5.6vw,90px); transform: translateY(-50%); display: flex; align-items: center; gap: 8px; font-size: 10px; writing-mode: vertical-rl; color: rgba(255,255,255,.7); }
.cinema-side-index span { font-size: 21px; font-weight: 600; color: #fff; }
.cinema-side-index b { font: inherit; margin-top: 28px; color: var(--citron); }
.cinema-footbar { position: absolute; bottom: clamp(21px,4.5vh,48px); left: clamp(23px,5.4vw,104px); right: clamp(23px,5.4vw,104px); }
.cinema-progress { width: 100%; height: 1px; background: rgba(255,255,255,.35); position: relative; overflow: hidden; }
.cinema-progress span { display: block; width: 100%; height: 100%; background: var(--citron); transform: scaleX(0); transform-origin: left center; will-change: transform; }
.cinema-footbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 16px; color: rgba(255,255,255,.8); letter-spacing: .1em; }
.cinema-scroll-hint { margin-left: auto; }
.cinema-scroll-hint span { font-size: 18px; margin-left: 8px; }
.cinema-replay { padding: 3px 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.5); background: transparent; color: inherit; font: inherit; letter-spacing: inherit; white-space: nowrap; }
.cinema-replay:hover,.cinema-skip:hover { color: var(--citron); }
.cinema-skip { white-space: nowrap; }
.cinema-stage.is-light .cinema-topline,.cinema-stage.is-light .cinema-footbar-inner,.cinema-stage.is-light .cinema-side-index { color: #251e2f; }
.cinema-stage.is-light .cinema-progress { background: rgba(28,18,33,.36); }
.cinema-stage.is-light .cinema-progress span { background: #7952a8; }
.cinema-stage.is-light .cinema-copy-light { color: #28202f; }
.cinema-stage.is-light .cinema-copy-light .cinema-eyebrow { color: #73409c; }
.cinema-stage.is-light .cinema-side-index span { color: #251e2f; }
.cinema-stage.is-light .cinema-side-index b { color: #7952a8; }
body.light-chapter .site-header:not(.scrolled) { background: rgba(242,237,240,.64); backdrop-filter: blur(16px); }
body.light-chapter .site-header:not(.scrolled) .brand,body.light-chapter .site-header:not(.scrolled) .site-links a { color: #241b2c; }
.cinema-static-fallback { display: none; position: absolute; inset: 12% 5% 8%; z-index: 2; background: url('./assets/film/01-awaken.webp') center / contain no-repeat; }
.cinema-stage.is-static .cinema-video { display: none; }
.cinema-stage.is-static .cinema-static-fallback { display: block; }
.story-rail { transition: opacity .35s ease; }
body.after-film .story-rail { opacity: 0; pointer-events: none; }

@media (max-width: 1000px) {
  .cinema-copy h1,.cinema-copy h2 { font-size: clamp(4.1rem,11vw,8rem); }
  .cinema-copy-finale h2 { font-size: clamp(6.5rem,17vw,12rem); }
  .cinema-phrase { font-size: clamp(3.2rem,8vw,7rem); }
  .cinema-side-index { right: 20px; }
}
@media (max-width: 760px) {
  .intro { animation-delay: .7s; }
  .cinema-stage { min-height: 0; }
  .cinema-video { top: 43%; width: 108vw; height: 108vw; }
  .cinema-ambient { filter: blur(53px) brightness(.57) saturate(1.55); }
  .cinema-backlight { background: linear-gradient(0deg,rgba(5,4,12,.9),rgba(5,4,12,.08) 42%,transparent 72%),linear-gradient(180deg,rgba(4,3,12,.49),transparent 28%); }
  .cinema-topline { left: 21px; right: 21px; top: 92px; gap: 8px; font-size: 8px; letter-spacing: .08em; }
  .cinema-topline span:last-child { font-size: 8px; }
  .cinema-copy { left: 23px; right: 24px; max-width: none; bottom: clamp(126px,18vh,182px); }
  .cinema-eyebrow { font-size: 9px; margin-bottom: 11px; }
  .cinema-copy h1,.cinema-copy h2 { font-size: clamp(3.75rem,13.4vw,7rem); }
  .cinema-lede { font-size: 13px; line-height: 1.4; margin-top: 16px; max-width: 270px; }
  .cinema-phrase { font-size: clamp(3.25rem,12vw,5.8rem); max-width: 95%; }
  .cinema-copy-light { bottom: clamp(170px,24vh,230px); }
  .cinema-copy-light h2 { font-size: clamp(3.3rem,12.5vw,6rem); }
  .cinema-copy-finale { bottom: clamp(130px,17vh,172px); }
  .cinema-copy-finale h2 { font-size: clamp(6rem,23vw,10.5rem); }
  .cinema-copy-finale .button { padding: 13px 16px; min-height: 44px; min-width: 200px; margin-top: 16px; }
  .cinema-side-index { display: none; }
  .cinema-footbar { left: 21px; right: 21px; bottom: clamp(15px,2.7vh,28px); }
  .cinema-footbar-inner { padding-top: 13px; gap: 10px; flex-wrap: wrap; font-size: 9px; }
  .cinema-scroll-hint { display: none; }
  .cinema-replay { margin-left: auto; }
  .cinema-skip { width: 100%; text-align: right; }
  .cinema-stage.is-light .cinema-backlight { opacity: .1; }
  .story-rail { right: 7px; }
  .rail-dot { width: 12px; height: 12px; }
}
@media (max-width: 380px) {
  .cinema-copy h1 { font-size: 13vw; }
  .cinema-copy-finale h2 { font-size: 22vw; }
  .cinema-footbar-inner { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .cinema-track { display: none; }
  .cinema-stage { position: relative; }
  .cinema-video,.cinema-grain { display: none; }
  .cinema-static-fallback { display: block; }
  .cinema-copy,.cinema-copy.is-active { transition: none; }
  .cinema-replay,.cinema-scroll-hint,.story-rail { display: none; }
}

/* V4 / A continuous scroll-led Morphit universe. The Wan film is an opt-in
   feature; the 12% longer travel keeps the scenes reactive rather than rushed. */
.intro { display: none; }
.cinema-shell { height: 300svh; background: #060412; }
.cinema-stage { position: sticky; top: 0; height: 100svh; min-height: 0; background: #080611; }
.cinema-track { height: 200svh; margin-top: 0; position: relative; }
.cinema-anchor { position: absolute; height: 1px; pointer-events: none; }
.cinema-anchor:nth-child(1) { top: 0; }
.cinema-anchor:nth-child(2) { top: 24%; }
.cinema-anchor:nth-child(3) { top: 46%; }
.cinema-anchor:nth-child(4) { top: 71%; }
.cinema-anchor:nth-child(5) { top: 95.5%; }
.cinema-ambient { inset: 0; background: radial-gradient(ellipse at 50% 44%,rgba(84,45,128,.35),transparent 40%),radial-gradient(ellipse at 63% 80%,#20103b,transparent 60%),#080611; filter: none; transform: none; transition: none; }
.cinema-milk-field,.cinema-lime-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cinema-milk-field { background: radial-gradient(ellipse at 55% 46%,#fff,#eae2ff 54%,#d3c9ed 115%); opacity: var(--milk-stage,0); }
.cinema-lime-field {
  /* A generated emerald-world environment plate, blended into the ending
     chapter. It contains NO mascots or extra 3D portals: those stay live. */
  background:
    radial-gradient(ellipse 68% 68% at 52% 39%,rgba(0,12,12,.12),rgba(0,20,15,.1) 61%,rgba(0,7,9,.47) 100%),
    linear-gradient(180deg,rgba(0,9,12,.24),transparent 31%,rgba(0,21,13,.15) 73%,rgba(0,7,9,.44)),
    url("./assets/morphit-emerald-world.webp") center center / cover no-repeat,
    #06211a;
  opacity: var(--lime-stage,0);
  overflow: hidden;
}
.cinema-lime-field::before {
  content: "";
  position: absolute;
  inset: -8%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 32% 42% at 10% 65%,rgba(109,255,177,.18),transparent 90%),
    radial-gradient(ellipse 37% 30% at 85% 58%,rgba(47,222,163,.12),transparent 86%);
  filter: blur(39px);
  opacity: .7;
}
.cinema-lime-field::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 145px rgba(0,9,15,.44);
  background: radial-gradient(ellipse 88% 90% at 47% 35%,transparent 55%,rgba(0,7,12,.22) 100%);
}
.cinema-backlight { z-index: 1; opacity: var(--shadow-stage,1); background: radial-gradient(ellipse at center,transparent 42%,rgba(3,2,9,.46) 100%),linear-gradient(0deg,rgba(5,3,12,.78),transparent 28%,transparent 75%,rgba(3,2,9,.24)); }
.cinema-canvas { display: block; width: 100%; height: 100%; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.cinema-static-fallback { display: grid; place-items: center; position: absolute; inset: 0; z-index: 2; background: radial-gradient(circle at 50% 48%,rgba(116,68,156,.34),transparent 47%); }
.cinema-static-fallback img { width: min(56vw,490px); max-height: 58svh; object-fit: contain; filter: drop-shadow(0 26px 46px rgba(160,91,213,.28)); animation: mascotFloat 6s ease-in-out infinite; }
.cinema-stage.is-static .cinema-static-fallback img { animation: none; opacity: var(--hero-opacity,1); transform: translateX(var(--hero-x,0vw)) scale(var(--hero-size,1)); transition: opacity .07s linear,transform .07s linear; }
.cinema-css-portal { position: absolute; z-index: 2; inset: 0; display: none; place-items: center; pointer-events: none; opacity: var(--portal-presence,0); transform: scale(var(--portal-zoom,.5)); }
.cinema-css-portal span { position: absolute; width: min(65vw,66svh); height: min(65vw,66svh); border: 7px solid rgba(226,188,255,.8); border-radius: 50%; box-shadow: 0 0 36px rgba(181,120,255,.7),inset 0 0 35px rgba(183,103,255,.38); transform: rotateX(66deg) rotateY(14deg); }
.cinema-css-portal span:nth-child(2) { width: min(48vw,49svh); height: min(48vw,49svh); border-color: rgba(230,188,254,.8); transform: rotateX(66deg) rotateY(-19deg); }
.cinema-css-portal span:nth-child(3) { width: min(34vw,35svh); height: min(34vw,35svh); border-color: rgba(210,255,143,.85); transform: rotateX(66deg) rotateY(14deg); }
.cinema-css-portal span:nth-child(4) { width: min(21vw,22svh); height: min(21vw,22svh); border-color: rgba(246,174,202,.83); transform: rotateX(66deg) rotateY(-19deg); }
.cinema-css-swarm { position: absolute; z-index: 2; inset: 20% 10% 14%; display: none; grid-template-columns: repeat(3,1fr); align-items: center; justify-items: center; pointer-events: none; opacity: var(--swarm-presence,0); transform: scale(calc(.8 + var(--swarm-presence,0) * .35)); -webkit-mask-image: linear-gradient(90deg,transparent 0%,transparent 27%,#000 58%); mask-image: linear-gradient(90deg,transparent 0%,transparent 27%,#000 58%); }
.cinema-css-swarm img { display: block; width: min(18vw,23svh); filter: drop-shadow(0 9px 18px rgba(111,63,150,.3)); }
.cinema-css-swarm img:nth-child(3n+1) { transform: rotate(-17deg) scale(.78); }
.cinema-css-swarm img:nth-child(4n+2) { transform: rotate(18deg) scale(1.15); }
.cinema-css-swarm img:nth-child(5n+3) { transform: rotate(8deg) scale(.62); }
.cinema-stage.is-static .cinema-css-portal { display: grid; }
.cinema-stage.is-static .cinema-css-swarm { display: grid; }
.cinema-stage.is-webgl .cinema-static-fallback { display: none; }
.cinema-stage.is-static .cinema-canvas { display: none; }
.cinema-grain { z-index: 3; opacity: .11; }
.cinema-topline { top: 110px; }
.cinema-copy { bottom: clamp(132px,18vh,220px); max-width: min(770px,78vw); }
.cinema-copy[data-act="0"] { left: 50%; bottom: clamp(138px,20vh,235px); width: 85%; max-width: 820px; text-align: center; transform: translate(-50%,25px); }
.cinema-copy[data-act="0"].is-active { transform: translate(-50%,0); }
.cinema-copy h1.cinema-brand-line { font-size: clamp(6.5rem,18vw,18rem); letter-spacing: -.125em; line-height: .9; text-transform: lowercase; }
.cinema-brand-line span { color: #e8b9ff; }
.cinema-copy[data-act="0"] .cinema-lede { max-width: none; margin-top: 12px; }
.cinema-copy[data-act="1"],.cinema-copy[data-act="2"] { left: clamp(24px,7vw,135px); }
.cinema-phrase { font-size: clamp(3.6rem,7.7vw,9rem); }
.cinema-copy-light { max-width: min(900px,85vw); }
.cinema-copy-light h2 { font-size: clamp(4.8rem,9vw,10rem); }
.cinema-copy-light .cinema-lede { color: #32243c; }
.cinema-stage.is-light { background: #e9e3fa; }
.cinema-stage.is-light .cinema-eyebrow { color: #61458a; }
.cinema-stage.is-light .cinema-topline,.cinema-stage.is-light .cinema-footbar-inner { color: #251831; }
.cinema-stage.is-light .cinema-progress { background: rgba(45,30,61,.33); }
.cinema-stage.is-light .cinema-replay { border-bottom-color: rgba(45,30,61,.33); }
.cinema-stage.is-light .cinema-copy-light h2 { color: #2d213b; }
/* Fade from the pastel middle chapter into a deep cinematic emerald ending.
   Keep controls and copy legible over the actual environment image. */
.cinema-stage.is-emerald { background: #041710; color: #f5ffef; }
.cinema-stage.is-emerald .cinema-copy-light,
.cinema-stage.is-emerald .cinema-copy-light h2 { color: #f6fff0; text-shadow: 0 3px 20px rgba(0,8,7,.82); }
.cinema-stage.is-emerald .cinema-copy-light h2 em { color: #b4f47f; }
.cinema-stage.is-emerald .cinema-copy-light .cinema-lede { color: #ddf7e1; text-shadow: 0 2px 12px rgba(0,11,10,.86); }
.cinema-stage.is-emerald .cinema-copy-light .cinema-eyebrow { color: #d0fb95; }
.cinema-stage.is-emerald .cinema-topline,
.cinema-stage.is-emerald .cinema-footbar-inner,
.cinema-stage.is-emerald .cinema-side-index { color: #e8f9e5; }
.cinema-stage.is-emerald .cinema-side-index b { color: #c9fc8b; }
.cinema-stage.is-emerald .cinema-progress { background: rgba(236,255,228,.30); }
.cinema-stage.is-emerald .cinema-progress span { background: #caff84; }
.cinema-copy-genome { bottom: clamp(126px,18vh,214px); max-width: min(810px,84vw); }
.cinema-copy-genome h2 { font-size: clamp(5rem,9.6vw,11rem); line-height: .86; }
.cinema-copy-genome h2 em { color: #cfff8b; }
.cinema-copy-genome .cinema-lede { max-width: 490px; }
.cinema-copy-genome .button { margin-top: 24px; box-shadow: 0 20px 64px rgba(0,12,10,.26); }
.cinema-finale-disclaimer { margin: 16px 0 0; color: #d8efd6; font-size: 9px; letter-spacing: .12em; }
.cinema-side-index { color: rgba(255,255,255,.73); }
.cinema-side-index b { color: var(--citron); }
.cinema-footbar { bottom: clamp(18px,3vh,36px); }
.cinema-footbar-inner { flex-wrap: wrap; }
.cinema-scroll-hint { white-space: nowrap; }
.cinema-skip { opacity: .8; }
.story-rail { gap: 3px; }
.rail-dot { width: 30px; height: 42px; }
.rail-dot span { width: 5px; height: 5px; }
.rail-line { top: 20px; bottom: 20px; }
.film-dialog { padding: 22px; width: min(94vw,900px); max-height: 92svh; overflow: auto; border: 1px solid rgba(200,162,247,.48); background: #0b0816; color: #f8f1ff; box-shadow: 0 40px 130px rgba(0,0,0,.7); }
.film-dialog::backdrop { background: rgba(3,2,8,.86); backdrop-filter: blur(15px); }
.film-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.film-dialog-head button { border: 1px solid rgba(255,255,255,.35); color: #fff; background: none; padding: 10px 14px; min-height: 44px; letter-spacing: .12em; }
.film-dialog-head button:hover { border-color: var(--citron); color: var(--citron); }
.film-dialog video { width: 100%; aspect-ratio: 1; max-height: 70svh; object-fit: contain; display: block; background: black; }
.film-dialog > p { color: #b5a6c8; margin: 15px 0 0; }
@media (max-width:760px) {
  .cinema-shell { height: 270svh; }
  .cinema-track { height: 170svh; }
  .cinema-lime-field { background-position: center,center,50% center; }
  .cinema-topline { top: 87px; left: 21px; right: 21px; }
  .cinema-topline span:last-child { display: none; }
  .cinema-copy { bottom: clamp(122px,19vh,188px); left: 25px; right: 25px; max-width: calc(100% - 50px); }
  .cinema-copy[data-act="0"] { bottom: 17svh; left: 50%; width: 95%; max-width: none; }
  .cinema-copy h1.cinema-brand-line { font-size: clamp(5.3rem,22vw,8rem); }
  .cinema-copy .cinema-phrase { font-size: clamp(3.2rem,10.3vw,6.4rem); }
  .cinema-copy-light { bottom: clamp(130px,19vh,190px); }
  .cinema-copy-light h2 { font-size: clamp(3.3rem,12vw,5.8rem); }
  .cinema-copy-light .cinema-lede { max-width: 300px; font-size: 12px; }
  .cinema-copy-light .button { min-width: 195px; padding: 13px 16px; margin-top: 14px; }
  .cinema-copy-genome { bottom: clamp(112px,16vh,176px); max-width: calc(100% - 44px); }
  .cinema-copy-genome h2 { font-size: clamp(3.35rem,13.4vw,6.5rem); }
  .cinema-copy-genome .cinema-lede { max-width: 310px; font-size: 13px; }
  .cinema-copy-genome .button { margin-top: 17px; }
  .cinema-finale-disclaimer { font-size: 8px; }
  .cinema-static-fallback img { width: min(83vw,430px); max-height: 50svh; transform: translateY(-6svh); }
  .cinema-css-portal span { width: min(84vw,47svh); height: min(84vw,47svh); }
  .cinema-css-portal span:nth-child(2) { width: min(65vw,36svh); height: min(65vw,36svh); }
  .cinema-css-portal span:nth-child(3) { width: min(46vw,26svh); height: min(46vw,26svh); }
  .cinema-css-portal span:nth-child(4) { width: min(26vw,15svh); height: min(26vw,15svh); }
  .cinema-css-swarm { inset: 22% 3% 22%; -webkit-mask-image: linear-gradient(180deg,#000 0%,#000 40%,transparent 92%); mask-image: linear-gradient(180deg,#000 0%,#000 40%,transparent 92%); }
  .cinema-css-swarm img { width: min(25vw,20svh); }
  .cinema-footbar { left: 20px; right: 20px; bottom: 16px; }
  .cinema-footbar-inner { flex-wrap: nowrap; align-items: center; }
  .cinema-replay { font-size: 8px; margin-left: auto; }
  .cinema-skip { width: auto; font-size: 8px; }
  .cinema-scroll-hint { display: none; }
  .story-rail { right: 5px; }
  .rail-dot { width: 30px; height: 42px; }
  .film-dialog { padding: 12px; }
}
@media (max-width:380px) {
  .cinema-copy h1.cinema-brand-line { font-size: 22vw; }
  .cinema-copy .cinema-phrase { font-size: 10.5vw; }
  .cinema-footbar-inner { font-size: 8px; }
}
@media (prefers-reduced-motion:reduce) {
  .cinema-shell { height: 100svh; }
  .cinema-track,.cinema-canvas,.cinema-grain { display: none; }
  .cinema-stage { position: relative; }
  .cinema-static-fallback,.cinema-stage.is-webgl .cinema-static-fallback { display: grid; }
  .cinema-static-fallback img { animation: none; }
  .story-rail { display: none; }
  .cinema-copy { display: none; }
  .cinema-copy[data-act="0"] { display: block; opacity: 1; visibility: visible; transform: translate(-50%,0); filter: none; }
  .cinema-replay { display: inline-block; }
  .cinema-css-portal,.cinema-css-swarm { display: none !important; }
}

/* V5 / Brand-origin loading sequence. The exact approved mascot and the
   existing Morphit wordmark lead before the visitor enters the 3D world. */
.cinema-genome-fallback { display: none; position: absolute; z-index: 2; inset: 0; pointer-events: none; align-items: start; justify-items: start; opacity: var(--genome-presence,0); }
.cinema-genome-fallback img { width: min(37vw,400px); aspect-ratio: 1; object-fit: contain; margin: 12svh 0 0 7vw; border-radius: 50%; filter: saturate(1.45) contrast(1.08) drop-shadow(0 22px 45px rgba(76,46,109,.18)); -webkit-mask-image: radial-gradient(ellipse at center,#000 29%,transparent 73%); mask-image: radial-gradient(ellipse at center,#000 29%,transparent 73%); }
.cinema-stage.is-static .cinema-genome-fallback { display: grid; }
@media (max-width:760px) {
  .cinema-genome-fallback img { width: min(64vw,310px); margin: 17svh 0 0 4vw; }
}
@media (prefers-reduced-motion:reduce) { .cinema-genome-fallback { display: none !important; } }
.intro.intro-v5 {
  position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column;
  align-items: center; justify-content: center; overflow: hidden; pointer-events: auto;
  opacity: 1; visibility: visible; margin: 0; padding: clamp(20px,4.5vw,68px);
  background: radial-gradient(ellipse 50% 58% at 50% 44%,#33204c 0%,#130b27 57%,#070411 100%);
  color: var(--milk); text-align: center; animation: none !important;
  transition: opacity .75s cubic-bezier(.22,1,.3,1),visibility 0s linear .75s;
}
.intro.intro-v5[hidden] { display: none; }
.intro.intro-v5.is-finished { opacity: 0; visibility: hidden; pointer-events: none; }
.intro-v5::before { content: ""; position: absolute; inset: -35%; pointer-events: none;
  background: conic-gradient(from 140deg at 50% 50%,transparent,rgba(222,172,251,.13),transparent,rgba(219,255,158,.07),transparent);
  opacity: .6; filter: blur(65px); animation: introAtmosphereV5 12s linear infinite; }
.intro-v5-orbit { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.intro-v5-orbit span { display: block; position: absolute; width: min(52vw,58svh); aspect-ratio: 1; border: 1px solid rgba(211,175,253,.09); border-radius: 50%; box-shadow: 0 0 48px rgba(151,95,222,.08); }
.intro-v5-orbit span:nth-child(2) { width: min(71vw,77svh); border-color: rgba(222,175,255,.075); }
.intro-v5-orbit span:nth-child(3) { width: min(93vw,100svh); border-color: rgba(213,246,166,.035); }
.intro-v5-lockup { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 740px; padding-bottom: 12vh; }
.intro-v5 .intro-mascot { width: clamp(164px,24vw,290px); max-width: 63vw; height: auto; filter: drop-shadow(0 26px 50px rgba(172,104,232,.32)); animation: introMascotV5 1.45s cubic-bezier(.16,1,.3,1) both; }
.intro-v5 .intro-mark { display: block; margin-top: clamp(7px,2.5vh,24px); line-height: .88; text-transform: lowercase; font-family: var(--sans); font-weight: 700; font-size: clamp(4.65rem,12.6vw,10.5rem); letter-spacing: -.125em; animation: introWordV5 .95s .33s cubic-bezier(.16,1,.3,1) both; }
.intro-v5 .intro-mark .dot { color: #e9b4ff; }
.intro-v5 .intro-caption { display: block; margin-top: 22px; color: #d5cae6; font-size: 10px; letter-spacing: .27em; animation: introWordV5 .8s .76s both; }
.intro-v5-bottom { position: absolute; left: clamp(22px,5vw,78px); right: clamp(22px,5vw,78px); bottom: max(26px,env(safe-area-inset-bottom,0px)); }
.intro-v5-loader-label { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 17px; color: #eee2ff; font-size: 10px; letter-spacing: .2em; }
.intro-v5-loader-label span:last-child { color: var(--citron); font-size: 14px; }
.intro-v5-loader-track { height: 2px; width: 100%; background: rgba(242,227,255,.17); overflow: hidden; }
.intro-v5-loader-track span { display: block; width: 100%; height: 100%; background: linear-gradient(90deg,#a991e7,#fac1d8,#d8ff9b); transform: scaleX(0); transform-origin: 0 50%; }
.intro-v5-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 18px; color: #aba2c1; letter-spacing: .16em; font-size: 10px; }
.intro-v5-footer button { min-height: 44px; padding: 8px 14px; border: 1px solid rgba(240,221,255,.45); color: #f4e9ff; background: rgba(14,10,31,.35); font: inherit; letter-spacing: inherit; transition: background .2s,border-color .2s; }
.intro-v5-footer button:hover { border-color: var(--citron); background: rgba(188,244,130,.12); }
.intro-v5-footer button:disabled { opacity: .43; cursor: wait; border-color: rgba(240,221,255,.2); }
html.morphit-loading { overflow: hidden; }
html.morphit-loading body { overflow: hidden; }
@keyframes introMascotV5 { from { transform: translateY(40px) scale(.5) rotate(-19deg); opacity: 0; filter: blur(15px); } to { transform: none; opacity: 1; filter: none; } }
@keyframes introWordV5 { from { opacity: 0; transform: translateY(30px); filter: blur(12px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes introAtmosphereV5 { to { transform: rotate(360deg); } }
@media (max-width:760px) {
  .intro-v5-lockup { padding-bottom: 11vh; }
  .intro-v5 .intro-mascot { width: min(55vw,250px); }
  .intro-v5 .intro-mark { font-size: clamp(4rem,17vw,7rem); }
  .intro-v5 .intro-caption { font-size: 8px; letter-spacing: .21em; }
  .intro-v5-loader-label { font-size: 8px; letter-spacing: .12em; }
  .intro-v5-footer { font-size: 8px; letter-spacing: .09em; }
  .intro-v5-footer span:last-child { display: none; }
}
@media (prefers-reduced-motion:reduce) {
  .intro.intro-v5 { transition: none !important; }
  .intro-v5 *, .intro-v5::before { animation: none !important; transition: none !important; }
}

/* Agent story extension: the first 200vh retain the established five beats.
   Two additional full chapters continue the SAME sticky cinematic canvas. */
.cinema-shell { height: 500svh; }
.cinema-track { height: 400svh; }
.cinema-anchor:nth-child(2) { top: 12%; }
.cinema-anchor:nth-child(3) { top: 25%; }
.cinema-anchor:nth-child(4) { top: 37%; }
.cinema-anchor:nth-child(5) { top: 48%; }
.cinema-anchor:nth-child(6) { top: 62%; }
.cinema-anchor:nth-child(7) { top: 86%; }
.cinema-earn-field,.cinema-work-field { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.cinema-earn-field {
  opacity: var(--earn-stage,0);
  background:
    linear-gradient(90deg,rgba(7,4,22,.62) 0%,rgba(7,4,22,.33) 38%,transparent 68%),
    linear-gradient(0deg,rgba(7,4,20,.48),transparent 40%),
    url('./assets/morphit-earn-scene.webp') center center / cover no-repeat,
    #100d28;
}
.cinema-work-field {
  opacity: var(--work-stage,0);
  background:
    linear-gradient(90deg,rgba(5,10,28,.72) 0%,rgba(5,10,28,.42) 40%,transparent 76%),
    linear-gradient(0deg,rgba(5,9,25,.52),transparent 40%),
    url('./assets/morphit-work-scene.webp') center center / cover no-repeat,
    #0a1029;
}
.cinema-earn-field::after,.cinema-work-field::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 130px rgba(4,2,18,.32); }
.cinema-stage.is-earn { background: #17102d; color: #fff8fc; }
.cinema-stage.is-work { background: #0a112c; color: #fff8fc; }
.cinema-copy-earn,.cinema-copy-work { max-width: min(790px,62vw); bottom: clamp(150px,21vh,250px); }
.cinema-copy-earn h2,.cinema-copy-work h2 { font-size: clamp(4.6rem,8.2vw,9.4rem); line-height: .87; text-shadow: 0 12px 50px rgba(3,2,15,.75); }
.cinema-copy-earn h2 em { color: #d9ff9a; }
.cinema-copy-work h2 em { color: #ffbe86; }
.cinema-copy-earn .cinema-eyebrow { color: #caff94; }
.cinema-copy-work .cinema-eyebrow { color: #ffc99b; }
.cinema-copy-earn .cinema-lede,.cinema-copy-work .cinema-lede { max-width: 490px; color: #f2eaf9; text-shadow: 0 3px 17px rgba(2,2,11,.9); }
.cinema-scene-label { margin: 18px 0 0; font-size: 9px; letter-spacing: .15em; color: #c2ddad; }
.cinema-copy-work .button { margin-top: 24px; background: #ebfcbe; color: #11182a; border-color: #ebfcbe; box-shadow: 0 18px 60px rgba(1,5,20,.38); }
.cinema-copy-work .button:hover { background: #fff7e9; border-color: #fff7e9; }
.cinema-copy-work .cinema-finale-disclaimer { color: #dfd5cf; }
.cinema-stage.is-earn .cinema-topline,.cinema-stage.is-work .cinema-topline,
.cinema-stage.is-earn .cinema-footbar-inner,.cinema-stage.is-work .cinema-footbar-inner,
.cinema-stage.is-earn .cinema-side-index,.cinema-stage.is-work .cinema-side-index { color: #f5ecff; }
.cinema-stage.is-earn .cinema-side-index b { color: #d9ff9a; }
.cinema-stage.is-work .cinema-side-index b { color: #ffc79f; }
.cinema-stage.is-earn .cinema-progress span { background: #d6ff9e; }
.cinema-stage.is-work .cinema-progress span { background: #ffb988; }

/* Recognizable hand-drawn 2D counterparts remain when 3D is unavailable. */
.cinema-earn-fallback,.cinema-work-fallback { display: none; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.cinema-stage.is-static .cinema-earn-fallback,.cinema-stage.is-static .cinema-work-fallback { display: block; }
.cinema-earn-fallback { opacity: var(--earn-stage,0); }
.cinema-work-fallback { opacity: var(--work-stage,0); }
.fallback-market-arrow { position: absolute; right: 12%; top: 12%; color: #d1ff81; font: 700 clamp(10rem,24vw,27rem)/.7 var(--sans); transform: rotate(-5deg); filter: drop-shadow(0 0 30px rgba(190,255,114,.56)); opacity: .83; }
.fallback-market-desk { position: absolute; right: 13%; top: 42%; width: min(40vw,580px); height: min(28vw,370px); perspective: 600px; }
.fallback-screen { position: absolute; width: 41%; height: 42%; background: linear-gradient(135deg,#172c43,#0a132b); border: 8px solid #d8d1e5; box-shadow: 0 0 0 2px #312744,0 14px 35px rgba(2,2,15,.8); border-radius: 10px; transform: rotate(-5deg); }
.fallback-screen::after { content: ''; display: block; margin: 16% 12%; height: 50%; background: linear-gradient(145deg,transparent 26%,#bfff8e 28%,#bfff8e 33%,transparent 35%) 0 0 / 65px 50px repeat-x; }
.fallback-screen.screen-two { left: 46%; top: -12%; transform: rotate(8deg); }
.fallback-desk-top { position: absolute; left: -7%; right: -6%; height: 12%; top: 50%; background: #c5a2ab; border-radius: 9px; box-shadow: 0 12px 0 #75576b; }
.fallback-desk-leg { position: absolute; left: 7%; right: 8%; top: 60%; height: 40%; border-left: 19px solid #62405b; border-right: 19px solid #62405b; }
.cinema-earn-fallback > img { position: absolute; right: 29%; top: 29%; width: min(15vw,210px); filter: drop-shadow(0 16px 30px rgba(68,29,89,.62)); }
.fallback-bonsai { position: absolute; right: 13%; top: 39%; color: #b4ff9f; font: 700 clamp(4rem,8vw,10rem)/1 var(--display); text-shadow: 0 15px 18px rgba(9,60,20,.8); }
.fallback-bonsai::after { content: ''; display: block; width: 38%; height: 23%; background: #b47b68; margin: -.14em auto 0; border-radius: 3px 3px 19px 19px; }
.fallback-bricks { position: absolute; right: 9%; top: 27%; width: min(45vw,640px); height: 46%; transform: skewY(-4deg); border: 9px solid #a36c63; border-radius: 4px; background: repeating-linear-gradient(0deg,transparent 0 36px,#493648 37px 41px),repeating-linear-gradient(90deg,#bb8b7f 0 92px,#674857 94px 99px); box-shadow: 20px 24px 36px rgba(2,3,17,.62); }
.fallback-worker { position: absolute; right: 32%; top: 27%; width: min(19vw,240px); }
.fallback-worker img { display: block; width: 100%; filter: drop-shadow(0 17px 22px rgba(0,0,0,.45)); }
.fallback-hardhat { position: absolute; display: block; left: 26%; right: 23%; top: -1%; height: 19%; border-radius: 90% 90% 12% 12%; background: #ffd15f; box-shadow: inset 0 -6px #d78a43,0 6px 4px rgba(56,30,24,.35); }
.fallback-tool { position: absolute; right: 17%; top: 20%; color: #ffcf82; font-size: clamp(5rem,12vw,11rem); text-shadow: 0 0 40px #ffc46a; }

@media (max-width:760px) {
  .cinema-shell { height: 440svh; }
  .cinema-track { height: 340svh; }
  .cinema-earn-field { background-position: center,center,62% center; }
  .cinema-work-field { background-position: center,center,63% center; }
  .cinema-copy-earn,.cinema-copy-work { max-width: calc(100% - 50px); bottom: clamp(126px,18vh,178px); }
  .cinema-copy-earn h2,.cinema-copy-work h2 { font-size: clamp(2.7rem,9.2vw,5.2rem); line-height: .93; letter-spacing: -.092em; }
  .cinema-copy-earn .cinema-lede,.cinema-copy-work .cinema-lede { max-width: 315px; font-size: 13px; line-height: 1.48; }
  .cinema-copy-work .button { margin-top: 14px; padding: 12px 15px; }
  .cinema-scene-label { font-size: 7px; max-width: 240px; }
  .fallback-market-arrow { right: 4%; top: 15%; font-size: 43vw; }
  .fallback-market-desk { right: 3%; top: 35%; width: 73vw; height: 38vw; }
  .cinema-earn-fallback > img { width: 29vw; right: 34%; top: 23%; }
  .fallback-bonsai { right: 5%; top: 33%; font-size: 15vw; }
  .fallback-bricks { width: 79vw; right: -6%; top: 20%; height: 36%; }
  .fallback-worker { width: 36vw; right: 40%; top: 19%; }
  .fallback-tool { right: 3%; top: 18%; font-size: 26vw; }
}
@media (prefers-reduced-motion:reduce) {
  .cinema-shell { height: 500svh; }
  .cinema-track { display: block; height: 400svh; }
  .cinema-stage { position: sticky; }
  .cinema-copy { display: block; transition: none !important; }
  .cinema-copy[data-act="0"] { opacity: 0; visibility: hidden; }
  .cinema-copy[data-act="0"].is-active { opacity: 1; visibility: visible; }
  .cinema-stage.is-static .cinema-css-portal { display: grid !important; }
  .cinema-stage.is-static .cinema-css-swarm { display: grid !important; }
  .cinema-earn-fallback,.cinema-work-fallback { transition: none; }
}
@media (prefers-reduced-motion:reduce) and (max-width:760px) {
  .cinema-shell { height: 440svh; }
  .cinema-track { height: 340svh; }
}
@media (max-width:480px) {
  .intro.intro-v5 { padding: 12px 18px 86px; }
  .intro-v5-lockup { padding-bottom: 5vh; }
  .intro-v5 .intro-mascot { width: min(49vw,205px); max-height: 31svh; object-fit: contain; }
  .intro-v5 .intro-mark { font-size: clamp(3.5rem,16vw,5.7rem); }
  .intro-v5 .intro-caption { font-size: 8px; max-width: 290px; line-height: 1.5; }
  .intro-v5-bottom { left: 18px; right: 18px; bottom: max(12px,env(safe-area-inset-bottom,0px)); }
  .intro-v5-loader-label { align-items: flex-start; gap: 8px; line-height: 1.5; }
  .intro-v5-loader-label span:first-child { max-width: 75%; }
  .intro-v5-footer { gap: 10px; flex-wrap: wrap; align-items: center; }
  .intro-v5-footer #intro-status { width: 40%; max-width: 160px; line-height: 1.5; overflow-wrap: break-word; }
  .intro-v5-footer button { min-width: 130px; min-height: 44px; margin-left: auto; white-space: nowrap; }
}
@media (max-width:480px) and (max-height:630px) {
  .intro-v5 .intro-mascot { width: min(40vw,145px); max-height: 24svh; }
  .intro-v5 .intro-mark { margin-top: 8px; font-size: 15vw; }
  .intro-v5 .intro-caption { margin-top: 12px; }
  .intro-v5-loader-label { margin-bottom: 9px; }
  .intro-v5-footer { padding-top: 12px; }
}
/* The non-WebGL edition now shares ONE floating Morphit rig for Genome,
   Earn and Work. Clean high-fidelity prop plates enter/exit behind it; the
   helmet is attached to that same rig and flies on independently. */
.cinema-stage.is-static .cinema-static-fallback { z-index: 4; }
.cinema-morphit-rig {
  position: relative; width: min(56vw,490px); display: grid; place-items: center;
  opacity: var(--hero-opacity,1);
  transform: translate3d(var(--hero-x,0vw),var(--hero-y,0vh),0) scale(var(--hero-size,1));
  will-change: transform,opacity;
}
.cinema-static-fallback .cinema-morphit-rig > img {
  display: block; width: 100%; height: auto; max-height: 58svh;
  object-fit: contain; filter: drop-shadow(0 26px 46px rgba(160,91,213,.28));
}
.cinema-stage.is-static .cinema-morphit-rig > img {
  opacity: 1; transform: none; animation: none;
}
.cinema-floating-hardhat {
  position: absolute; z-index: 1; left: 33%; top: 7%;
  width: 35%; height: 21%; border-radius: 92% 92% 12% 12%;
  background: linear-gradient(110deg,#ffad42 5%,#ffdc74 45%,#ffa82f 90%);
  border: 2px solid #a36631;
  box-shadow: inset 0 -8px #d78835, inset 13px 0 12px rgba(255,255,255,.22),0 8px 9px rgba(22,11,20,.36);
  opacity: var(--hat-opacity,0);
  transform: translate(var(--hat-x,-135%),var(--hat-y,-260%)) rotate(var(--hat-rotation,-28deg));
  transform-origin: center bottom;
  pointer-events: none;
}
.cinema-floating-hardhat::after {
  content: ''; position: absolute; bottom: -6%; left: -14%; right: -14%; height: 17%;
  background: linear-gradient(#ffe490,#e9a444); border: 2px solid #965b2b; border-radius: 45%;
  box-shadow: 0 5px 5px rgba(28,12,8,.3);
}
.cinema-stage.is-static .cinema-earn-fallback {
  background: linear-gradient(90deg,rgba(6,4,20,.35),rgba(6,4,20,.02) 58%),url('./assets/morphit-earn-props-v3.webp') center / cover no-repeat;
  opacity: var(--earn-props,0);
  transform: translate3d(var(--earn-prop-x,0vw),var(--earn-prop-y,0vh),0);
  will-change: transform,opacity;
}
.cinema-stage.is-static .cinema-work-fallback {
  background: linear-gradient(90deg,rgba(3,8,25,.37),rgba(3,8,25,.02) 58%),url('./assets/morphit-work-props-v2.webp') center / cover no-repeat;
  opacity: var(--work-props,0);
  transform: translate3d(var(--work-prop-x,0vw),var(--work-prop-y,0vh),0);
  will-change: transform,opacity;
}
.cinema-stage.is-static .cinema-earn-fallback > *,
.cinema-stage.is-static .cinema-work-fallback > * { display: none; }
@media (max-width:760px) {
  .cinema-morphit-rig { width: min(83vw,430px); }
  .cinema-static-fallback .cinema-morphit-rig > img { max-height: 50svh; }
  .cinema-floating-hardhat { border-width: 1px; }
  .cinema-stage.is-static .cinema-earn-fallback {
    background-image: linear-gradient(0deg,rgba(6,4,20,.56),transparent 56%),url('./assets/morphit-earn-props-v3-mobile.webp');
    background-position: center,center;
    background-size: cover,cover;
  }
  .cinema-stage.is-static .cinema-work-fallback { background-position: center, 72% center; }
}
@media (prefers-reduced-motion:reduce) {
  .cinema-morphit-rig,.cinema-earn-fallback,.cinema-work-fallback { will-change: auto; }
}

/* 08 / Token genesis. The original seven chapters retain their physical
   scroll distances; this last full viewport is reserved for liftoff. */
.cinema-shell { height: 600svh; }
.cinema-track { height: 500svh; }
.cinema-anchor:nth-child(2) { top: 9.6%; }
.cinema-anchor:nth-child(3) { top: 20%; }
.cinema-anchor:nth-child(4) { top: 29.6%; }
.cinema-anchor:nth-child(5) { top: 38.4%; }
.cinema-anchor:nth-child(6) { top: 49.6%; }
.cinema-anchor:nth-child(7) { top: 68.8%; }
.cinema-anchor:nth-child(8) { top: 94.4%; }
.cinema-launch-field {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  opacity: var(--launch-stage,0);
  background:
    linear-gradient(90deg,rgba(5,5,22,.63),rgba(5,5,22,.24) 48%,transparent 78%),
    linear-gradient(0deg,rgba(7,5,23,.48),transparent 50%),
    url('./assets/morphit-launch-scene.webp') 58% center / cover no-repeat,
    #080723;
}
.cinema-launch-field::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 120px rgba(9,4,38,.35); }
.cinema-stage.is-launch { background: #10102b; color: #fff8fc; }
.cinema-stage.is-launch .cinema-topline,
.cinema-stage.is-launch .cinema-footbar-inner,
.cinema-stage.is-launch .cinema-side-index { color: #f9f0ff; }
.cinema-stage.is-launch .cinema-side-index b { color: #ccfda8; }
.cinema-stage.is-launch .cinema-progress span { background: #c5ffa1; }
.cinema-copy-launch { max-width: min(875px,68vw); bottom: clamp(145px,21vh,260px); }
.cinema-copy-launch h2 { font-size: clamp(4rem,7.35vw,8.8rem); line-height: .92; letter-spacing: -.085em; text-shadow: 0 12px 60px rgba(2,2,15,.75); }
.cinema-copy-launch h2 em { color: #d2ffa2; }
.cinema-copy-launch .cinema-eyebrow { color: #cef9a4; }
.cinema-copy-launch .cinema-lede { color: #f7eaff; max-width: 490px; text-shadow: 0 3px 20px rgba(5,3,23,.9); }
.cinema-copy-launch .button { margin-top: 24px; background: #d5ffa2; color: #132024; border-color: #d5ffa2; box-shadow: 0 16px 46px rgba(5,2,22,.5); }
.cinema-copy-launch .button:hover { background: #fff6dc; border-color: #fff6dc; }
.cinema-copy-launch .cinema-finale-disclaimer { color: #d8c9e7; }
.cinema-launch-fallback { display: none; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: var(--launch-props,0); }
.cinema-stage.is-static .cinema-launch-fallback {
  display: block;
  background: linear-gradient(90deg,rgba(8,6,29,.22),transparent 62%),url('./assets/morphit-launch-fallback-desktop.webp') center / cover no-repeat;
  transform: translateY(var(--launch-prop-y,0vh));
  will-change: transform,opacity;
}
@media (max-width:760px) {
  .cinema-shell { height: 540svh; }
  .cinema-track { height: 440svh; }
  .cinema-anchor:nth-child(2) { top: 9.27%; }
  .cinema-anchor:nth-child(3) { top: 19.32%; }
  .cinema-anchor:nth-child(4) { top: 28.59%; }
  .cinema-anchor:nth-child(5) { top: 37.09%; }
  .cinema-anchor:nth-child(6) { top: 47.91%; }
  .cinema-anchor:nth-child(7) { top: 66.45%; }
  .cinema-anchor:nth-child(8) { top: 94%; }
  .cinema-launch-field { background-position: center,center,65% center; }
  .cinema-copy-launch { max-width: calc(100% - 48px); bottom: clamp(126px,18vh,180px); }
  .cinema-copy-launch h2 { font-size: clamp(2.45rem,8.7vw,4.7rem); line-height: .95; letter-spacing: -.09em; }
  .cinema-copy-launch .cinema-lede { max-width: 335px; font-size: 13px; line-height: 1.5; }
  .cinema-copy-launch .button { margin-top: 13px; padding: 11px 15px; }
  .cinema-copy-launch .cinema-finale-disclaimer { margin-top: 12px; font-size: 8px; }
  .cinema-stage.is-static .cinema-launch-fallback {
    background: linear-gradient(0deg,rgba(6,5,23,.54),transparent 62%),url('./assets/morphit-launch-fallback-mobile.webp') center / cover no-repeat;
  }
}
@media (prefers-reduced-motion:reduce) {
  .cinema-shell { height: 600svh; }
  .cinema-track { display: block; height: 500svh; }
  .cinema-stage { position: sticky; }
  .cinema-stage.is-static .cinema-launch-fallback { will-change: auto; }
}
@media (max-width:760px) and (prefers-reduced-motion:reduce) {
  .cinema-shell { height: 540svh; }
  .cinema-track { height: 440svh; }
}

/* 09 / JOIN THE PARTY — an extra final viewport, AFTER the untouched launch
   distance. All five authored full-rig dancers appear on the same floor. */
@media (min-width: 761px) and (max-width: 1260px) {
  .site-links { gap: clamp(9px, 1.45vw, 18px); }
  .site-links a { font-size: 10px; letter-spacing: .065em; }
}
@media (min-width: 761px) and (max-width: 1060px) {
  .site-links { display: none; }
}
.cinema-shell { height: 700svh; }
.cinema-track { height: 600svh; }
.cinema-anchor:nth-child(2) { top: 8%; }
.cinema-anchor:nth-child(3) { top: 16.67%; }
.cinema-anchor:nth-child(4) { top: 24.67%; }
.cinema-anchor:nth-child(5) { top: 32%; }
.cinema-anchor:nth-child(6) { top: 41.33%; }
.cinema-anchor:nth-child(7) { top: 57.33%; }
.cinema-anchor:nth-child(8) { top: 78.67%; }
.cinema-anchor:nth-child(9) { top: 94.67%; }
.cinema-party-field {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: var(--party-stage,0);
  background:
    linear-gradient(90deg,rgba(8,5,29,.81),rgba(15,7,40,.43) 37%,transparent 77%),
    linear-gradient(0deg,rgba(7,4,24,.60),transparent 58%),
    url('./assets/morphit-party-scene.webp') center center / cover no-repeat,
    #160b35;
}
.cinema-party-field::after {
  content: ''; position: absolute; inset: 0;
  box-shadow: inset 0 0 140px rgba(5,2,22,.42);
  background: radial-gradient(circle at 60% 43%,rgba(184,251,230,.12),transparent 38%);
}
.cinema-stage.is-party { color: #fff9ff; background: #130925; }
.cinema-stage.is-party .cinema-topline,
.cinema-stage.is-party .cinema-footbar-inner,
.cinema-stage.is-party .cinema-side-index { color: #fff4ff; }
.cinema-stage.is-party .cinema-side-index b { color: #bbffdb; }
.cinema-stage.is-party .cinema-progress span { background: #b7ffe0; }
.cinema-copy-party { max-width: min(670px,53vw); bottom: clamp(145px,19vh,235px); }
.cinema-copy-party h2 {
  font-size: clamp(5.3rem,9.3vw,11rem); line-height: .84;
  letter-spacing: -.098em;
  text-shadow: 0 10px 43px rgba(6,2,25,.90);
}
.cinema-copy-party h2 em { color: #bfffe1; }
.cinema-copy-party .cinema-eyebrow { color: #c4fce1; }
.cinema-copy-party .cinema-lede {
  max-width: 460px; color: #fff4ff;
  text-shadow: 0 3px 17px rgba(5,2,20,.94);
}
.cinema-copy-party .cinema-scene-label { color: #bafce4; }
.cinema-copy-party .button {
  margin-top: 21px; background: #c0ffe1; color: #131c29; border-color: #c0ffe1;
  box-shadow: 0 18px 55px rgba(5,2,22,.43);
}
.cinema-copy-party .button:hover { background: #ffebf7; border-color: #ffebf7; }
.cinema-copy-party .cinema-finale-disclaimer { color: #f1e3ff; }

/* The low-data / reduced-motion version keeps all five forms on the floor,
   using existing approved illustrations and a real authored ballroom plate. */
.cinema-party-fallback {
  display: none; position: absolute; inset: 0; z-index: 3; overflow: hidden;
  pointer-events: none; opacity: var(--party-stage,0);
}
.cinema-stage.is-static .cinema-party-fallback { display: block; }
.party-2d-floor {
  position: absolute; left: 9%; right: 9%; bottom: 13%; height: 32%;
  border-radius: 50%; transform: perspective(650px) rotateX(66deg);
  background: radial-gradient(ellipse,rgba(203,164,255,.40),rgba(158,255,214,.2) 40%,transparent 73%);
  filter: blur(10px); opacity: .65;
}
.party-2d-crew { position: absolute; inset: 0; opacity: var(--party-dancers,0); }
.party-2d-crew img {
  position: absolute; top: 42%; width: clamp(140px,14.5vw,215px); height: auto;
  object-fit: contain; filter: drop-shadow(0 22px 26px rgba(32,10,64,.72));
  transform-origin: center bottom;
  animation: morphitPartyStep 1.75s ease-in-out infinite alternate;
}
.party-2d-crew img:nth-child(1) { left: 44%; top: 48%; animation-delay: -.70s; }
.party-2d-crew img:nth-child(2) { left: 53%; top: 44%; animation-delay: -1.13s; }
.party-2d-crew img:nth-child(3) { left: 62%; top: 39%; width: clamp(185px,19vw,275px); animation-delay: -.17s; }
.party-2d-crew img:nth-child(4) { left: 73%; top: 45%; animation-delay: -.96s; }
.party-2d-crew img:nth-child(5) { left: 82%; top: 48%; animation-delay: -.43s; }
@keyframes morphitPartyStep {
  from { transform: translateY(3%) rotate(-7deg) scale(.95); }
  to { transform: translateY(-10%) rotate(8deg) scale(1.03); }
}

@media (max-width:760px) {
  .cinema-shell { height: 640svh; }
  .cinema-track { height: 540svh; }
  .cinema-anchor:nth-child(2) { top: 7.56%; }
  .cinema-anchor:nth-child(3) { top: 15.74%; }
  .cinema-anchor:nth-child(4) { top: 23.3%; }
  .cinema-anchor:nth-child(5) { top: 30.22%; }
  .cinema-anchor:nth-child(6) { top: 39.04%; }
  .cinema-anchor:nth-child(7) { top: 54.14%; }
  .cinema-anchor:nth-child(8) { top: 76.6%; }
  .cinema-anchor:nth-child(9) { top: 94.07%; }
  .cinema-party-field { background-position: center,center,61% center; }
  .cinema-copy-party { max-width: calc(100% - 48px); bottom: clamp(115px,16vh,175px); }
  .cinema-copy-party h2 { font-size: clamp(3.25rem,12.5vw,6rem); line-height: .91; }
  .cinema-copy-party .cinema-lede { max-width: 310px; font-size: 13px; line-height: 1.5; }
  .cinema-copy-party .button { margin-top: 12px; padding: 11px 15px; }
  .cinema-copy-party .cinema-scene-label { font-size: 7px; }
  .cinema-copy-party .cinema-finale-disclaimer { font-size: 8px; margin-top: 11px; }
  /* Keep the five-character lineup above the copy, even in low-data mode.
     Their translucent contact pool follows them into the upper half. */
  .party-2d-floor { bottom: 46%; height: 21%; left: 1%; right: 1%; opacity: .42; }
  .party-2d-crew img { width: 26vw; filter: drop-shadow(0 8px 12px rgba(32,10,64,.49)); }
  .party-2d-crew img:nth-child(1) { left: -1%; top: 27%; }
  .party-2d-crew img:nth-child(2) { left: 17%; top: 24%; }
  .party-2d-crew img:nth-child(3) { left: 35%; top: 21%; width: 31vw; }
  .party-2d-crew img:nth-child(4) { left: 60%; top: 24%; }
  .party-2d-crew img:nth-child(5) { left: 80%; top: 27%; }
}
@media (prefers-reduced-motion:reduce) {
  .cinema-shell { height: 700svh; }
  .cinema-track { height: 600svh; }
  .party-2d-crew img { animation: none; }
}
@media (max-width:760px) and (prefers-reduced-motion:reduce) {
  .cinema-shell { height: 640svh; }
  .cinema-track { height: 540svh; }
}

/* CINEMATIC SCROLL PACING — longer chapters, gentler editorial handoffs. */
@media (prefers-reduced-motion:no-preference) {
  .cinema-shell { height: 820svh; }
  .cinema-track { height: 720svh; }
  .cinema-copy {
    transition:
      opacity .74s cubic-bezier(.22,1,.36,1),
      transform .88s cubic-bezier(.22,1,.36,1),
      filter .82s ease,
      visibility 0s linear .74s;
  }
}
@media (max-width:760px) and (prefers-reduced-motion:no-preference) {
  .cinema-shell { height: 750svh; }
  .cinema-track { height: 650svh; }
}