/* cinematic layer: opening scene, cursor, decode, glyphs, statement */
.scene{background:#000}
.tunnel{position:absolute;inset:0;width:100%;height:100%;display:block}
.opening{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:0 20px;text-align:center;font:italic 400 clamp(26px,4.6vw,60px)/1.1 var(--serif);color:var(--paper);z-index:1;transition:opacity .5s,transform 1.2s cubic-bezier(.6,0,.2,1)}
.opening span{display:inline-block;overflow:hidden;white-space:nowrap;width:0;border-right:2px solid var(--yellow);animation:type 1.3s .3s steps(31) forwards,caret .7s step-end infinite}
@keyframes caret{50%{border-color:transparent}}
.scene.go .opening{opacity:0;transform:scale(1.6)}
.iris{position:absolute;inset:0;clip-path:circle(0% at 50% 50%);will-change:clip-path}
.scene.open .iris{clip-path:none}
.scene::after{opacity:0;transition:opacity 1s}
.scene.open::after{opacity:1}
.scene .hero-text h1,.scene .hero-text p,.scene .hero-cta{opacity:0;transform:translateY(40px);transition:opacity .9s,transform 1.1s cubic-bezier(.2,.8,.2,1)}
.scene.open .hero-text h1,.scene.open .hero-text p,.scene.open .hero-cta{opacity:1;transform:none}
.scene.open .hero-text p{transition-delay:.18s}
.scene.open .hero-cta{transition-delay:.34s}
.scene .hero-text h1{font-size:clamp(50px,9vw,148px);line-height:.92}
.scene .hero-text h1 em{color:var(--yellow)}
body.intro-on .nav{opacity:0;pointer-events:none}
.nav{transition:background .3s,color .3s,box-shadow .3s,opacity .8s}

/* reading progress */
.progress{position:fixed;left:0;top:0;height:3px;width:100%;background:#fff;transform:scaleX(0);transform-origin:left;z-index:120;mix-blend-mode:difference}

/* cursor */
.cursor{position:fixed;left:0;top:0;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;border:1.5px solid #fff;mix-blend-mode:difference;pointer-events:none;z-index:300;opacity:0;transition:width .25s,height .25s,margin .25s,background .25s,opacity .3s}
.cursor.on{opacity:1}
.cursor.big{width:84px;height:84px;margin:-42px 0 0 -42px;background:#fff}

/* stronger type */
h2{font-size:clamp(42px,7.2vw,112px);letter-spacing:-.04em}
.pitch{font-size:clamp(30px,4.4vw,66px)}
.what{padding-bottom:clamp(60px,8vw,110px)}
.answers p{font-size:clamp(20px,1.9vw,27px)}
.answers div{position:relative;border-top:0}
.answers div::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.6,0,.2,1)}
.fall.in~.answers div::before{transform:scaleX(1)}
.fall.in~.answers div:nth-child(2)::before{transition-delay:.25s}
.fall.in~.answers div:nth-child(3)::before{transition-delay:.5s}

/* system wheel in depth */
.wheel{perspective:900px}
.wheel .disc{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .3s ease-out}
.wheel .pulse{stroke:var(--ink);stroke-width:.9;stroke-dasharray:4 96;animation:pulseLine 2.6s linear infinite}
@keyframes pulseLine{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.wheel a{box-shadow:0 0 0 1.5px var(--ink),0 10px 24px rgba(23,24,21,.18)}

/* blueprint glyph in each panel */
.glyph{position:relative;width:clamp(120px,13vw,190px);height:auto;margin-bottom:auto;overflow:visible}
.glyph *{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s cubic-bezier(.6,0,.2,1)}
.sol.in .glyph *{stroke-dashoffset:0}
.sol.in .glyph *:nth-child(2){transition-delay:.2s}.sol.in .glyph *:nth-child(3){transition-delay:.4s}.sol.in .glyph *:nth-child(4){transition-delay:.6s}.sol.in .glyph *:nth-child(n+5){transition-delay:.8s}
.sol.in .glyph{animation:float 7s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px) rotate(3deg)}}
.sol aside em{opacity:.1}

/* statement */
.statement{position:relative;background:#000;color:var(--paper);overflow:hidden;padding-bottom:0;border-radius:28px 28px 0 0;margin-top:-28px}
.statement .wrap{position:relative;z-index:1}
.statement h2 em{color:var(--yellow)}
.statement p{margin-top:28px;max-width:50ch;font-size:clamp(18px,1.6vw,22px);color:#c9c8c0}
.marquee{position:relative;z-index:1;margin-top:clamp(60px,9vw,130px);padding:18px 0;border-top:1px solid rgba(242,240,233,.25);overflow:hidden;white-space:nowrap}
.marquee div{display:inline-block;font:700 clamp(44px,8vw,120px)/1 var(--head);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.2px var(--paper);animation:slide 38s linear infinite}
.marquee i{font-style:normal;color:var(--yellow);-webkit-text-stroke:0;font-size:.5em;vertical-align:middle;margin:0 .3em}
@keyframes slide{to{transform:translateX(-50%)}}
.ventures{position:relative;border-radius:28px 28px 0 0;margin-top:-28px}

/* tiles and buttons with more life */
.tile{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.tile:hover{transform:translateY(-6px)}
.btn{position:relative;overflow:hidden}

@media (max-width:640px){
  .scene .hero-text h1{font-size:clamp(46px,14vw,70px)}
  .glyph{width:110px;margin:0 0 6px}
}

/* second pass: depth, index, rail, fireflies, play */
::selection{background:var(--yellow);color:var(--ink)}
body::after{content:"";position:fixed;inset:0;z-index:110;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
.fireflies{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen;pointer-events:none;opacity:0;transition:opacity 2s 1s}
.scene.open .fireflies{opacity:1}
.iris{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.btn{transition:transform .35s cubic-bezier(.2,.8,.2,1),background .2s,color .2s}

.index{list-style:none;margin:clamp(48px,7vw,100px) 0 0;padding:0;border-bottom:1.5px solid var(--ink)}
.index a{position:relative;display:grid;grid-template-columns:56px minmax(0,1.1fr) minmax(0,.7fr) minmax(0,2fr);gap:20px;align-items:baseline;padding:22px 16px 22px 0;border-top:1.5px solid var(--ink);text-decoration:none;transition:padding .45s cubic-bezier(.2,.8,.2,1),color .3s}
.index a::before{content:"";position:absolute;inset:0;background:var(--bg);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.6,0,.2,1);z-index:-1}
.index{position:relative;z-index:0}
.index a:hover,.index a:focus-visible{padding-left:22px}
.index a:hover::before,.index a:focus-visible::before{transform:scaleX(1)}
.index a.dark:hover,.index a.dark:focus-visible{color:var(--paper)}
.index span:first-child{font:500 13px/1 var(--sans);color:var(--grey)}
.index a.dark:hover span:first-child{color:var(--paper)}
.index strong{font:700 clamp(26px,3.2vw,46px)/1 var(--head);letter-spacing:-.04em}
.index em{font:italic 400 clamp(20px,2vw,28px)/1 var(--serif)}
.index span:last-child{font-size:17px;line-height:1.35}

.rail{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:45;display:none;flex-direction:column;gap:4px;mix-blend-mode:difference;opacity:0;pointer-events:none;transition:opacity .4s}
.rail.on{opacity:1;pointer-events:auto}
.rail a{position:relative;display:block;width:26px;height:22px}
.rail a::before{content:"";position:absolute;right:6px;top:8px;width:6px;height:6px;border-radius:50%;background:#fff;transition:transform .3s}
.rail a.now::before{transform:scale(2.2)}
.rail span{position:absolute;right:30px;top:2px;font:500 13px/18px var(--sans);color:#fff;white-space:nowrap;opacity:0;transform:translateX(8px);transition:opacity .3s,transform .3s}
.rail a.now span,.rail a:hover span{opacity:1;transform:none}
@media (min-width:960px){.rail{display:flex}}

.sol{transform-origin:50% 0;will-change:transform}
.pitch .wd{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.pitch .wd span{display:inline-block;transform:translateY(110%);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.sol.in .pitch .wd span{transform:none}
.fall .l.hop{animation:hop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes hop{0%{transform:none}40%{transform:translateY(-.45em) rotate(var(--r))}100%{transform:none}}

.play{position:fixed;left:18px;bottom:18px;z-index:46;height:52px;min-width:52px;padding:0 15px;border-radius:26px;background:var(--ink);color:var(--yellow);display:inline-flex;align-items:center;gap:0;text-decoration:none;font:700 15px/1 var(--head);box-shadow:0 8px 24px rgba(0,0,0,.25);transition:gap .3s,padding .3s,transform .3s,opacity .6s}
.play svg{width:22px;height:16px;flex:none}
.play span{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .35s}
.play:hover,.play:focus-visible{gap:10px;padding:0 20px;transform:translateY(-3px)}
.play:hover span,.play:focus-visible span{max-width:60px}
.play:hover svg{animation:wiggle .5s steps(2) infinite}
@keyframes wiggle{50%{transform:translateY(-3px)}}
body.intro-on .play{opacity:0;pointer-events:none}

@media (max-width:700px){
  .index a{grid-template-columns:34px minmax(0,1fr) auto;gap:6px 12px;padding:18px 0}
  .index span:last-child{grid-column:2/-1}
  .index em{font-size:18px}
}