/*
 * Home page on desktop: every scene is exactly one screen and the page snaps from slide to slide.
 * On phones, tablets and short windows none of this applies and the page scrolls normally.
 * Keep the media query in sync with SNAP in public/js/lab.js.
 */

@media (min-width: 901px) and (min-height: 640px) {
    html { scroll-snap-type: y mandatory; }

    html .scene {
        height: 100svh;
        min-height: 0;
        overflow: hidden;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    html .scene + .scene,
    html .scene.s-tool { margin-top: 0; padding: 0; }

    /* the picture fills its own screen instead of sticking while a tall scene scrolls past */
    .bg { position: absolute; inset: 0; height: auto; margin: 0; opacity: 1; }

    html .scene .content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100svh;
        min-height: 0;
        padding-top: 92px;
        padding-bottom: 56px;
    }

    /* headlines scale with the height of the screen too, so a scene never outgrows it */
    .s-cosmos .content { justify-content: flex-end; padding-top: clamp(96px, 14svh, 150px); padding-bottom: clamp(48px, 9svh, 100px); }
    .s-cosmos h1 { font-size: min(7.6vw, 17svh); }

    .s-structure h2,
    .s-machine h2,
    .s-code h2 { font-size: min(7vw, 12.5svh); }

    /* translated headlines are longer */
    html:not([lang="en"]) .s-machine h2 { font-size: min(5.6vw, 10svh); max-width: 18ch; }
    html:not([lang="en"]) .s-structure h2,
    html:not([lang="en"]) .s-code h2 { font-size: min(6vw, 11svh); }

    .verbs { margin-top: 5svh; font-size: min(6vw, 11svh); }
    .listing { margin-top: 5svh; }

    .s-unknown h2 { font-size: min(4.8vw, 8.8svh); max-width: 22ch; }
    .s-unknown .eyebrow { margin-bottom: 2.5svh; }
    .questions { margin-top: 4.5svh; gap: 2.6svh; }
    .questions li { font-size: min(3vw, 4.6svh); }
    .finale { margin-top: 4svh; font-size: min(9vw, 14svh); }
    .s-unknown .stage { transform: translate3d(calc(var(--mx, 0) * -10px), calc(var(--p, 0) * -4cqh + var(--my, 0) * -8px), 0) scale(1.06); }

    /* ---- interactive scenes: heading on the left, the toy on the right ---- */
    html .scene.s-tool .content {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        column-gap: clamp(32px, 4vw, 72px);
        align-content: center;
        align-items: center;
    }

    .s-tool h2 { font-size: min(4.6vw, 9svh); }
    .s-tool .lede { margin-top: 2.4svh; }
    .s-tool .eyebrow { margin-bottom: 2.4svh; }
    .s-tool .panel { margin-top: 0; }

    .tool-head .you-form { margin-top: 4svh; }

    .scale-read { min-height: 0; padding-top: clamp(18px, 3svh, 36px); }
    .scale-exp { font-size: min(5.6vw, 10svh); }
    .scale-read h3 { margin-top: 1.4svh; }

    /* the results are visible from the start (dashes) so the slide never looks empty */
    .you-out[hidden] { display: block; opacity: .38; pointer-events: none; }
    .you-out[hidden] #you-copy { visibility: hidden; }
    .you-out { margin-top: 0; }
    .stats { grid-template-columns: repeat(2, 1fr); }
    .stat { gap: 6px; padding: clamp(10px, 1.8svh, 22px) clamp(14px, 1.8vw, 26px); }
    .stat dd { font-size: min(2.2vw, 4.4svh); }
    .stats-note { margin: 1.6svh 0 1.2svh; font-size: .8rem; }

    #lab-canvas { aspect-ratio: auto; height: clamp(160px, 31svh, 380px); }
    .lab .lab-tabs { margin-bottom: 1.4svh; }
    .lab-ctl { gap: 8px; padding-top: 1.4svh; }
    .lab-note { min-height: 0; font-size: .88rem; }
    .lab { padding: clamp(12px, 1.8svh, 24px) clamp(14px, 2vw, 26px); }

    /* map: heading on top, constellation in the middle, footer at the bottom */
    html .scene.s-map .content { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; }
    .s-map h2 { font-size: min(4.6vw, 8.5svh); max-width: none; }
    .constellation { aspect-ratio: auto; height: clamp(230px, 40svh, 420px); min-height: 0; margin-top: 3svh; }
    .orb { width: min(7.4vw, 12svh); }
    .map-links { margin-top: 2svh; }
    .s-map .foot { margin-top: auto; padding-top: 18px; }
}