/* The first downward scroll presses the button, then scrubs the action carousel. */
.cinematic-page .site-header{color:#f6f2eb;z-index:30}
.cinematic-page .nav-download{border-color:#ffffff50;background:#131210e6}
.cinematic-page .site-header nav>a:not(.nav-download):hover{color:#ffb281}
.hero.hero--cinema{display:block;height:380svh;min-height:0;max-height:none;padding:0;background:#080808;overflow:visible;color:#fff;--scene:0;--intro:1;--menu:0;--press:0;--contact:0;--pulse:0;--pulse-scale:1;--track-x:0px;--glow:255,168,86}
.cinema-sticky{position:sticky;top:0;width:100%;height:100svh;min-height:520px;overflow:hidden;isolation:isolate;background:#080808}
.cinema-art{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.cinema-hardware{position:absolute;width:75vw;height:150%;right:-5vw;top:-22%;opacity:calc(1 - var(--menu) * .91);transform:translateX(calc(var(--menu) * -38vw)) scale(calc(1.24 - var(--menu) * .32)) rotate(calc(var(--menu) * -12deg));transform-origin:60% 45%;mask-image:linear-gradient(90deg,transparent,#000 20%,#000 86%,transparent)}
.hardware-photo{position:relative;height:100%;aspect-ratio:2/3;margin-inline:auto}
.hardware-photo>img,.button-cap,.button-cap img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:fill}
.hardware-photo>img,.button-cap img{filter:brightness(1.25)}
.button-cap{clip-path:polygon(55.7% 24.4%,59.6% 24.6%,61% 26.3%,60% 30%,44.4% 55.7%,41% 57.2%,37% 56.7%,35.8% 54.4%,36.8% 51%);transform:translate(calc(var(--press) * 6px),calc(var(--press) * 3px));filter:brightness(calc(1 - var(--press) * .4))}
.press-contact,.button-pulse{position:absolute;left:48%;top:41%;width:70px;height:70px;border-radius:50%;pointer-events:none}
.press-contact{border:1px solid #fff9;box-shadow:inset 0 0 22px #ffffff18,0 0 0 12px #ffffff08;opacity:var(--contact);transform:translate(-50%,-50%) scale(calc(1 - var(--press) * .3))}
.button-pulse{border:2px solid #ffb07c;opacity:var(--pulse);transform:translate(-50%,-50%) scale(var(--pulse-scale))}
.cinema-light{position:absolute;width:70vw;height:90%;left:32%;top:3%;border-radius:50%;background:radial-gradient(ellipse,#ff863044 0,#ff72171d 24%,transparent 65%);opacity:calc((.15 + var(--press) * .85) * (1 - var(--menu)));mix-blend-mode:screen}
.cinema-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#080808 0,#080808ee 17%,#08080880 40%,transparent 66%),linear-gradient(0deg,#080808 0,transparent 23%,transparent 80%,#08080850);opacity:var(--intro)}
.hero--cinema .hero-copy{position:absolute;z-index:3;top:50%;left:7%;width:74%;max-width:1040px;padding:0;transform:translateY(calc(-44% - (1 - var(--intro)) * 50px));opacity:var(--intro);text-align:left}
.hero--cinema h1{font-size:clamp(58px,6.2vw,100px);line-height:1.03;letter-spacing:-.065em;text-shadow:0 2px 30px #0003}
.hero--cinema h1 em{display:block;color:#ffae7c;font-weight:550;margin-top:4px}
.hero--cinema .hero-description{font-size:clamp(19px,1.6vw,24px);line-height:1.55;color:#c2beb7;max-width:570px;margin:30px 0 33px}
.cinema-actions{display:flex;align-items:center}
.hero--cinema .button-dark{background:#f3ede4;color:#27231f;font-size:17px;padding:17px 24px;box-shadow:none}
.hero--cinema .button-dark:hover{background:#ffb484}
.cinema-ready .cinema-intro:not(.intro-visible){pointer-events:none}
.cinema-outro[aria-hidden="true"]{pointer-events:none;visibility:hidden}
/* A visual selection wheel, with the neighboring actions still in view. */
.action-scene{position:absolute;inset:0;z-index:2;opacity:var(--menu);transform:translateY(calc((1 - var(--menu)) * 45px));pointer-events:none;user-select:none}
.action-scene::before{content:"";position:absolute;inset:3% 8%;background:radial-gradient(ellipse at 50% 48%,rgba(var(--glow),.12),transparent 62%);opacity:var(--menu)}
.action-scene>h2{position:absolute;top:9%;left:5%;width:90%;text-align:center;font-size:clamp(40px,4.5vw,70px);line-height:1.07;letter-spacing:-.055em}
.action-scene>h2 em{color:#a7a6a5}
.action-carousel{--card-width:clamp(170px,18vw,230px);--card-gap:clamp(42px,6vw,90px);--capsule-height:clamp(185px,29svh,290px);position:absolute;inset:35% 0 0}
.action-track{position:absolute;top:0;left:50%;display:flex;gap:var(--card-gap);padding:0;margin:0 0 0 calc(var(--card-width) * -.5);list-style:none;width:max-content;transform:translateX(var(--track-x));will-change:transform}
.action-card{--focus:0;--accent:255,205,133;flex:0 0 var(--card-width);width:var(--card-width);text-align:center;opacity:calc(.35 + var(--focus) * .65);transform:scale(calc(.7 + var(--focus) * .3));transform-origin:50% 50%}
.action-card:first-child{--focus:1}
.action-camera{--accent:255,145,60}.action-timer{--accent:255,165,62}.action-breath{--accent:164,218,201}.action-voice{--accent:255,167,83}.action-shortcuts{--accent:255,148,60}
.action-capsule{height:var(--capsule-height);border-radius:60px;display:grid;place-items:center;position:relative;background:radial-gradient(ellipse,rgba(var(--accent),.035),transparent 75%);border:1px solid #ffffff08;box-shadow:none}
.action-capsule::before{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid rgba(var(--accent),calc(var(--focus) * .12));box-shadow:0 0 42px rgba(var(--accent),calc(var(--focus) * .07)),inset 0 0 45px rgba(var(--accent),calc(var(--focus) * .025))}
.action-art{width:112%;height:112%;max-width:none;object-fit:contain;position:relative;z-index:1;filter:drop-shadow(0 18px 18px #0006);transform:translateY(calc((1 - var(--focus)) * 8px)) rotate(calc((1 - var(--focus)) * -5deg))}
.action-caption{display:none}
.action-readout{position:absolute;top:calc(var(--capsule-height) + 26px);left:5%;width:90%;text-align:center}
.action-readout h3{font-size:clamp(26px,2.5vw,36px);line-height:1.15;letter-spacing:-.04em}
.action-readout p{font-size:18px;line-height:1.5;color:#b4b2b0;margin-top:9px}
.action-position{position:absolute;left:50%;bottom:110px;display:flex;gap:9px;transform:translateX(-50%)}
.action-position span{height:5px;width:5px;border-radius:50%;background:#ffffff38}
.action-position span.is-active{background:#f1e9dc}
.cinema-outro{position:absolute;bottom:40px;left:0;width:100%;z-index:3;text-align:center;opacity:var(--menu);transform:translateY(calc((1 - var(--menu)) * 20px))}
.cinema-outro .button{min-width:164px}
.cinema-progress{position:absolute;z-index:4;bottom:0;left:0;width:100%;height:2px;background:#ffffff13;overflow:hidden;pointer-events:none}
.cinema-progress span{display:block;height:100%;width:100%;background:#ffae78;transform:scaleX(var(--scene));transform-origin:left}
@media(max-width:900px){
 .hero--cinema h1{font-size:clamp(42px,7vw,68px)}
 .hero--cinema .hero-copy{left:7%;width:86%;top:auto;bottom:9%;transform:translateY(calc((1 - var(--intro)) * -30px))}
 .hero--cinema .hero-description{font-size:19px;max-width:430px;margin:22px 0 26px}
 .cinema-hardware{height:98%;width:135vw;top:-10%;right:-33vw;mask-image:linear-gradient(180deg,#000 0,#000 65%,transparent 94%)}
 .cinema-shade{background:linear-gradient(0deg,#080808 0,#080808 6%,#080808e8 24%,#08080880 43%,transparent 66%)}
 .action-scene>h2{font-size:clamp(38px,6.5vw,56px);top:11%}
 .action-carousel{--card-width:clamp(150px,25vw,210px);--card-gap:clamp(30px,6vw,60px);--capsule-height:clamp(190px,28svh,260px);inset:35% 0 0}
 .action-capsule{border-radius:48px}
}
@media(max-width:500px){
 .hero--cinema h1{font-size:clamp(31px,8.2vw,42px)}
 .hero--cinema .hero-description{font-size:18px;line-height:1.5;margin:20px 0 25px}
 .hero--cinema .button-dark{font-size:15px;padding:16px 20px}
 .action-scene>h2{font-size:clamp(33px,8.5vw,42px);top:12%}
 .action-carousel{--card-width:156px;--card-gap:38px;--capsule-height:clamp(175px,26svh,220px);inset:36% 0 0}
 .action-capsule{border-radius:46px}
 .action-readout{top:calc(var(--capsule-height) + 24px)}
 .action-readout h3{font-size:28px}.action-readout p{font-size:17px}
 .action-position{bottom:105px}.cinema-outro{bottom:35px}
 .press-contact,.button-pulse{width:45px;height:45px}
}
@media(max-height:700px) and (min-height:521px){
 .action-scene>h2{top:8%;font-size:clamp(32px,5vw,50px)}
 .action-carousel{inset:30% 0 0;--capsule-height:clamp(150px,28svh,190px)}.action-capsule{border-radius:42px}
 .action-readout{top:calc(var(--capsule-height) + 18px)}.action-readout h3{font-size:27px}.action-readout p{margin-top:5px;font-size:16px}
 .action-position{bottom:87px}.cinema-outro{bottom:23px}
 .hero--cinema .hero-copy{bottom:8%}.hero--cinema .hero-description{margin:18px 0 22px}
}
/* The normal document stays usable without motion, JavaScript, or a tall viewport. */
:root:not(.cinema-ready) .hero.hero--cinema,.cinema-static .hero.hero--cinema{height:auto}
:root:not(.cinema-ready) .cinema-sticky,.cinema-static .cinema-sticky{position:relative;min-height:650px}
:root:not(.cinema-ready) .action-scene,:root:not(.cinema-ready) .cinema-outro,:root:not(.cinema-ready) .cinema-progress,
.cinema-static .action-scene,.cinema-static .cinema-outro,.cinema-static .cinema-progress{display:none}
:root:not(.content-ready) .tool-selector,:root:not(.content-ready) .profile-selector{display:none}
:root:not(.content-ready) [data-tool-panel][hidden]{display:grid!important}
:root:not(.content-ready) [data-tool-panel]+[data-tool-panel]{border-top:1px solid var(--line)}
@media(max-height:520px){.cinema-static .cinema-sticky{min-height:580px}.hero--cinema .hero-copy{top:160px;bottom:auto;transform:none}.hero--cinema h1{font-size:48px}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.motion-ready [data-reveal]{opacity:1;transform:none}}
.error-page{min-height:100svh;padding-top:180px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:28px}.error-page h1{font-size:clamp(48px,8vw,110px);line-height:1.05;letter-spacing:-.05em}.error-page p{font-size:22px}