
html.motion .scene[data-scene=film]{--film-step:42vh;height:calc(100vh + (var(--film-n,2) - 1) * var(--film-step));height:calc(100svh + (var(--film-n,2) - 1) * var(--film-step))}
html.motion .scene[data-scene=film]>.sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
@media (max-width:767px){html.motion .scene[data-scene=film]{--film-step:36svh}}
.film-skip{position:absolute;left:16px;top:calc(var(--hh,64px) + 12px);z-index:30;min-height:44px;display:inline-flex;align-items:center;padding:10px 16px;border-radius:999px;background:var(--ink,#0d1014);color:#fff;font-size:14px;font-weight:600;text-decoration:none;
 opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .2s,transform .2s}
.film-skip:focus-visible,.film-skip:focus{opacity:1;pointer-events:auto;transform:none;outline:2px solid var(--accent,#1b8aa6);outline-offset:3px}
html:not(.motion) .film-skip{display:none}
.hero-tap{display:none}
html.motion .hero-tap{display:block;position:absolute;left:22.4%;top:56.6%;width:26.6%;height:17.8%;border-radius:4%/7%;z-index:4;pointer-events:none;opacity:0;
 box-shadow:0 0 0 2px var(--accent-bright,#58c9e7),0 0 0 10px rgb(88 201 231/.22);background:rgb(88 201 231/.08);transform:translate(-50%,-50%)}
html.motion .hero .hero-beats li{transition:opacity .5s var(--ease),transform .7s var(--ease)}
html.motion .hero .hero-zoom{transform-origin:97% 30%}
html.motion .hero .row-ring{top:31%;height:6.4%}
html.motion [data-tl],html.motion .hd,html.motion .hero-copy{will-change:auto}
html.motion .scene[data-playing] [data-tl],html.motion .scene[data-playing] .hd,html.motion .scene[data-playing] .hero-copy{will-change:transform,opacity}
html.motion .hero .scroll-hint{text-transform:none;letter-spacing:0;font-size:var(--fs-caption,13px);font-weight:600}
html.motion .hero .sticky{display:block;padding:calc(var(--hh) + 6vh) 0 0}
html.motion .hero .hero-copy{position:relative;inset:auto}
html.motion .hero .hero-devices{position:relative;inset:auto}
html.motion .hero .hero-pad{position:relative;display:block;margin:36px auto 0;width:min(880px,60%,(100svh - var(--hh) - 150px) * 1.38)}
html.motion .hero:not(.is-live) .hero-pad{opacity:1;transform:scale(.85);transform-origin:50% 0}
html.motion .hero:not(.is-live) .hero-pad .stack>[data-hl=idle]{opacity:1}
@media (min-width:768px) and (max-aspect-ratio:9/10){html.motion .hero .hero-pad{width:min(880px,78%,(100svh - var(--hh) - 150px) * 1.38)}}
@media (max-width:767px){
 html.motion .hero .sticky{padding-top:calc(var(--hh) + 3vh)}
 html.motion .hero .hero-pad{margin-top:24px;width:94%}
}
html.motion .hero.is-boot .hero-phone{transition:opacity .8s var(--ease)}
html.motion .hero .scene[data-playing] .hero-zoom,html.motion .hero .scene[data-playing] .hero-tap{will-change:transform,opacity}
html.motion .scene[data-scene=film]:not([data-near]) .stack>.layer:not(:first-child){display:none}
html.motion[data-world] body{background:var(--world-bg,var(--bg));transition:background-color .6s var(--ease)}
.hero-ghost{display:none}
html.motion .hero-ghost{display:block;position:absolute;left:50%;top:-2%;z-index:0;transform:translateX(-50%);pointer-events:none;white-space:nowrap;
 font-family:var(--font-display);font-weight:700;font-size:var(--fs-giant,clamp(120px,22vw,340px));letter-spacing:-.05em;line-height:.8;font-variant-numeric:tabular-nums;
 color:rgb(13 16 20/calc(var(--fill,0)*.12));-webkit-text-stroke:1.5px rgb(13 16 20/.07)}
html.motion .hero .hero-pad{z-index:1}
@media (max-width:767px){html.motion .hero-ghost{top:4%;font-size:clamp(96px,30vw,160px)}}
html.motion .scene[data-scene=film]:not([data-near]):not([data-name=hero]) .screen img{display:none}
html.motion .hero:not(.is-live) .screen img{display:none}
html.motion .hero:not(.is-live) .screen [data-hl=idle] img{display:inline}
html.motion section:has(>[data-scene=film]:first-child){scroll-margin-top:calc(-1 * var(--hh,64px))}
.to-top{position:fixed;z-index:55;right:max(16px,calc(env(safe-area-inset-right) + 12px));bottom:max(16px,calc(env(safe-area-inset-bottom) + 12px));
 width:48px;height:48px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;cursor:pointer;color:var(--ink,#0d1014);
 background:var(--hdr-light,rgb(251 251 250/.74));-webkit-backdrop-filter:saturate(1.4) blur(20px);backdrop-filter:saturate(1.4) blur(20px);
 box-shadow:0 0 0 1px rgb(13 16 20/.08),0 8px 24px -10px rgb(13 16 20/.35);
 opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .3s,transform .3s,visibility 0s .3s}
.to-top.on-dark{color:#fff;background:var(--hdr-dark,rgb(11 13 16/.66));box-shadow:0 0 0 1px rgb(255 255 255/.12),0 8px 24px -10px rgb(0 0 0/.6)}
.to-top svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.to-top.is-on:not(.is-dodging){opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .3s,visibility 0s}
.to-top:focus-visible{outline:2px solid var(--focus,var(--accent,#1b8aa6));outline-offset:3px}
@media (hover:hover){.to-top:hover{transform:translateY(-2px)}}
.menu:not([hidden])~.to-top{display:none}
@media (prefers-reduced-motion:reduce){.to-top{transition:none}}
@media print{.to-top{display:none}}
.cue{--cue-b:max(20px,calc(env(safe-area-inset-bottom) + 12px));position:fixed;left:50%;top:0;z-index:54;margin-bottom:var(--cue-b);transform:translate3d(-50%,calc(100vh - 64px),0);
 display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 14px 0 12px;border:0;border-radius:999px;cursor:pointer;
 font:600 14px/1 var(--font-display,system-ui,sans-serif);letter-spacing:-.01em;color:var(--ink,#0d1014);
 background:rgb(251 251 250/.8);-webkit-backdrop-filter:saturate(1.4) blur(20px);backdrop-filter:saturate(1.4) blur(20px);
 box-shadow:0 0 0 1px rgb(13 16 20/.08),0 10px 28px -12px rgb(13 16 20/.4);opacity:0;visibility:hidden;pointer-events:none}
.cue.on-dark{color:#fff;background:rgb(11 13 16/.7);box-shadow:0 0 0 1px rgb(255 255 255/.14),0 10px 28px -12px rgb(0 0 0/.7)}
.cue.is-on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .5s var(--ease,ease)}
.cue svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cue-ic{width:18px;height:18px}.cue-chev{width:16px;height:16px;stroke-width:2;animation:cue-bob 1.6s ease-in-out infinite}
@keyframes cue-bob{0%,100%{transform:translateY(-2px);opacity:.5}50%{transform:translateY(2px);opacity:1}}
@media (prefers-reduced-motion:reduce){.cue-chev{animation:none}}
.cue:focus-visible{outline:2px solid var(--focus,var(--accent,#1b8aa6));outline-offset:3px}
html:not(.motion) .cue,.menu:not([hidden])~.cue{display:none}
html.has-cue .scroll-hint{display:none}
