/* Motion is progressive enhancement: content stays visible without JavaScript. */
:root{--motion-settle:cubic-bezier(.16,1,.3,1)}
.hero-composite{transform-origin:50% 55%}
.nav-wrap{transition:background-color .3s ease,box-shadow .3s ease}
.nav-wrap.is-scrolled{background:#ffffffeb;box-shadow:0 4px 24px #00000005}
.button,.nav-cta,.text-button,.gallery-controls button,.approve-button,.download-button{transition:transform .22s var(--motion-settle),background-color .22s ease,box-shadow .22s ease}
.button:active,.nav-cta:active,.gallery-controls button:active,.approve-button:active,.download-button:active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){.button:hover,.nav-cta:hover{transform:translateY(-2px);box-shadow:0 8px 22px #16330016}.text-button:hover{transform:translateX(3px)}.editorial-card{transition:box-shadow .4s ease}.editorial-card:hover{box-shadow:0 12px 32px #00000008}}
.motion-ready .reveal{transition-duration:.95s;transition-timing-function:var(--motion-settle)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important}.hero-composite{transform:none!important}.reveal{opacity:1!important;transform:none!important}}
/* Keep native scrolling free of JS-driven transforms and backdrop repaint work. */
.nav-wrap{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fffffff5;transition:none}
.hero-composite{transform:none}

/* One-shot hinge animation. All layers share the original plate coordinates. */
.hero-composite{aspect-ratio:1659/948;perspective:4531px;perspective-origin:48.6% 4%}
.hero-base{clip-path:inset(81% 0 0 22.35%)}
.hero-lid{position:absolute;inset:0;transform-origin:59.3% 80.9%;transform:rotateX(0deg);transform-style:preserve-3d}

.hero-phone-hardware{position:absolute;inset:0;width:100%;height:100%;clip-path:inset(0 77.6% 0 0)}
.hero-composite .hero-mobile-screen,.hero-phone-hardware{z-index:2}
.hero-original-tag{z-index:3}
@media(prefers-reduced-motion:reduce){.hero-lid{transform:none!important}}

.hero-lid .hero-desktop-screen{backface-visibility:hidden;transform:translateZ(.1px)}
.hero-lid-back{position:absolute;left:25.25%;top:3.7%;width:67.9%;height:77.2%;border-radius:2.4% 2.4% .5% .5%;background:linear-gradient(135deg,#d5d6d7,#f1f2f3 48%,#b8babc);border:1px solid #a3a5a7;backface-visibility:hidden;transform:translateZ(-1.5px) rotateY(180deg)}
@media(prefers-reduced-motion:no-preference){.hero-boot .hero-lid{transform:rotateX(-90deg)}}

/* Decorative device unlock sequence, not an app authentication prompt. */
.hero-phone-stage{position:absolute;inset:0;z-index:2}
.hero-composite{container-type:inline-size}
.device-unlock{position:absolute;display:grid;place-items:center;background:#4573ac;color:#fff;opacity:0;pointer-events:none;overflow:hidden}
.unlock-mac{left:27.0645%;top:8.6498%;width:64.316%;height:67.72%;backface-visibility:hidden;transform:translateZ(.2px)}
.unlock-phone{left:5.244%;top:27.532%;width:16.154%;height:60.76%;border-radius:16.4% / 7.6%;z-index:3}
.unlock-phone::before{content:"";position:absolute;top:2%;left:33%;width:34%;height:4%;border-radius:20px;background:#020403}
.unlock-phone::after{content:"";position:absolute;bottom:1.9%;left:33%;width:34%;height:.7%;border-radius:20px;background:#ffffff70}
.unlock-content{position:relative;display:grid;justify-items:center;width:11%;gap:12px}
.unlock-phone .unlock-content{width:35%;gap:10px}
.unlock-content svg,.unlock-content img{display:block;width:100%;height:auto}
.unlock-label{font-size:clamp(5px,1.05cqw,13px);letter-spacing:.035em;white-space:nowrap;color:#ffffffad}
.unlock-check{position:absolute;top:0;left:0;color:#fff;opacity:0}
@media(prefers-reduced-motion:no-preference){.hero-boot .device-unlock{opacity:1}}
@media(prefers-reduced-motion:reduce){.device-unlock{display:none}}

/* Physical bezel replaces the photographic crop: no white cutout corners. */
.hero-lid-frame{position:absolute;left:25.25%;top:3.7%;width:67.9%;height:77.2%;border-radius:2.4% 2.4% .5% .5%;background:linear-gradient(125deg,#111213,#030404 38%,#101213);border:1px solid #73777a;box-shadow:inset 0 0 0 1px #292c2e;backface-visibility:hidden;transform:translateZ(0)}
.hero-lid-frame::after{content:"";position:absolute;left:.4%;right:.4%;bottom:.3%;height:2.9%;background:linear-gradient(#151719,#252729);border-radius:0 0 2px 2px}
.hero-lid-camera{position:absolute;left:48%;top:2.65%;width:.65%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 35%,#284055,#10171d 45%,#030506 70%);box-shadow:0 0 0 1px #24272a}

.hero-composite .device-unlock .unlock-wallpaper{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.unlock-content{z-index:1;text-shadow:0 1px 5px #14284070}
.unlock-phone::before,.unlock-phone::after{z-index:2}
.unlock-label{color:#fff}