@property --h-w1{syntax:"<number>";inherits:true;initial-value:1}@property --h-w2{syntax:"<number>";inherits:true;initial-value:1}@property --h-w3{syntax:"<number>";inherits:true;initial-value:1}@property --h-intro{syntax:"<number>";inherits:true;initial-value:1}@property --h-hint{syntax:"<number>";inherits:true;initial-value:0}@property --h-ttl{syntax:"<number>";inherits:true;initial-value:0}@property --h-steps{syntax:"<number>";inherits:true;initial-value:1}@property --h-complete{syntax:"<number>";inherits:true;initial-value:0}@property --h-zoom{syntax:"<number>";inherits:true;initial-value:0}@property --h-black{syntax:"<number>";inherits:true;initial-value:0}@property --h-hud{syntax:"<number>";inherits:true;initial-value:0}.hero{background:#050505;position:relative}.hero-sticky{position:relative;overflow:hidden}.hero-stage{isolation:isolate;min-height:100svh;position:relative}.hero-frame{z-index:0;height:100svh;min-height:600px;position:absolute;inset:0 0 auto}@media (min-aspect-ratio:16/9){.hero-frame{width:calc(1.77778*max(100svh,600px));left:50%;right:auto;transform:translate(-50%)}}.hero-zoom{will-change:transform;position:absolute;inset:0}.hero-vignette{z-index:1;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,#0000 45%,#050505d9 100%),linear-gradient(#050505a6,#0000 22% 70%,#050505e6);height:max(100svh,600px);position:absolute;inset:0 0 auto}.hero-ambient{z-index:0;background:radial-gradient(50% 35% at 50% 58%, rgb(var(--ck-amb-rgb) / calc(var(--ck-screen) * .08)), transparent 70%), radial-gradient(70% 45% at 50% 100%, rgb(var(--ck-amb-rgb) / calc(var(--ck-amb) * .28)), transparent 70%);height:max(100svh,600px);position:absolute;inset:0 0 auto}.hero-h1{z-index:3;left:var(--gutter);right:var(--gutter);top:calc(var(--header-h) + 5vh);pointer-events:none;text-shadow:0 10px 60px #0009;flex-direction:column;font-size:clamp(2.6rem,9vw,9.5rem);display:flex;position:absolute}.hero-w3{color:var(--red)}.hero-intro{z-index:4;position:absolute;bottom:clamp(1.5rem,6vh,4rem);left:0;right:0}.hero-facts{border-top:1px solid var(--line);grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;max-width:640px;margin-top:2rem;display:grid}@media (min-width:640px){.hero-facts{grid-template-columns:repeat(4,minmax(0,1fr))}}.hero-facts div{padding:.9rem 1rem 0 0}.hero-facts dt{font-family:var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--color-mute);font-size:9.5px}.hero-facts dd{font-variation-settings:"wdth" 120;margin-top:.3rem;font-size:1.15rem;font-weight:600}.hero-hint,.hero-ttl,.hero-hud,.hero-complete,.hero-black{display:none}.hero-steps{z-index:4;padding-top:calc(max(100svh,600px) + 3rem);padding-bottom:5rem;position:relative}.hero-steps ol{gap:2rem;margin-top:2rem;display:grid}@media (min-width:768px){.hero-steps ol{grid-template-columns:repeat(4,minmax(0,1fr))}}.hero-steps li{border-top:1px solid var(--line);grid-template-columns:auto 1fr;gap:1rem;padding-top:1.25rem;display:grid}.hero-step-title{color:var(--fg);margin-top:.35rem;font-size:15px}.hero-step-text{color:var(--color-soft);max-width:34ch;margin-top:.4rem;font-size:13.5px}.hero-anim{height:720vh}@media (max-width:767px){.hero-anim{height:480vh}.hero-anim .hero-beat{-webkit-backdrop-filter:none;backdrop-filter:none;background:#080808d9}.hero-anim .ck-bezel{filter:none}.hero-anim .hero-sticky{contain:layout paint}}.hero-anim .hero-sticky{height:100svh;min-height:560px;position:sticky;top:0}.hero-anim .hero-stage,.hero-anim .hero-frame,.hero-anim .hero-vignette,.hero-anim .hero-ambient{height:100%;min-height:0}@media (min-aspect-ratio:16/9){.hero-anim .hero-frame{width:177.778svh}}.hero-anim .hero-zoom{transform:translate(calc(var(--zx,0px) * var(--h-zoom)), calc(var(--zy,0px) * var(--h-zoom))) scale(calc(1 + var(--h-zoom) * var(--h-zoom) * 6))}.hero-anim .hero-h1{font-size:clamp(3rem,12.5vw,13.5rem);display:block;inset:0}@media (min-width:640px){.hero-anim .hero-w1{font-size:min(10.3vw,13.5rem)}.hero-anim .hero-w2{font-size:min(9vw,13.5rem)}}.hero-anim .hero-w{text-align:center;white-space:nowrap;position:absolute;top:44%;left:0;right:0}.hero-anim .hero-w1{opacity:var(--h-w1);transform:translateY(calc(-50% - (1 - var(--h-w1)) * 60px)) scale(calc(.96 + var(--h-w1) * .04))}.hero-anim .hero-w2{opacity:var(--h-w2);transform:translateY(calc(-50% + (1 - var(--h-w2)) * 40px));letter-spacing:calc(-.035em + (1 - var(--h-w2)) * .08em)}.hero-anim .hero-w3{opacity:var(--h-w3);transform:translateY(-50%) scale(calc(1.1 - var(--h-w3) * .1))}.hero-anim .hero-intro{opacity:var(--h-intro);transform:translateY(calc((1 - var(--h-intro)) * 30px))}.hero-anim [data-intro=off] .hero-intro,.hero-anim .hero-stage[data-intro=off] .hero-intro{pointer-events:none}.hero-anim .hero-hint{z-index:4;color:var(--color-mute);opacity:var(--h-hint);align-items:center;gap:.8rem;display:flex;position:absolute;bottom:1.5rem;left:50%;transform:translate(-50%)}@media (max-width:767px){.hero-anim .hero-hint{display:none}}.hero-hint-line{background:linear-gradient(to bottom, transparent, var(--red));width:1px;height:28px;animation:hint 1.8s var(--ease-lux) infinite}@keyframes hint{0%{transform-origin:top;transform:scaleY(0)}50%{transform-origin:top;transform:scaleY(1)}51%{transform-origin:bottom}to{transform-origin:bottom;transform:scaleY(0)}}.hero-anim .hero-ttl{z-index:3;left:var(--gutter);transform:translateY(calc(-50% + (1 - var(--h-ttl)) * 40px));opacity:var(--h-ttl);pointer-events:none;display:block;position:absolute;top:50%}.hero-anim .hero-steps{padding:0 var(--gutter);opacity:var(--h-steps);transform:translateY(calc((1 - var(--h-steps)) * 30px));pointer-events:none;position:absolute;bottom:clamp(1.25rem,5vh,3.5rem);left:0;right:0}.hero-anim .hero-steps ol{max-width:1100px}.hero-anim .hero-steps li{opacity:.28;transition:opacity .5s var(--ease-lux), border-color .5s}.hero-anim [data-step=screen] li[data-id=screen],.hero-anim [data-step=ambient] li[data-id=ambient],.hero-anim [data-step=sound] li[data-id=sound],.hero-anim [data-step=camera] li[data-id=camera],.hero-anim [data-step=complete] li{opacity:1;border-color:var(--red)}@media (max-width:767px){.hero-anim .hero-steps ol{min-height:150px;display:block;position:relative}.hero-anim .hero-steps li{opacity:0;background:linear-gradient(#05050566,#050505e6);position:absolute;inset:0 0 auto}.hero-anim [data-step=complete] li{opacity:0}.hero-anim [data-step=complete] li[data-id=camera]{opacity:1}}.hero-anim .hero-hud{display:none}@media (min-width:1440px) and (min-aspect-ratio:16/10){.hero-anim .hero-hud{z-index:3;right:var(--gutter);opacity:var(--h-hud);text-align:right;display:block;position:absolute;top:50%;transform:translateY(-50%)}}.hero-hud li{font-family:var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:#3a3a3a;padding:.28rem 0;font-size:10px;transition:color .4s}.hero-hud li span{margin-right:.6rem}[data-hud="0"] .hero-hud li[data-i="0"],[data-hud="1"] .hero-hud li[data-i="1"],[data-hud="2"] .hero-hud li[data-i="2"],[data-hud="3"] .hero-hud li[data-i="3"],[data-hud="4"] .hero-hud li[data-i="4"],[data-hud="5"] .hero-hud li[data-i="5"],[data-hud="6"] .hero-hud li[data-i="6"]{color:#f5f5f5}[data-hud="0"] .hero-hud li[data-i="0"] span,[data-hud="1"] .hero-hud li[data-i="1"] span,[data-hud="2"] .hero-hud li[data-i="2"] span,[data-hud="3"] .hero-hud li[data-i="3"] span,[data-hud="4"] .hero-hud li[data-i="4"] span,[data-hud="5"] .hero-hud li[data-i="5"] span,[data-hud="6"] .hero-hud li[data-i="6"] span{color:var(--red)}.hero-anim .hero-complete{z-index:3;left:var(--gutter);top:calc(var(--header-h) + 4vh);opacity:var(--h-complete);transform:translateY(calc((1 - var(--h-complete)) * 30px));pointer-events:none;display:block;position:absolute}.hero-anim .hero-black{z-index:10;opacity:var(--h-black);pointer-events:none;background:#050505;display:block;position:absolute;inset:0}@media (max-height:820px){.hero-facts{display:none}.hero-anim .hero-w{top:38%}}@media (max-width:767px){.hero-anim .hero-w{top:34%}.hero-intro .t-kicker{display:none}}@media (max-aspect-ratio:4/5){.hero-anim .hero-frame{height:56%;top:16%}.hero-frame{height:56vh;min-height:0;top:12vh}}.hero-beat{display:none}.hero-anim .hero-beat{z-index:6;right:var(--gutter);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#f5f5f5;opacity:0;pointer-events:none;min-height:44px;transition:opacity .5s var(--ease-lux), transform .5s var(--ease-lux);background:#08080899;border:1px solid #e3000f99;border-radius:999px;align-items:center;gap:.7rem;padding:0 1.1rem;font-size:10.5px;display:inline-flex;position:absolute;bottom:clamp(1.25rem,5vh,3.5rem);transform:translateY(10px)}.hero-anim [data-step=sound] .hero-beat{opacity:1;pointer-events:auto;transform:none}.hero-beat-bars{align-items:flex-end;gap:2px;height:12px;display:flex}.hero-beat-bars span{background:var(--red);width:2px;height:4px}.hero-beat[aria-pressed=true] .hero-beat-bars span{animation:.625s ease-in-out infinite alternate beatbar}.hero-beat-bars span:nth-child(2){animation-delay:.15s!important}.hero-beat-bars span:nth-child(3){animation-delay:.3s!important}.hero-beat-bars span:nth-child(4){animation-delay:.45s!important}@keyframes beatbar{0%{height:3px}to{height:12px}}@media (max-width:767px){.hero-anim .hero-beat{bottom:auto;top:calc(var(--header-h) + .75rem)}}@media (max-width:639px){.hero-anim .hero-h1{font-size:clamp(1.9rem,9.2vw,2.6rem)}.hero-anim .hero-w{padding:0 var(--gutter);top:30%}.hero-anim .hero-w1{transform:translateY(calc(-50% - (1 - var(--h-w1)) * 24px))}.hero-anim .hero-w2{opacity:calc(var(--h-w2) * 2 - 1);letter-spacing:-.02em;transform:translateY(calc(-50% + (1 - var(--h-w2)) * 24px));font-size:.86em}.hero-anim .hero-w3{transform:translateY(-50%) scale(calc(1.04 - var(--h-w3) * .04))}.hero-anim .hero-ttl{top:64%;right:var(--gutter);transform:translateY(calc((1 - var(--h-ttl)) * 20px))}.hero-h1{font-size:clamp(2rem,9.4vw,2.6rem)}.hero-intro{bottom:calc(4.75rem + env(safe-area-inset-bottom))}.hero-intro .btn{flex:auto}.hero-facts{margin-top:1.25rem}.hero-facts dd{font-size:1rem}.hero-anim .hero-steps{bottom:calc(4.5rem + env(safe-area-inset-bottom))}.hero-step-text{font-size:13px}.hero-anim .hero-ttl .fs-xl,.hero-anim .hero-complete .fs-l{font-size:clamp(1.9rem,9vw,2.4rem)}.hero .ck-labels{display:none}}
