/* Setup page: the four steps, acted out by a phone and a kitchen tablet.
   .setup-motion  WebGL and motion allowed: one sticky stage plays the steps as you scroll (assets/js/setup-anim.js).
   .setup-static  Reduced motion or no WebGL: one still frame per step, beside (or under) its text. */

.setup-frame {
  position: relative; overflow: hidden; border-radius: 28px;
  background: radial-gradient(120% 90% at 50% 38%, #FFFFFF 0%, var(--steel) 62%, #E9E2D8 100%);
  box-shadow: inset 0 0 0 1px rgba(46, 42, 38, 0.05);
}
.setup-tag { margin: 0; color: var(--ink-3); font-size: 0.8125rem; font-weight: 700; }
.setup-stage { display: none; }

/* ---------- static frames ---------- */
.setup-note { margin-bottom: 18px; }
.step-art { grid-column: 1 / -1; margin-top: 24px; aspect-ratio: 1; }
.step-art img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 861px) {
  .setup-static .step { grid-template-columns: 88px minmax(0, 1fr) minmax(0, 1.1fr); gap: 0 clamp(24px, 3vw, 48px); align-items: center; }
  .setup-static .step-art { grid-column: 3; grid-row: 1; margin-top: 0; }
}

/* ---------- the scroll stage ---------- */
.setup-motion .step-art, .setup-motion .setup-note { display: none; }
.setup-motion .setup-stage { display: block; position: sticky; z-index: 2; }
.setup-motion .setup-frame { height: 100%; }
.setup-stage canvas, .setup-poster { position: absolute; inset: 0; width: 100%; height: 100%; }
.setup-poster { object-fit: contain; transition: opacity 500ms ease; }
.setup-stage canvas { opacity: 0; transition: opacity 500ms ease; }
.setup-ready .setup-stage canvas { opacity: 1; }
.setup-ready .setup-poster { opacity: 0; }
.setup-stage .setup-tag { position: absolute; left: 20px; bottom: 14px; z-index: 1; }
.setup-motion .step::before { transition: color 300ms ease; }
.setup-motion .step.on::before { color: var(--coral); }
.setup-motion .step { align-content: center; }

@media (min-width: 861px) {
  .setup-motion .setup-grid {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 clamp(32px, 4vw, 64px);
    --stage-h: min(680px, calc(100vh - var(--nav-h) - 48px));
  }
  .setup-motion .setup-steps { grid-column: 1; grid-row: 1; padding-bottom: 38vh; }
  .setup-motion .setup-stage {
    grid-column: 2; grid-row: 1; align-self: start; height: var(--stage-h);
    top: calc(var(--nav-h) + (100vh - var(--nav-h) - var(--stage-h)) / 2);
  }
  .setup-motion .step { grid-template-columns: 64px minmax(0, 1fr); min-height: 78vh; }
  .setup-motion .step::before { font-size: 3rem; }
}

/* Phones and small tablets: the stage sticks under the nav and the steps scroll up beneath it. */
@media (max-width: 860px) {
  .setup-motion .setup-grid { display: flex; flex-direction: column; }
  .setup-motion .setup-stage {
    order: -1;
    top: var(--nav-h); height: min(46svh, 460px);
    margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) 12px; background: var(--paper);
  }
  .setup-motion .setup-stage::after {
    content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 28px; pointer-events: none;
    background: linear-gradient(var(--paper), rgba(251, 247, 241, 0));
  }
  .setup-motion .setup-frame { border-radius: 22px; }
  .setup-motion .step { min-height: 56svh; }
  .setup-motion .setup-steps { padding-bottom: 8svh; }
  .setup-stage .setup-tag { left: 14px; bottom: 10px; font-size: 0.75rem; }
}

/* ?setupstill=<p>: only the stage, at a fixed size, for rendering the still frames. */
.setup-still body > *:not(main), .setup-still main > *:not(.setup), .setup-still .setup-steps,
.setup-still .setup ~ *, .setup-still .setup .fine, .setup-still .setup .ctas, .setup-still .setup-tag { display: none !important; }
.setup-still body, .setup-still .setup-frame { background: transparent; box-shadow: none; }
.setup-still .setup { padding: 0; }
.setup-still .setup-stage { position: fixed; inset: 0; width: 100vw; height: 100vh; margin: 0; padding: 0; background: transparent; }
.setup-still .setup-stage::after { display: none; }
.setup-still .setup-frame { border-radius: 0; }
.setup-still .setup-poster { display: none; }
.setup-still .setup-stage canvas { opacity: 1; transition: none; }