/* Approved context photography is independent of the immutable original Apple
   device + authentic native UI. No generated hardware, stretching or UI crop. */
[data-scene] { --device-tilt:-4deg; }
[data-scene="scientific"] { --device-tilt:3deg; }
[data-scene="damkkeun"] { --device-tilt:5deg; }
[data-scene="baro"] { --device-tilt:-5deg; }
[data-scene="silu"], [data-scene="momo-hsk"] { --device-tilt:4deg; }
.context-background { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:50% 50%; pointer-events:none; }
.official-artwork { position:absolute; inset:0; pointer-events:none; }
.official-phone { position:absolute; z-index:1; display:block; left:66%; top:48%; height:80%; width:auto; max-width:80%; object-fit:contain; transform:translate(-50%,-50%) rotate(var(--device-tilt)); filter:drop-shadow(10px 16px 16px #0004); }
.hero-slide .official-artwork { inset:0; }
.hero-slide:after { display:block; background:linear-gradient(180deg,transparent 55%,#101519d9 100%); }
.hero-slide .hero-caption { bottom:28px; }
.hero-slide.financial, .story.financial { background:#23382f; }
.hero-slide.scientific, .story.scientific { background:#28253c; }
.hero-slide.damkkeun, .story.damkkeun { background:#25483c; }
.hero-slide.baro, .story.baro { background:#1f3d42; }
.hero-slide.silu, .story.silu { background:#423148; }
.hero-slide.beam, .story.beam { background:#23232a; }
.story .official-artwork { inset:0; }
.story .official-phone { left:65%; top:43%; height:75%; }
.story:first-child .official-phone { top:44%; height:76%; }
.story .story-caption { z-index:2; }
/* Product pages show enough of the real scene without reducing the phone to a
   tiny landscape thumbnail. The full device remains inside the scene. */
.product-hero { grid-template-columns:minmax(0,1fr) minmax(300px,1fr); gap:clamp(36px,6vw,80px); }
.product-hero .product-phone { width:100%; max-width:580px; }
.phone-frame { position:relative; width:100%; aspect-ratio:4 / 5; padding:0; border:0; border-radius:16px; background:#e7e5df; box-shadow:none; overflow:hidden; }
.phone-frame .context-background { width:100%; height:100%; aspect-ratio:auto; object-fit:cover; object-position:57% 50%; border-radius:0; filter:none; }
.phone-frame .official-mockup { position:absolute; display:block; left:59%; top:50%; width:auto; height:82%; max-width:80%; aspect-ratio:1350 / 2760; object-fit:contain; border-radius:0; transform:translate(-50%,-50%) rotate(var(--device-tilt)); filter:drop-shadow(10px 16px 16px #0004); }
.about-visual { position:relative; overflow:hidden; }
.about-visual > .context-background { position:absolute; inset:0; width:100%; height:100%; max-width:none; border:0; border-radius:0; transform:none; box-shadow:none; object-fit:cover; }
.about-visual .about-device { z-index:1; width:142px; height:290px; background:transparent; border:0; border-radius:0; overflow:visible; box-shadow:none; }
.about-visual .about-device img { position:static; display:block; width:100%; height:100%; object-fit:contain; border:0; border-radius:0; transform:none; box-shadow:none; filter:drop-shadow(8px 12px 15px #0004); }
.about-device::after { display:none; }
@media(max-width:820px){ .product-hero { grid-template-columns:1fr; } .product-hero .product-phone { width:100%; max-width:480px; } }
@media(max-width:767px){
 .hero-slide .official-artwork { inset:0; }
 .hero-slide .context-background { object-position:58% 50%; }
 .hero-slide .official-phone { left:60%; top:42%; height:72%; }
 .hero-slide .hero-caption { bottom:24px; }
 .hero-slide:after { background:linear-gradient(180deg,transparent 45%,#101519eb 100%); }
 .story .official-phone, .story:first-child .official-phone { top:42%; height:73%; }
 .about-visual .about-device { width:112px; height:230px; border-radius:0; }
}