/* Device frames drawn to match the iOS Simulator: a black body with a thin graphite
   edge, round corners, dark side buttons and the Dynamic Island. iPhone Duo unfolds
   with scroll. */

.iphone {
  position: relative; aspect-ratio: 482 / 1000; border-radius: 18.3% / 8.8%;
  padding: .85%;
  background: linear-gradient(150deg, #4a4a4d 0%, #2b2b2e 22%, #1c1c1e 55%, #2e2e31 82%, #48484b 100%);
  box-shadow: 0 60px 110px -40px rgba(10, 18, 32, .55);
}
.iphone .bezel { width: 100%; height: 100%; border-radius: 17.8% / 8.5%; background: #000; padding: 3.4%; }
.iphone .screen { position: relative; width: 100%; height: 100%; border-radius: 14.5% / 6.7%; overflow: hidden; background: #fff; }
.iphone .screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.iphone .island { position: absolute; z-index: 3; top: 1.3%; left: 50%; width: 31%; height: 4.1%; transform: translateX(-50%); background: #000; border-radius: 999px; }
/* Side buttons: action and volume on the left, side button on the right */
.iphone > i { position: absolute; width: 1.05%; background: linear-gradient(90deg, #1f1f21, #4a4a4d 60%, #2a2a2c); border-radius: 2px; }
.iphone > .b1 { left: -0.8%; top: 17.5%; height: 3.6%; }
.iphone > .b2 { left: -0.8%; top: 24%; height: 7%; }
.iphone > .b3 { left: -0.8%; top: 32.5%; height: 7%; }
.iphone > .b4 { right: -0.8%; top: 27%; height: 10.5%; border-radius: 2px; }

/* Story phone: stacked screens that cross-fade */
.story-phone .iphone { height: 100%; width: auto; margin-left: auto; }
.story-phone .sv { opacity: 0; transform: scale(1.04); transition: opacity .6s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.story-phone .sv.on { opacity: 1; transform: none; }
@media (max-width: 900px) { .story-phone .iphone { margin: 0 auto; } }

/* iPhone Duo: the left half swings open as you scroll */
.duosec { position: relative; height: 260vh; background: var(--night); }
.duosec .stage { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(18px, 3.4vh, 40px); padding: 68px 0 64px; overflow: hidden; }
.duosec .copy { text-align: center; z-index: 3; padding: 0 20px; }
.duosec .copy .sub { margin-top: 14px; }
.duosec .copy h2 { color: #fff; }
.duosec .copy .sub { color: var(--mist); }
.duo-wrap { width: min(86vw, 880px, calc((100svh - 420px) * 1.4216)); aspect-ratio: 2853 / 2007; perspective: 2400px; position: relative; }
.duo { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; will-change: transform; }
.duo .half { position: absolute; top: 0; bottom: 0; width: 50%; transform-style: preserve-3d; }
.duo .right { right: 0; transform: translateZ(-3px); }
.duo .left { left: 0; transform-origin: right center; will-change: transform; }
.duo .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; padding: 1.1%; background: linear-gradient(135deg, #4a4a4d, #2b2b2e 22%, #1c1c1e 55%, #3a3a3d 100%); }
.duo .face .glass { position: relative; width: 100%; height: 100%; background: #000; padding: 3.2%; }
.duo .face .pic { width: 100%; height: 100%; background-size: 200% 100%; background-repeat: no-repeat; }
/* Inner screen halves */
.duo .right .face { border-radius: 0 9% 9% 0 / 0 6.4% 6.4% 0; padding-left: 0; }
.duo .right .glass { border-radius: 0 7.8% 7.8% 0 / 0 5.6% 5.6% 0; padding-left: 0; }
.duo .right .pic { background-position: right center; border-radius: 0 6% 6% 0 / 0 4.3% 4.3% 0; }
.duo .left .front { border-radius: 9% 0 0 9% / 6.4% 0 0 6.4%; padding-right: 0; }
.duo .left .front .glass { border-radius: 7.8% 0 0 7.8% / 5.6% 0 0 5.6%; padding-right: 0; }
.duo .left .front .pic { background-position: left center; border-radius: 6% 0 0 6% / 4.3% 0 0 4.3%; }
/* Cover screen on the outside of the left half */
.duo .left .back { transform: rotateY(180deg); border-radius: 9% / 6.4%; }
.duo .left .back .glass { border-radius: 7.8% / 5.6%; }
.duo .left .back .pic { background-size: cover; background-position: center top; border-radius: 6% / 4.3%; }
.duo .hinge { position: absolute; left: 50%; top: 2%; bottom: 2%; width: 2px; margin-left: -1px; background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.18), rgba(255,255,255,0)); z-index: 2; pointer-events: none; opacity: var(--hinge, 0); }
.duo-shadow { position: absolute; left: 10%; right: 10%; bottom: -8%; height: 12%; background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent); filter: blur(10px); z-index: -1; }
.duo-label { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 3; text-align: center; color: var(--mist); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
@media (max-width: 760px) { .duo-wrap { width: min(94vw, calc((100svh - 450px) * 1.4216)); } .duosec { height: 220vh; } }
@media (max-height: 720px) and (min-width: 761px) { .duosec .copy .sub { display: none; } .duo-wrap { width: min(86vw, 880px, calc((100svh - 330px) * 1.4216)); } }
@media (prefers-reduced-motion: reduce) { .duosec { height: auto; } .duosec .stage { position: relative; height: auto; padding: 120px 0; } .duo .left { transform: none !important; } .duo { transform: none !important; } }