/* Measured, lossless iPhone bezel. The real app pixels sit below the hardware. */
.iphone-device{position:relative;aspect-ratio:1295/2658;isolation:isolate}
.iphone-device .iphone-frame{position:relative;display:block;width:100%;height:auto;z-index:3;pointer-events:none}
.iphone-device .iphone-screen,
.iphone-device .iphone-screen:first-child{position:absolute;left:4.555985%;top:1.918736%;width:91.042471%!important;height:auto;max-width:none;aspect-ratio:1179/2556;border-radius:10.687023% / 4.929577%;z-index:1;pointer-events:none;transform:none;object-fit:fill}
.iphone-device .iphone-screen.is-active{transform:none}

/* Keep screen pixels out of a filtered intermediate surface.
   A separate rounded silhouette carries the same soft device shadow. */
.device-face.iphone-device,.story-device.iphone-device,.download-device.iphone-device{filter:none}
.iphone-device::before{content:'';position:absolute;inset:.8% 1.8%;border-radius:13% / 6.3%;box-shadow:var(--iphone-shadow);z-index:0;pointer-events:none}
.device-face.iphone-device{--iphone-shadow:13px 28px 28px #3b2e2440}
.story-device.iphone-device{--iphone-shadow:12px 26px 24px #4c362b33}
.download-device.iphone-device{--iphone-shadow:14px 24px 25px #4a352c40}
@media(max-width:700px){.device-face.iphone-device{--iphone-shadow:8px 17px 18px #3b2e2438}}

/* One transform on the complete device preserves frame/screen registration.
   The entrance ends at a small static angle; no perpetual raster resampling. */
.cinematic-hero .hero-art{perspective:none}
.hero-device{perspective:none;transform-style:flat;transition:none;transform-origin:50% 70%;opacity:1}
.cinematic-hero .hero-device.phone-home{
  --phone-pose:perspective(1600px) translate3d(0,0,0) rotateX(1deg) rotateY(8deg) rotateZ(-3deg);
  --entry-x:-55px;--entry-y:120px;--entry-z:-140px;--entry-yaw:26deg;--entry-roll:-12deg;
}
.cinematic-hero .hero-device.phone-counter{
  --phone-pose:perspective(1600px) translate3d(0,0,0) rotateX(-1deg) rotateY(-9deg) rotateZ(3.5deg);
  --entry-x:65px;--entry-y:150px;--entry-z:-160px;--entry-yaw:-29deg;--entry-roll:14deg;
}
.cinematic-hero .hero-device.phone-home,
.cinematic-hero .hero-device.phone-counter{transform:var(--phone-pose)}
.cinematic-hero .device-arrival,.cinematic-hero .device-float{
  transform-style:flat;animation:none!important;transform:none!important;opacity:1!important;
}
html[data-motion=on] .cinematic-hero .hero-device{
  animation:iphone-cinematic-arrive 2.15s cubic-bezier(.16,1,.3,1) .18s backwards;
  animation-play-state:var(--hero-play-state,running);
}
html[data-motion=on] .cinematic-hero .hero-device.phone-counter{animation-duration:2.45s;animation-delay:.38s}
html[data-motion=on][data-hero-intro=waiting] .cinematic-hero .hero-device{animation:none;opacity:0}
@keyframes iphone-cinematic-arrive{
  from{opacity:0;transform:perspective(1600px) translate3d(var(--entry-x),var(--entry-y),var(--entry-z)) rotateX(8deg) rotateY(var(--entry-yaw)) rotateZ(var(--entry-roll))}
  35%{opacity:1}
  to{opacity:1;transform:var(--phone-pose)}
}

.story-device.phone-feature,.story-device.phone-feature:hover{transform:perspective(1800px) rotateY(5deg) rotateZ(-2deg);transition:none}
.story-device .story-screen{transition:opacity .45s var(--ease-out)}
.download-device.iphone-device{transform:perspective(1800px) rotateY(-6deg) rotateZ(3deg)}
html[data-motion=on] .download-device.iphone-device{animation:none}

@media(max-width:700px){
  .cinematic-hero .hero-device.phone-home{
    left:0;--phone-pose:perspective(1600px) translate3d(0,0,0) rotateX(0deg) rotateY(4deg) rotateZ(-2deg);
    --entry-x:-25px;--entry-y:80px;--entry-z:-80px;--entry-yaw:18deg;--entry-roll:-9deg;
  }
  .cinematic-hero .hero-device.phone-counter{
    right:0;--phone-pose:perspective(1600px) translate3d(0,0,0) rotateX(0deg) rotateY(-5deg) rotateZ(2.5deg);
    --entry-x:30px;--entry-y:105px;--entry-z:-100px;--entry-yaw:-20deg;--entry-roll:10deg;
  }
  .story-device.phone-feature,.story-device.phone-feature:hover{transform:perspective(1800px) rotateY(3deg) rotateZ(-1.5deg)}
  .download-device.iphone-device{transform:perspective(1800px) rotateY(-3deg) rotateZ(2deg)}
}
@media(prefers-reduced-motion:reduce){
  html:not([data-motion=on]) .cinematic-hero .hero-device{animation:none;opacity:1}
}