/* Five-layer phone. Fixed drawing coordinates keep leaders registered at all sizes. */
.hero-grid{grid-template-columns:.9fr 1.2fr;gap:18px}
.hero-visual.phone-scene{height:690px;width:100%;margin:0;container-type:inline-size;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;overflow:visible;perspective:none}
.hero-visual.phone-scene:before,.scene-halo,.scene-orbit,.scene-heading{display:none}
.phone-canvas{position:absolute;width:1400px;height:1500px;left:50%;top:48%;transform:translate(-50%,-50%) scale(.35);transform-origin:center;pointer-events:none}
@supports(width:1cqw){.phone-canvas{transform:translate(-50%,-50%) scale(calc(100cqw / 1400px))}}
.phone-assembly{width:330px;height:1024px;left:700px;top:700px;transform:translate(-50%,-50%) rotate(-15deg);transform-style:flat}
.phone-layer{width:330px;height:1024px;inset:0;--lift:0px;animation:phone-expand 16s cubic-bezier(.45,0,.2,1) infinite;animation-delay:-6s;transform:translateX(var(--spread));filter:drop-shadow(8px 14px 12px #0003)}
.phone-texture{width:330px;height:1024px;background-image:url('assets/iphone-four-layers.webp');background-size:1536px 1024px;background-repeat:no-repeat;transform:none;clip-path:none!important}

.part-screen{--spread:-330px;z-index:2}.part-screen .phone-texture{background-position:-330px 0}
.part-electronics{--spread:-110px;z-index:3}.part-electronics .phone-texture{background-position:-650px 0}
.part-housing{--spread:110px;z-index:4}.part-housing .phone-texture{background-position:-950px 0}
.part-glass{--spread:330px;z-index:5}.part-glass .phone-texture{background-position:-1230px 0}
@keyframes phone-expand{0%,12%,94%,100%{transform:translateX(0)}34%,74%{transform:translateX(var(--spread))}}
.phone-callouts{position:absolute;inset:0;width:1400px;height:1500px;overflow:visible;z-index:6;color:var(--ink);animation:phone-labels 16s linear infinite;animation-delay:-6s;opacity:1}
.phone-callouts path{stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;opacity:.65}.phone-callouts circle{fill:var(--ink);stroke:var(--paper);stroke-width:3}.phone-callouts text{fill:var(--ink);font-family:inherit;font-size:32px;font-weight:550;letter-spacing:.2px;paint-order:stroke;stroke:var(--paper);stroke-width:9px;stroke-linejoin:round}
@keyframes phone-labels{0%,31%,80%,100%{opacity:0}39%,73%{opacity:1}}
.is-paused .phone-callouts,.offscreen .phone-callouts,.tab-hidden .phone-callouts{animation-play-state:paused}
.phone-caption{bottom:16px;font-size:11px}.animation-toggle{bottom:52px;right:15px;background:var(--surface-raised);backdrop-filter:blur(15px)}
.no-js .phone-layer,.no-js .phone-callouts{animation:none}
@media(max-width:1100px){.hero-visual.phone-scene{height:610px}.phone-canvas{transform:translate(-50%,-50%) scale(.26)}@supports(width:1cqw){.phone-canvas{transform:translate(-50%,-50%) scale(calc(100cqw / 1400px))}}}
@media(max-width:800px){.hero-grid{grid-template-columns:1fr}.hero-visual.phone-scene{height:auto;aspect-ratio:1.05;margin-bottom:25px}.phone-canvas{top:44%;transform:translate(-50%,-50%) scale(.36)}@supports(width:1cqw){.phone-canvas{transform:translate(-50%,-50%) scale(calc(100cqw / 1400px))}}.phone-caption{bottom:0}.animation-toggle{bottom:35px}}
@media(max-width:560px){.hero-visual.phone-scene{aspect-ratio:.94}.phone-canvas{top:43%;transform:translate(-50%,-50%) scale(.205)}@supports(width:1cqw){.phone-canvas{transform:translate(-50%,-50%) scale(calc(100cqw / 1400px))}}.phone-callouts text{font-size:44px;stroke-width:12px}.phone-callouts path{stroke-width:3.5}.animation-toggle{bottom:28px;right:0}.phone-caption{font-size:10px}}
@media(prefers-reduced-motion:reduce){.phone-layer,.phone-callouts{animation:none!important}.phone-callouts{opacity:1}.animation-toggle{display:none}}
.part-electronics .phone-texture,.part-housing .phone-texture{clip-path:inset(0 30px 0 0)!important}.part-glass .phone-texture{clip-path:inset(0 0 0 25px)!important}
@media(max-width:560px){.phone-callouts text{font-size:54px}}

/* Larger hardware, with reserved rows for readable callouts. */
.hero-grid{grid-template-columns:.82fr 1.28fr;gap:12px}.hero-visual.phone-scene{height:740px}.phone-canvas{top:49%}.phone-callouts text{font-size:28px;font-weight:550;stroke-width:7px}.phone-callouts path{stroke-width:1.8;opacity:.6}.phone-caption{bottom:3px}.animation-toggle{bottom:36px}
@media(max-width:1100px){.hero-visual.phone-scene{height:640px}}
@media(max-width:800px){.hero-grid{grid-template-columns:1fr}.hero-visual.phone-scene{height:auto;aspect-ratio:.87}.phone-canvas{top:46%}}
@media(max-width:560px){.hero-visual.phone-scene{aspect-ratio:.81}.phone-callouts text{font-size:36px;stroke-width:9px}.phone-callouts path{stroke-width:2.5}.phone-caption{bottom:0}.animation-toggle{bottom:30px}}
/* Preserve the original electronics and transparent housing apertures. */
.phone-texture{background-image:url('assets/iphone-four-layers.webp')}.part-glass .phone-texture{background-image:url('assets/iphone-four-layers.webp')}

/* Registered rear glass: width and shear match the housing at every frame. */
.part-glass .phone-texture{transform-origin:0 0;transform:matrix(1.31,.147,0,.955,-62,15);clip-path:inset(0 0 0 25px)!important}
.phone-layer{filter:drop-shadow(4px 7px 5px #0002)}
.animation-toggle{width:42px;height:42px;padding:0;display:grid;place-items:center}.animation-toggle span{display:none}

/* Soft atmosphere, with no card or visible boundary behind the phone. */
.hero-visual.phone-scene:after{content:"";position:absolute;z-index:-1;pointer-events:none;left:4%;right:4%;top:12%;bottom:12%;border-radius:50%;background:radial-gradient(ellipse at 50% 45%,#ffffffc9 0%,#c6cfdd65 34%,#b9c4d51c 53%,transparent 72%);filter:blur(24px)}
[data-theme=dark] .hero-visual.phone-scene:after{background:radial-gradient(ellipse at 50% 45%,#71798930 0%,#41495720 35%,#3037430d 55%,transparent 73%)}