/* ============================================================================
   viz.css — the VizEmbed figure (VIZ, X-R09): poster/canvas swap, framing.
   Owned by the M3 viz port alongside js/viz.js. Token-bound only (F-R01).
   ========================================================================== */

/* The framing matches MediaFrame's raised-surface treatment (MF `Framed`), so an
   animation and a screenshot sitting in the same section read as one family. */
.viz {
    display: grid;
    margin: 0;
    padding: var(--space-sm);
    background-color: var(--surface-raised);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-container);
}

/* Poster and canvas occupy the same grid cell so one fades over the other with
   no absolute positioning. Both carry the ratio, so the figure's height is fixed
   before either loads — the poster's width/height attributes hold CLS at 0
   (MF-R01) and the canvas cannot resize the frame when it starts. */
.viz__poster,
.viz__canvas {
    grid-area: 1 / 1;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-control);
}

.viz__poster {
    object-fit: cover;
    opacity: 1;
    transition: opacity var(--motion-standard) var(--motion-ease);
}

/* Decoration only (VIZ-R04): the figure carries the accessible name, and the
   canvas never takes a pointer or a caret. */
.viz__canvas {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-standard) var(--motion-ease);
}

/* js/viz.js adds viz--live only after the first frame is actually on the canvas,
   so the swap can never flash an empty plot (VIZ-R01). Absent the class — no JS,
   reduced motion, below 768px, off-screen, or waiting behind the 2-embed cap —
   the poster is simply the render (VIZ-R02, VIZ-R03). */
.viz--live .viz__poster {
    opacity: 0;
}

.viz--live .viz__canvas {
    opacity: 1;
}

/* The island never starts under a reduced-motion preference, so this only guards
   a preference flipped while an embed is already live: the swap back to the
   poster happens without a cross-fade. */
@media (prefers-reduced-motion: reduce) {
    .viz__poster,
    .viz__canvas {
        transition: none;
    }
}

/* --- /design/viz review page (removed with the page once the scenes sign off) --- */
.viz-samples {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: var(--space-xl);
}

.viz-samples__item {
    margin: 0;
}

.viz-samples__item figcaption {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
    margin-top: var(--hint-gap);
}