/* Titanium, polished glass and a real thickness in 3D space. */
.phone-depth{--device-radius:34px;--screen-radius:27px;--device-gutter:6px;--metal-step:2px;perspective:1200px;perspective-origin:50% 43%;transition:opacity .65s ease,visibility 0s .65s,width 1s ease,left 1s ease,top 1s ease;isolation:auto}
.phone-depth.phone-visible{transition:opacity .65s ease,visibility 0s,width 1s ease,left 1s ease,top 1s ease}
.phone-depth-body{position:relative;transform-style:preserve-3d;transform-origin:50% 55%;backface-visibility:hidden}
.phone-hardware{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.phone-rear-cap,.phone-metal-layer{position:absolute;inset:0;border-radius:var(--device-radius);backface-visibility:hidden}
.phone-rear-cap{transform:translateZ(-25px);background:#515750;box-shadow:inset 0 0 0 1px #c0c2b7,inset 0 0 0 3px #3b413b}
.phone-metal-layer{transform:translateZ(calc(-1px - var(--layer)*var(--metal-step)));background:linear-gradient(108deg,#e1e0d3 0%,#8c9285 10%,#b3b7a8 28%,#474e44 62%,#8d9587 83%,#e6e7da 100%);box-shadow:none}

.phone-earpiece{position:absolute;top:4px;left:42%;width:16%;height:2px;border-radius:2px;background:#101811;box-shadow:0 .5px 0 #d9e0cc70,inset 0 .5px .5px #060b08;pointer-events:none}
.phone-side-control{position:absolute;width:3px;border-radius:2px;transform:translateZ(-12px);background:linear-gradient(90deg,#535f4e,#d0d5c7 45%,#65725e);box-shadow:0 1px 1px #1a231c99,inset 0 0 0 .5px #eef0df66}
.control-power{right:-2px;top:29%;height:12%}.control-volume{left:-2px;top:25%;height:13%}.control-action{left:-2px;top:17%;height:4%}
.phone-depth .phone-shell{position:relative;padding:var(--device-gutter);padding-top:calc(var(--device-gutter) + 5px);border-radius:var(--device-radius);background:linear-gradient(125deg,#e5e6db 0%,#757e70 8%,#222b22 22%,#5f6a59 51%,#1f291f 72%,#b6bfab 95%,#e7e9df 100%);box-shadow:inset 0 0 0 .7px #f7f8e3bf,inset 0 0 0 2px #1c281cc9,0 1px 2px #14221980;transform:translateZ(1px)}
.phone-depth .phone-screen{position:relative;border-radius:var(--screen-radius);aspect-ratio:390/844;background:#fcfcf8;box-shadow:0 0 0 2px #111a13,0 0 0 2.6px #dbe2ce4d;transition:aspect-ratio 1s ease}
/* The highlight follows the bezel only; no glare covers the captured app. */
.phone-glass-rim{position:absolute;inset:2px;border-radius:calc(var(--device-radius) - 2px);border-top:1px solid #ffffffb3;border-left:1px solid #edf3df70;border-bottom:1px solid #101c1280;box-shadow:inset 0 0 0 .5px #e5ebd72b;pointer-events:none}
.phone-ground-shadow{position:absolute;left:-10%;right:-12%;height:12%;bottom:-7%;transform-origin:center;pointer-events:none}
.phone-ground-shadow:before,.phone-ground-shadow:after{content:'';position:absolute;border-radius:50%;background:#283b2a}
.phone-ground-shadow:before{inset:0;filter:blur(16px);opacity:.2;transform:skewX(-15deg)}
.phone-ground-shadow:after{left:22%;right:16%;top:42%;height:21%;filter:blur(5px);opacity:.17}
.phone-app-capture{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;background:#fcfcf8;transition:opacity .7s ease}
.phone-app-capture[aria-hidden=true]{opacity:0}.phone-app-capture[aria-hidden=false]{opacity:1}
.story-copy-arrival h1,.story-copy-arrival h2{animation:story-heading-arrive 950ms cubic-bezier(.2,.65,.2,1) both}
.story-copy-arrival p{animation:story-heading-arrive 1100ms cubic-bezier(.2,.65,.2,1) 120ms both}
@keyframes story-heading-arrive{from{opacity:0;transform:translate3d(0,12px,0);filter:blur(3px)}to{opacity:1;transform:none;filter:blur(0)}}
.copy-still .story-copy-arrival>*{animation:none}

@media(max-width:760px){.phone-depth{--device-radius:26px;--screen-radius:21px;--device-gutter:4px;--metal-step:1.5px}.phone-rear-cap{transform:translateZ(-19px)}.phone-ground-shadow:before{filter:blur(12px)}}
@media(prefers-reduced-motion:reduce){.phone-depth,.phone-app-capture{transition:none}.story-copy-arrival>*{animation:none!important}}
.motion-paused .story-copy-arrival>*{animation:none!important}

/* A cropped detail remains a real app panel, never a fabricated phone screen. */
.archive-phone.is-detail{left:53%;top:16%;width:44%}
.phone-depth.is-detail .phone-shell{padding:0;border-radius:14px;background:#fcfcf8;box-shadow:0 22px 48px -20px #193e334a,0 0 0 1px #879b8138}
.phone-depth.is-detail .phone-screen{aspect-ratio:var(--capture-aspect);border-radius:14px;box-shadow:none}
.phone-depth.is-detail .phone-ground-shadow{bottom:-11%}
@media(max-width:760px){.archive-phone.is-detail,.river-manual .archive-phone.is-detail{left:50%;width:48%;top:14%}.phone-depth.is-detail .phone-shell,.phone-depth.is-detail .phone-screen{border-radius:9px}}