/* Desktop: one iPhone, in Apple's frame, stays beside the sections it belongs to; only its screen changes.
   Measured from Apple's iPhone 17 bezel (1350 x 2760): screen 1206 x 2622 at 72, 69 with a 180 corner;
   Dynamic Island 373 x 108 at 488, 111. On phones each section shows its fragment in the flow instead. */
.stage-phone { display: none; }

@media (min-width: 860px) {
  .stage { display: grid; grid-template-columns: 1fr 360px; column-gap: 32px; max-width: 1100px; margin: 0 auto; padding: 0 var(--gutter); }
  .stage > .sec { grid-column: 1; min-height: 88vh; padding-left: 0; padding-right: 0; display: flex; flex-direction: column; justify-content: center; }
  .stage-phone {
    display: block; grid-column: 2; grid-row: 1 / span 9; align-self: start;
    position: sticky; top: calc(var(--nav-h) + (100vh - var(--nav-h) - 736px) / 2); margin-top: var(--section-y);
  }
  .device { position: relative; width: 360px; }
  .device-frame { width: 100%; height: auto; }
  .device .screen { position: absolute; left: 5.333%; top: 2.5%; width: 89.333%; height: 95%; overflow: hidden; border-radius: 14.93% / 6.865%; background: var(--device-black); }
  .slide { position: absolute; inset: 0; transform: translateX(100%); visibility: hidden; }
  .slide.now { transform: none; visibility: visible; }
  .slide.gone, .slide.prev { transform: translateX(-30%); visibility: visible; }
  .slide.next { transform: translateX(100%); visibility: visible; }
  .slide.run { transition: transform var(--t-base) var(--ease); }
  .slide img { width: 100%; height: 100%; }
  .device .island { position: absolute; left: 36.15%; top: 4.02%; width: 27.63%; height: 3.91%; border-radius: 999px; background: var(--device-black); }
  .device .home-bar { position: absolute; left: 34.55%; top: 96.09%; width: 30.9%; height: .54%; border-radius: 999px; background: var(--device-white); }
}

/* Reveal once: opacity and a 12 px rise, 400 ms on the shared curve. Only pieces still below the window start hidden. */
html.reveal .pre { opacity: 0; transform: translateY(12px); }
html.reveal :is(.sec-label, .sec h2, .sec-text, .steps li, .frag, .plan, .faq details, .final .btn, .final .note) {
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
html.reveal .now { transition: none; }

/* The goal ring fills once, in 700 ms. */
.ring-fill { transition: stroke-dasharray var(--t-slow) var(--ease), stroke var(--t-base) var(--ease); }
.ring.fill-start .ring-fill { stroke-dasharray: 0 1; transition: none; }

/* The steps line draws itself as you scroll past it; without scroll timelines it is simply there. */
@supports (animation-timeline: view()) {
  .steps::before { transform-origin: top; animation: draw linear both; animation-timeline: view(); animation-range: entry 20% cover 60%; }
  .statement-text.words span { animation: word linear both; animation-timeline: view(); animation-range: cover calc(25% + var(--w) * 30%) cover calc(35% + var(--w) * 30%); }
}
@keyframes draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes word { from { opacity: .4; } to { opacity: 1; } }

/* Questions: one open at a time; the answer fades in as it opens. */
.faq details[open] .faq-a { animation: answer var(--t-base) var(--ease); }
@keyframes answer { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }