/*
 * /demo-new — the WebUI in a phone, driving the 3D gauge.
 *
 * The phone is one <img> of a bezel with the screen punched out, laid over a
 * scrollable element holding the real demo page. Everything about where the
 * screen sits comes from measuring that PNG, so the two stay registered at any
 * size: the frame is 1957 x 3954 and its aperture starts 5.42% in and 1.87%
 * down, running 90.75% wide and 96.03% tall.
 *
 * The camera island sits inside that aperture rather than above it, with its
 * underside 4.61% of the way down — so the UI runs to the very top of the glass
 * and the island overlaps it, which is what makes the notch read as real. The
 * matching safe-area padding is applied to the WebUI in demo-new.js.
 */

:root {
    --dn-screen-x: 5.42%;
    --dn-screen-y: 1.87%;
    --dn-screen-w: 90.75%;
    --dn-screen-h: 96.03%;
}

/* ---- Intro ---- */

.dn-hero { padding: 7rem 1.5rem 2.5rem; }
.dn-hero-inner { max-width: 780px; margin: 0 auto; text-align: center; }

.dn-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--amber, #ff8c00);
    margin-bottom: 1rem;
}

.dn-title {
    font-family: var(--font-display, sans-serif);
    font-size: clamp(1.9rem, 5vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 1.1rem;
}

.dn-lead {
    color: var(--text-muted, #9aa0a6);
    font-size: 1.02rem;
    line-height: 1.75;
    margin: 0;
}

/* ---- Stage ---- */

.dn-stage { padding: 2rem 1.5rem 5rem; }

.dn-stage-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    /* The phone column is sized from the phone, not the other way round. */
    grid-template-columns: minmax(0, 1fr) clamp(260px, 30vw, 340px);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

.dn-gauge {
    /* The gauge stays put while the phone's content scrolls past it, which is
       the whole point of the pairing — you are meant to be watching it. */
    position: sticky;
    top: 12vh;
}

.dn-gauge-note {
    text-align: center;
    /* Clear of the gauge's own caption and glow, so it reads as a note about
       the gauge rather than part of it. */
    margin-top: 2.75rem;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim, #6b7076);
}

/* ---- Phone ---- */

.dn-phone {
    position: relative;
    width: 100%;
    /* The frame's own proportions, so the aperture percentages land true. */
    aspect-ratio: 1957 / 3954;
    margin: 0 auto;
}

.dn-phone-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* Above the screen: the bezel and the camera island overlap the UI the way
       they do on a real phone. Inert, so drags and scrolls reach the screen. */
    z-index: 2;
    pointer-events: none;
    user-select: none;
}

.dn-phone-screen {
    position: absolute;
    left: var(--dn-screen-x);
    top: var(--dn-screen-y);
    width: var(--dn-screen-w);
    height: var(--dn-screen-h);
    z-index: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background: #0d1117;
    /* Matches the aperture's rounded corners closely enough that the UI never
       shows outside the glass. */
    border-radius: 13% / 6%;
    -webkit-overflow-scrolling: touch;

    /*
     * The scroll handoff. This element scrolls first; when it reaches either
     * end the browser passes the gesture on to the page, which is the default
     * for a scrollable box and the reason this needs no scroll-jacking script.
     * Setting 'contain' here would break exactly that.
     */
    overscroll-behavior-y: auto;

    scrollbar-width: none;              /* the phone has no scrollbar */
}

.dn-phone-screen::-webkit-scrollbar { width: 0; height: 0; }

/*
 * The document, scaled.
 *
 * The iframe is laid out at DN_WIDTH (see demo-new.js) — a real phone width —
 * and scaled down to the aperture, rather than being given the aperture's own
 * width. A 300px-wide viewport is narrower than any phone made and the WebUI
 * would lay itself out accordingly; at 390px it picks the breakpoints it was
 * designed for, and scaling is what a phone screen does anyway.
 *
 * The wrapper carries the scaled height, because a transform does not affect
 * layout and the scroll container would otherwise size itself to the unscaled
 * iframe and scroll far too far.
 */
.dn-phone-doc {
    transform-origin: 0 0;
    will-change: transform;
}

.dn-phone-screen iframe {
    display: block;
    border: 0;
    /* Both replaced by the script once the document has measured itself. */
    width: 390px;
    height: 1200px;
    background: #0d1117;
}

/* ---- Outro ---- */

.dn-outro {
    padding: 0 1.5rem 7rem;
}

.dn-outro-inner {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.dn-outro h2 {
    font-family: var(--font-display, sans-serif);
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin: 0 0 0.9rem;
}

.dn-outro p {
    color: var(--text-muted, #9aa0a6);
    line-height: 1.75;
    margin: 0 0 1.6rem;
}

/* The joke lands better as an aside than as another sentence in the paragraph:
   dimmer, smaller, and set apart, so it reads as the tone shift it is. */
.dn-outro .dn-aside {
    margin: -1.1rem 0 1.6rem;
    font-size: 0.86rem;
    font-style: italic;
    color: var(--text-dim, #6b7076);
}

/* ---- Narrow ---- */

@media (max-width: 900px) {
    /*
     * Gauge above, phone below. The gauge stops being sticky here: on a short
     * screen a pinned gauge plus a phone leaves too little of either, and the
     * phone is the thing being touched.
     */
    .dn-stage-inner { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
    .dn-gauge { position: static; }
    /* Roomier than the 320px it started at, without filling the screen edge to
       edge — at 96vw it read as a phone inside a phone. */
    .dn-phone { width: min(360px, 84vw); }
    .dn-stage { padding-left: 1rem; padding-right: 1rem; }
    .dn-hero { padding-top: 5.5rem; }

    /*
     * Bigger than the homepage's gauge, whose narrow-screen caps (320px, and
     * 240px below 480) this would otherwise inherit. There the gauge shares the
     * fold with a headline and two buttons and has to give way; here it is half
     * the page and the thing you swipe, so a 240px target on a phone is both
     * too small to read the dial on and too small to land a thumb on.
     */
    .dn-gauge .hero-gauge-wrap { max-width: min(420px, 88vw); }
}

@media (max-width: 480px) {
    .dn-gauge .hero-gauge-wrap { max-width: min(380px, 90vw); }
    /* The note sits closer once the gauge is wide, or it strands itself. */
    .dn-gauge-note { margin-top: 2.25rem; }
}