/* ============================================================
   GSAP MARKER LAYER
   ------------------------------------------------------------
   Hand-marker devices drawn on scroll-in via GSAP + ScrollTrigger
   ([js/marker.js]). This file only holds the *resting / initial*
   styling; the SVG overlays are injected and animated in JS using
   native stroke-dasharray/stroke-dashoffset (no paid DrawSVG).

   Reduced motion: marker.js paints the final state with no tween
   (see gsap.matchMedia in js/marker.js). If JS never runs, the
   text still reads cleanly — marks simply don't appear.
   ============================================================ */

/* The wrapped word/phrase is the positioning context for its SVG.
   Scoped to the stroke marks only — tape positions itself absolutely
   and the write marks must keep their own display (e.g. cases__note
   is a centered block <p>). */
[data-mark="oval"],
[data-mark="underline"],
[data-mark="strike"] {
    position: relative;
    display: inline-block;
}

/* Injected SVG overlay — non-interactive, marker-red stroke. */
.mark-svg {
    position: absolute;
    overflow: visible;
    pointer-events: none;
    fill: none;
    stroke: var(--fire-red);
    stroke-linecap: round;
    stroke-linejoin: round;
    z-index: 1;
}

/* NOTE: <svg> is a replaced element, so left+right (or `inset`)
   over-constrains it and the box won't stretch. Always pin with
   left/top + explicit width/height. */

/* --- Oval: ellipse drawn around a keyword ------------------- */
[data-mark="oval"] {
    padding: 0.05em 0.4em;
    z-index: 0;
}
.mark-svg--oval {
    left: -0.06em;
    top: -0.24em;
    width: calc(100% + 0.12em);
    height: calc(100% + 0.42em);
    z-index: -1;                 /* behind the word */
}

/* --- Underline: wavy path under a phrase -------------------- */
.mark-svg--underline {
    left: -2%;
    width: 104%;
    bottom: -0.30em;
    height: 0.5em;
}

/* --- Strike: line through the struck word ------------------- */
/* Keeps the .strike-block / .strike / .replace layout from
   emphasis.css, but suppresses the static CSS bar and holds the
   handscript replacement until JS animates it in. */
/* Gated on .mark-ready (added by marker.js) so the static strike + its
   correction still show if JS never runs. */
.strike-block.mark-ready .strike::after { display: none; }
.strike-block.mark-ready .replace { opacity: 0; }       /* JS reveals it */
.mark-svg--strike {
    left: -0.08em;
    width: calc(100% + 0.16em);
    top: 50%;
    height: 0.62em;
    transform: translateY(-50%);
    z-index: 2;                  /* over the word */
}

/* --- Tape: real element, scaleX from center ---------------- */
[data-mark="tape"] { transform-origin: center center; }