/* ==========================================================================
   DarkWeb Monitor — illustrative graphics
   --------------------------------------------------------------------------
   Sizing, texture utilities and the motion for html/assets/graphics/*.svg.

   The SVGs colour themselves from the tokens with var(--token, #fallback), so
   they only re-theme when they are *inlined* into the document — that is what
   DWM\Ui\Graphic::render() is for. Referencing one through url() in a
   background-image gives you the fallback (dark-theme) palette instead, so
   the texture utilities below either use a tile whose fallback is neutral
   enough for both themes, or drive the colour through mask-image.

   Nothing here declares a raw colour: every value comes from tokens.css or is
   derived from one with color-mix().
   ========================================================================== */

/* --- the inline graphic --------------------------------------------------- */

.dwm-graphic {
    display: block;
    width: 100%;
    height: auto;
    /* the illustrations stroke their neutral parts with currentColor */
    color: var(--text-dim);
}

/* A placeholder stands in for a screenshot, so it has to reserve exactly the
   space the real 16:9 image would have taken or the card grid reflows when a
   capture lands. */
.dwm-graphic--shot {
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
}

/* Squares and near-squares are placed by their container; capping them stops a
   grid cell from stretching one to an absurd size on a wide viewport. */
.dwm-graphic--state,
.dwm-graphic--empty {
    max-width: 16rem;
    margin-inline: auto;
}

.dwm-graphic--decor {
    max-width: none;
}

/* --- texture utilities ---------------------------------------------------- */

/* Circuit trace field. The tile's edge crossings match, so it repeats without
   a seam; 80px keeps the motif legible without turning into wallpaper. */
.tex-circuit {
    background-image: url('../graphics/pattern-circuit.svg');
    background-repeat: repeat;
    background-size: 80px 80px;
}

/* Contour field. `slice` on the SVG means it crops rather than distorts, so a
   wide shallow panel still shows whole rings. */
.tex-topo {
    background-image: url('../graphics/pattern-topo.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* CRT scanlines. Driven through a mask so the rule colour is a token and the
   overlay inverts correctly in the light theme instead of staying white. */
.tex-scanlines {
    position: relative;
}

.tex-scanlines::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-color: var(--text);
    opacity: .045;
    -webkit-mask-image: url('../graphics/overlay-scanline.svg');
    mask-image: url('../graphics/overlay-scanline.svg');
    -webkit-mask-size: 3px 3px;
    mask-size: 3px 3px;
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
}

/* The light theme is a bright surface: the same alpha reads as dirt rather
   than as a CRT, so it is halved. */
[data-theme='light'] .tex-scanlines::after {
    opacity: .022;
}

/* --- hero backdrop -------------------------------------------------------- */

/* Inlined, absolutely positioned behind the hero copy. It is aria-hidden and
   never receives pointer events, so it cannot eat a click on the CTA. */
.hero-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* --- divider -------------------------------------------------------------- */

.rule-prompt {
    display: block;
    width: 100%;
    max-width: 60rem;
    height: 1.5rem;
    margin: clamp(1.5rem, 4vw, 2.75rem) auto;
    color: var(--border);
}

/* --- motion --------------------------------------------------------------- */

/* Opt in rather than opt out: with reduced motion requested, or in a browser
   that does not report a preference, the graphics are simply still. */
@media (prefers-reduced-motion: no-preference) {

    .dwm-graphic .g-spin {
        transform-box: view-box;
        animation: dwm-graphic-spin 1.4s linear infinite;
    }

    /* transform-origin is in the SVG's own user units, so it has to match the
       centre of each ring rather than being expressed as a percentage. */
    .dwm-graphic--shot-pending .g-spin { transform-origin: 160px 83px; }
    .dwm-graphic--state-waiting .g-spin { transform-origin: 80px 90px; }

    .dwm-graphic .g-caret,
    .rule-prompt .g-caret {
        animation: dwm-graphic-caret 1.1s steps(1, end) infinite;
    }
}

@keyframes dwm-graphic-spin {
    to { transform: rotate(360deg); }
}

@keyframes dwm-graphic-caret {
    0%, 49%  { opacity: .75; }
    50%, 99% { opacity: .12; }
}

/* --- print ---------------------------------------------------------------- */

/* Texture costs toner and adds nothing on paper; the illustrations themselves
   still carry the message. */
@media print {
    .tex-circuit,
    .tex-topo { background-image: none; }
    .tex-scanlines::after,
    .hero-backdrop { display: none; }
}