/* ==========================================================
   Brokk Hotspot Enhance — overlay for BricksExtras Image Hotspots
   Activate by adding `brk-hotspot-fx` to a wrapper container.
   Per-marker label position is configured via Custom Attributes:
     data-label-x="5%"  data-label-y="12%"  data-label-align="left"
   ========================================================== */

.brk-hotspot-fx {
    --brk-hl-color:   var(--primary, #ffcd00);
    --brk-hl-line:    var(--primary, #ffcd00);
    --brk-hl-text:    var(--white, #fff);
    --brk-hl-bg:      rgba(0, 0, 0, 0.0);
}

/* Hotspots container becomes positioning context */
.brk-hotspot-fx .brxe-ximagehotspots {
    position: relative;
}

/* Hide default popovers (only on frontend, after JS has initialized) */
.brk-hotspot-fx.is-ready .x-marker_popover {
    display: none !important;
}

/* Hide everything BricksExtras renders inside the marker —
 * pin icon, title text, etc. We show our own + via ::after. */
.brk-hotspot-fx .x-marker_marker-icon,
.brk-hotspot-fx .x-marker_marker-title,
.brk-hotspot-fx .x-marker_marker-inner > * {
    display: none !important;
}
.brk-hotspot-fx .x-marker_marker-inner {
    font-size: 0 !important;
    line-height: 0 !important;
}

/* ── Markers ────────────────────────────────────────────── */
.brk-hotspot-fx .x-marker_marker {
    width: 24px !important;
    height: 24px !important;
    min-width: 0 !important;
    background: var(--brk-hl-color) !important;
    border-radius: var(--radius-circle, 50vw) !important;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.10);
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: transform var(--dur-base) ease, box-shadow var(--dur-base) ease;
    z-index: 3;
    isolation: isolate;
}

/* Initial state — invisible until .is-active.
 * Only applies AFTER JS has set up the overlay (.is-ready), so the
 * Bricks editor (where JS is skipped) still shows markers normally. */
.brk-hotspot-fx.is-ready .x-marker {
    opacity: 0;
    transition: opacity 0.4s ease;
    transition-delay: calc(var(--i, 0) * 0.08s + 0.6s);
}
.brk-hotspot-fx.is-ready.is-active .x-marker {
    opacity: 1;
}

/* Disable BricksExtras' built-in pulse (it uses ::before AND ::after on
 * .x-marker_marker — we need ::after for the number, and their animation
 * would otherwise fade the digit in and out). */
.brk-hotspot-fx .x-marker_marker::before {
    content: none !important;
}

/* Marker number (1-9 etc) — set via data-num on the button.
 * Override BricksExtras animation/background/opacity that would otherwise
 * be inherited via lower-specificity rules. */
.brk-hotspot-fx .x-marker_marker::after {
    content: attr(data-num);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-condensed);
    font-size: 13px;
    font-weight: 700;
    color: #0A0A0A;
    line-height: 1;
    pointer-events: none;
    z-index: 2;
    animation: none !important;
    background: transparent !important;
    opacity: 1 !important;
    width: 100%;
    height: 100%;
}

/* Pulse via box-shadow on the marker itself.
 * Box-shadow paints outside the element's bounds and can NEVER cover
 * the marker's content (number ::after), so the digit stays crisp. */
.brk-hotspot-fx.is-active .x-marker_marker {
    animation: brkHlPulse 1.8s ease-out infinite;
    animation-delay: calc(var(--i, 0) * 0.08s + 1.2s);
}

.brk-hotspot-fx .x-marker_marker:hover {
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 0 0 0 5px rgba(0,0,0,0.15);
}


/* ── SVG line overlay ────────────────────────────────────── */
.brk-hotspot-fx__lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: visible;
}

.brk-hotspot-fx__line {
    stroke: var(--brk-hl-line);
    stroke-width: 0.18;
    stroke-linecap: round;
    fill: none;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 1s ease-out;
    transition-delay: calc(var(--i, 0) * 0.08s);
}
.brk-hotspot-fx.is-active .brk-hotspot-fx__line {
    stroke-dashoffset: 0;
}

/* ── Cap (half target icon at line endpoint) ────────────── */
.brk-hl-cap {
    --brk-cap-size: clamp(32px, 1.5vw + 12px, 46px);
    --brk-cap-shift: calc(var(--brk-cap-size) / 4);
    position: absolute;
    left: var(--x, 0);
    top:  var(--y, 0);
    width:  var(--brk-cap-size);
    height: var(--brk-cap-size);
    transform: translate(-50%, -50%);     /* centered on anchor */
    pointer-events: none;
    color: var(--brk-hl-color);
    opacity: 0;
    transition: opacity 0.3s ease;
    transition-delay: calc(var(--i, 0) * 0.08s + 0.85s);
    z-index: 3;
}

.brk-hotspot-fx.is-active .brk-hl-cap { opacity: 1; }

.brk-hl-cap svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Clip half away — round side faces toward the machine.
 * Cap is shifted so the LINE endpoint (lx, ly) sits at the geometric
 * centre of the visible half — i.e. inside the bullseye. */

/* Clip half away — round side faces the machine.
 * Cap shifted so the line endpoint (lx, ly) sits at the geometric
 * centre of the VISIBLE half (i.e. inside the bullseye). */

/* Label on LEFT side of image — cap shows RIGHT half (toward machine on right) */
.brk-hl-cap--left   {
    clip-path: inset(0 0 0 50%);
    transform: translate(calc(-50% - var(--brk-cap-shift)), -50%);
}
/* Label on RIGHT side — cap shows LEFT half (toward machine on left) */
.brk-hl-cap--right  {
    clip-path: inset(0 50% 0 0);
    transform: translate(calc(-50% + var(--brk-cap-shift)), -50%);
}
/* Label ABOVE marker — cap shows BOTTOM half (toward machine below) */
.brk-hl-cap--top    {
    clip-path: inset(50% 0 0 0);
    transform: translate(-50%, calc(-50% - var(--brk-cap-shift)));
}
/* Label BELOW marker — cap shows TOP half (toward machine above) */
.brk-hl-cap--bottom {
    clip-path: inset(0 0 50% 0);
    transform: translate(-50%, calc(-50% + var(--brk-cap-shift)));
}
.brk-hl-cap--center { clip-path: none; }

/* ── Labels (perimeter) ─────────────────────────────────── */
.brk-hotspot-fx__labels {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
}

.brk-hl {
    position: absolute;
    left: var(--x, 0);
    top:  var(--y, 0);
    pointer-events: auto;
    color: var(--brk-hl-text);
    text-align: left;
    opacity: 0;
    transition: opacity 0.4s ease;
    transition-delay: calc(var(--i, 0) * 0.08s + 0.9s);
    background: rgba(0, 0, 0, 0.35);
    /* Padding scales with viewport between 1280px and 2400px */
    padding: clamp(8px, 0.6vw + 2px, 14px) clamp(10px, 0.7vw + 2px, 16px);
    border-radius: 2px;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.brk-hotspot-fx.is-active .brk-hl {
    opacity: 1;
}

/* Position the BLOCK relative to (lx, ly). Text width is clamped to
 * the available horizontal space so it never overflows the image. */
.brk-hl--left {
    transform: translate(calc(-100% - 28px), -50%);
    max-width: calc(var(--x) - 50px);
}
.brk-hl--right {
    transform: translate(28px, -50%);
    max-width: calc(100% - var(--x) - 50px);
}
.brk-hl--top {
    transform: translate(-50%, calc(-100% - 28px));
    text-align: center;
    max-width: 280px;
}
.brk-hl--bottom {
    transform: translate(-50%, 28px);
    text-align: center;
    max-width: 280px;
}
.brk-hl--center {
    transform: translate(-50%, 28px);
    text-align: center;
    max-width: 280px;
}

.brk-hl__title {
    display: block;
    margin: 0 0 clamp(4px, 0.3vw + 2px, 8px);
    padding: 0;
    font-family: var(--font-condensed);
    /* Fluid scale between 1280px and 2400px viewport */
    font-size: clamp(1.3rem, 0.45vw + 0.9rem, 1.8rem);
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: inherit;
    background: none;
    border: 0;
    text-align: inherit;
}

.brk-hl__desc {
    margin: 0;
    padding: 0;
    font-family: "Geist", -apple-system, sans-serif;
    font-size: clamp(1.05rem, 0.35vw + 0.75rem, 1.5rem);
    line-height: 1.5;
    color: rgba(255,255,255,0.85);
}

/* ── Stacked list (responsive fallback below 1280px) ─────── */
.brk-hotspot-fx__stacked-wrap {
    display: none;                       /* shown via @media below */
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: var(--space-l, 48px) var(--gutter, 24px);
    box-sizing: border-box;
}

.brk-hotspot-fx__stacked {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-m, 24px) var(--space-l, 48px);
}

.brk-hotspot-fx__stacked li {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 16px;
    align-items: start;
}

.brk-hotspot-fx__stacked .num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-circle, 50vw);
    background: var(--brk-hl-color);
    color: var(--text-dark);
    font-family: var(--font-condensed);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

.brk-hotspot-fx__stacked h3 {
    margin: 0 0 6px;
    padding: 0;
    font-size: var(--h4);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: var(--text-dark);
}

.brk-hotspot-fx__stacked p {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.5;
    color: var(--text-dark-muted);
}

/* ── Per-marker dismiss (reverse order: label → cap → line) ──
 * Triggered by clicking a marker. Each affected element gets
 * .is-dismissed and fades out in sequence. Click again to restore. */

/* Reverse order: label → cap → line */

/* Label fades first */
.brk-hl.is-dismissed {
    opacity: 0 !important;
    transition-delay: 0s !important;
}

/* Cap fades second */
.brk-hl-cap.is-dismissed {
    opacity: 0 !important;
    transition-delay: 0.25s !important;
}

/* Line retracts last */
.brk-hotspot-fx__line.is-dismissed {
    stroke-dashoffset: 100 !important;
    transition-delay: 0.5s !important;
}

/* Marker itself stays visible & clickable so the user can re-open it */

/* ── Pulse keyframes ─────────────────────────────────────────
 * The marker has transform: translate(-50%, -50%) for positioning, so
 * keep that constant and animate only the box-shadow (outer glow ring).
 * Base shadow (3px dark) is preserved in all keyframes. */
@keyframes brkHlPulse {
    0% {
        box-shadow: 0 0 0 3px rgba(0,0,0,0.10),
                    0 0 0 0   rgba(255, 198, 0, 0.55);
    }
    70% {
        box-shadow: 0 0 0 3px rgba(0,0,0,0.10),
                    0 0 0 18px rgba(255, 198, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 3px rgba(0,0,0,0.10),
                    0 0 0 18px rgba(255, 198, 0, 0);
    }
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .brk-hotspot-fx .x-marker,
    .brk-hotspot-fx .brk-hl,
    .brk-hotspot-fx__line {
        transition: none !important;
        opacity: 1;
        stroke-dashoffset: 0;
    }
    .brk-hotspot-fx .x-marker_marker {
        animation: none !important;
    }
}

/* ── Bricks Builder editor ─────────────────────────────────
 * In the editor we want default behaviour so markers can be
 * placed visually. Disable our effects, keep markers visible.
 * ─────────────────────────────────────────────────────────── */
body.bricks-is-builder .brk-hotspot-fx .x-marker,
body.bricks-is-frontend.bricks-is-builder .brk-hotspot-fx .x-marker {
    opacity: 1 !important;
    transition: none !important;
}
body.bricks-is-builder .brk-hotspot-fx .x-marker_popover,
body.bricks-is-builder .brk-hotspot-fx .x-marker_marker-icon {
    display: revert !important;
}
body.bricks-is-builder .brk-hotspot-fx__lines,
body.bricks-is-builder .brk-hotspot-fx__labels {
    display: none !important;
}
body.bricks-is-builder .brk-hotspot-fx .x-marker_marker::after,
body.bricks-is-builder .brk-hotspot-fx .x-marker_marker::before {
    display: none !important;
}

/* ── Responsive: below 1280px → stacked list under image ─── */
@media (max-width: 1279px) {
    .brk-hotspot-fx__labels,
    .brk-hotspot-fx__lines {
        display: none !important;
    }
    .brk-hotspot-fx__stacked-wrap {
        display: block;
    }
    .brk-hotspot-fx .x-marker {
        opacity: 1 !important;
    }
}

@media (max-width: 600px) {
    .brk-hotspot-fx__stacked {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════════════
   Scrolldrivet läge — opt-in med brk-hotspot-fx--scroll
   ══════════════════════════════════════════════════════════

   Standardläget tänder allt på en gång när sektionen kommer i vy och låter en
   CSS-fördröjning per index sköta trappan. Här styr scrollpositionen i stället:
   JS skriver --brk-hl-progress (0..1) på roten medan sektionen passerar
   fönstret, och varje hotspot räknar ut sitt eget fönster ur sitt index.

   Låst till scrollen, inte utlöst av den: scrollar man upp igen slocknar de i
   omvänd ordning. Samma princip som texttoningen i hero-sektionen, så de två
   effekterna på sajten beter sig likadant.

   Fyra klasser i väljaren för att väga tyngre än .is-active-reglerna ovan
   oavsett ordning i filen. */

.brk-hotspot-fx.brk-hotspot-fx--scroll.is-ready .brk-hotspot-fx__line,
.brk-hotspot-fx.brk-hotspot-fx--scroll.is-ready .brk-hl-cap,
.brk-hotspot-fx.brk-hotspot-fx--scroll.is-ready .x-marker,
.brk-hotspot-fx.brk-hotspot-fx--scroll.is-ready .brk-hl {
    /* Sekvensen upptar --brk-hl-spread av sträckan, så den är klar innan
       sektionen scrollat ur bild. Varje punkt tar --brk-hl-span att tona in,
       vilket är längre än avståndet mellan starterna — fönstren överlappar,
       annars blir det stackato.

       --brk-hl-from skjuter fram hela sekvensen. Utan den startade punkt 1
       redan när sektionen började komma in i fönstret, och eftersom sektionen
       bara är någon procent högre än fönstret var de fyra vänstra färdiga
       innan man hunnit titta på dem — uppmätt: när etikett 3, 4 och 5 stod
       mitt i fönstret låg de redan på opacitet 1. Med 0.25 börjar trappan när
       diagrammet är på plats och syns i sin helhet.

       0.5 på spread: sista punkten börjar vid 69% och är framme vid 89%.
       Med 0.62 låg den på 80-100% och hann inte bli klar innan sektionen
       scrollat ur bild. */
    --n:      var(--brk-hl-count, 9);
    --from:   var(--brk-hl-from, 0.25);
    --spread: var(--brk-hl-spread, 0.5);
    --span:   var(--brk-hl-span, 0.2);
    --start:  calc(var(--from) + var(--i, 0) / var(--n) * var(--spread));
    --t: clamp(0, calc((var(--brk-hl-progress, 0) - var(--start)) / var(--span)), 1);
    /* Ease-out, samma kurva som texttoningen. */
    --e: calc(1 - (1 - var(--t)) * (1 - var(--t)));

    /* Scrollen är klockan. En transition ovanpå hade lagt en andra tidsaxel på
       samma rörelse och gjort den seg och efterhängsen vid snabb scroll. */
    transition: none;
    transition-delay: 0s;
}

.brk-hotspot-fx.brk-hotspot-fx--scroll.is-ready .brk-hl-cap,
.brk-hotspot-fx.brk-hotspot-fx--scroll.is-ready .brk-hl {
    opacity: var(--e);
}

.brk-hotspot-fx.brk-hotspot-fx--scroll.is-ready .brk-hotspot-fx__line {
    stroke-dashoffset: calc((1 - var(--e)) * 100);
}

/* ── Nålat läge ──────────────────────────────────────────────────────────
   Sektionen får brk-hotspot-track och blir spåret; containern med
   brk-hotspot-fx--pin står still medan spåret passerar. Då spelar det ingen
   roll hur sektionens höjd förhåller sig till fönstrets: diagrammet står
   stilla och syns i sin helhet medan de nio tänds.

   Utan nålning måste --brk-hl-from kompensera för att sektionen och fönstret
   råkar vara ungefär lika höga, och den kompromissen spricker så fort någon
   ändrar höjden. Här behövs den inte — hela spåret tillhör sekvensen, så
   trappan får börja nästan direkt och breda ut sig över nästan hela sträckan.

   Bara över brytpunkten. Under den visas den staplade listan och overlayen är
   dold; en hög nålad sektion där hade blivit ett tomt fält att scrolla förbi. */
@media (min-width: 1280px) {
    .brk-hotspot-track {
        min-height: var(--brk-hl-track-h, 260vh);
        overflow: visible;
    }

    .brk-hotspot-fx--pin {
        position: sticky;
        top: var(--brk-hl-pin-top, 0px);
    }

    /* Boxen får inte bli högre än ytan under headern, annars hamnar nedersta
       etiketten utanför fönstret och nålningen tappar sin poäng — hela
       diagrammet ska synas medan punkterna tänds. Bredden räknas ur bildens
       egen proportion (--brk-hl-ratio, satt av JS) så boxen krymper i takt och
       de procentplacerade etiketterna följer med. */
    .brk-hotspot-fx--pin .brxe-ximagehotspots {
        /* !important: Bricks skriver max-width: 100% på elementet med
           ID-väljare (#brxe-…, ur elementets _widthMax), och en klassregel kan
           per definition inte väga tyngre än ett id. Uppmätt utan den: boxen
           låg kvar på 1585px och 1121px hög trots att regeln fanns. */
        max-width: calc(
            (100vh - var(--brk-hl-pin-top, 0px) - var(--brk-hl-pin-gap, 4rem))
            * var(--brk-hl-ratio, 1.414)
        ) !important;
        margin-inline: auto;
    }

    /* Typografin krymper i takt med boxen. --brk-hl-scale sätts av JS till
       boxens andel av sin obegränsade bredd; utan den blev texten kvar i full
       storlek i en mindre box och etiketterna la sig över varandra. */
    .brk-hotspot-fx--pin .brk-hl__title { font-size: calc(clamp(1.15rem, 0.4vw + 0.85rem, 1.7rem) * var(--brk-hl-scale, 1)); }
    .brk-hotspot-fx--pin .brk-hl__desc  { font-size: calc(clamp(1.05rem, 0.35vw + 0.75rem, 1.5rem) * var(--brk-hl-scale, 1)); }
    .brk-hotspot-fx--pin .brk-hl        { padding: calc(clamp(8px, 0.6vw + 2px, 14px) * var(--brk-hl-scale, 1))
                                                   calc(clamp(10px, 0.7vw + 2px, 16px) * var(--brk-hl-scale, 1)); }

    .brk-hotspot-fx.brk-hotspot-fx--scroll.brk-hotspot-fx--pin.is-ready .brk-hotspot-fx__line,
    .brk-hotspot-fx.brk-hotspot-fx--scroll.brk-hotspot-fx--pin.is-ready .brk-hl-cap,
    .brk-hotspot-fx.brk-hotspot-fx--scroll.brk-hotspot-fx--pin.is-ready .x-marker,
    .brk-hotspot-fx.brk-hotspot-fx--scroll.brk-hotspot-fx--pin.is-ready .brk-hl {
        --from:   var(--brk-hl-from, 0.06);
        --spread: var(--brk-hl-spread, 0.72);
    }
}

/* Markörprickarna hör till samma trappa. De tonas normalt in av .is-active,
   som scrolläget aldrig sätter — utan den här regeln ritades linjerna ut mot
   en tom punkt, uppmätt: etiketter och linjer syntes men de numrerade
   prickarna saknades helt.

   Pulsen kommer efter att punkten är helt framme, inte under intoningen. */
.brk-hotspot-fx.brk-hotspot-fx--scroll.is-ready .x-marker {
    opacity: var(--e);
}

.brk-hotspot-fx.brk-hotspot-fx--scroll.is-ready .x-marker_marker {
    animation: brkHlPulse 1.8s ease-out infinite;
    animation-delay: 0s;
    animation-play-state: paused;
}

/* Under brytpunkten visas den staplade listan och overlayen är dold; då ska
   inget scrollberoende gälla. */
@media (max-width: 1279px) {
    .brk-hotspot-fx.brk-hotspot-fx--scroll.is-ready .brk-hl-cap,
    .brk-hotspot-fx.brk-hotspot-fx--scroll.is-ready .x-marker,
    .brk-hotspot-fx.brk-hotspot-fx--scroll.is-ready .brk-hl {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .brk-hotspot-fx.brk-hotspot-fx--scroll.is-ready .brk-hl-cap,
    .brk-hotspot-fx.brk-hotspot-fx--scroll.is-ready .x-marker,
    .brk-hotspot-fx.brk-hotspot-fx--scroll.is-ready .brk-hl {
        opacity: 1;
    }
    .brk-hotspot-fx.brk-hotspot-fx--scroll.is-ready .brk-hotspot-fx__line {
        stroke-dashoffset: 0;
    }
}

/* ══════════════════════════════════════════════════════════
   v2 (2026-10-21) — klassen brk-hotspot-fx--v2 på containern
   (påslagen på "What is a demolition robot?"). Kundens synpunkter: rutorna låg för
   långt ut mot kanterna, siffrorna var otydliga, långa streck drog
   ut på animeringen.
   - Rutorna i två kolumner inom innehållsbredden (JS: bindLayoutV2).
   - Markörerna 32 px med mörk ring, siffran även i rutans rubrik.
   - Ingen puls (rörelseregel 6: högst en loop per vy).
   - Allt tonas in i ett steg, ca 250 ms (tidigare ca 2 s).
   ══════════════════════════════════════════════════════════ */

.brk-hotspot-fx--v2 {
    --brk-hl-col-px: 300;
}

/* Markör */
.brk-hotspot-fx.brk-hotspot-fx--v2 .x-marker_marker {
    width: 32px !important;
    height: 32px !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--neutral) 70%, transparent);
}
.brk-hotspot-fx.brk-hotspot-fx--v2 .x-marker_marker::after {
    font-size: 1.6rem;
    color: var(--text-dark);
}
.brk-hotspot-fx.brk-hotspot-fx--v2.is-active .x-marker_marker {
    animation: none;
}

/* Rutor */
.brk-hotspot-fx--v2 .brk-hl {
    transform: none;
    max-width: none;
    box-sizing: border-box;
    text-align: left;
    background: color-mix(in srgb, var(--neutral) 62%, transparent);
    border-radius: var(--radius-s);
}
.brk-hotspot-fx--v2 .brk-hl__title {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}
.brk-hotspot-fx--v2 .brk-hl__num {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: var(--radius-circle);
    background: var(--brk-hl-color);
    color: var(--text-dark);
    font-size: 1.2rem;
    line-height: 1;
}

/* Animering: allt i ett steg (Anders 2026-10-21: "korta tempot, låt allt tonas in
   i ett steg"). Siffror, streck och rutor samtidigt, ingen fördröjning, ca 250 ms.
   Skalningen sitter på cirkeln, inte på .x-marker: scale (även 1) ger omslaget en
   egen staplingskontext, och då hamnade cirklarna under bilden. */
.brk-hotspot-fx.brk-hotspot-fx--v2.is-ready .x-marker {
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
    transition-delay: 0s;
}
.brk-hotspot-fx.brk-hotspot-fx--v2.is-ready .x-marker_marker {
    scale: 0.6;
    transition: scale var(--dur-base) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.brk-hotspot-fx.brk-hotspot-fx--v2.is-ready.is-active .x-marker {
    opacity: 1;
}
.brk-hotspot-fx.brk-hotspot-fx--v2.is-ready.is-active .x-marker_marker {
    scale: 1;
}
.brk-hotspot-fx.brk-hotspot-fx--v2 .brk-hotspot-fx__line {
    transition: stroke-dashoffset var(--dur-surface) var(--ease-out);
    transition-delay: 0s;
}
.brk-hotspot-fx.brk-hotspot-fx--v2 .brk-hl-cap,
.brk-hotspot-fx.brk-hotspot-fx--v2 .brk-hl {
    transition: opacity var(--dur-base) var(--ease-out);
    transition-delay: 0s;
}

/* Listan under bilden (under 1280): klick på en siffra markerar listans punkt.
   Utfyllnaden ligger på alla punkter från början (negativ marginal håller
   linjeringen), så inget hoppar när en markeras. */
.brk-hotspot-fx--v2 .brk-hotspot-fx__stacked li {
    margin: calc(var(--space-xs) * -1);
    padding: var(--space-xs);
    border-radius: var(--radius-s);
    transition: background-color var(--dur-fast) var(--ease-out);
}
.brk-hotspot-fx--v2 .brk-hotspot-fx__stacked li.is-current {
    background: var(--bg-ultra-light);
}
.brk-hotspot-fx--v2 .brk-hotspot-fx__stacked .num {
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.brk-hotspot-fx--v2 .brk-hotspot-fx__stacked li.is-current .num {
    background: var(--neutral);
    color: var(--primary);
}
.brk-hotspot-fx--v2 .x-marker.is-current .x-marker_marker {
    box-shadow: 0 0 0 3px var(--white);
}

/* Koppling ruta ↔ markör vid hovring (bara mus) */
@media (hover: hover) and (pointer: fine) {
    .brk-hotspot-fx--v2 .x-marker.is-hot .x-marker_marker {
        box-shadow: 0 0 0 3px var(--white);
    }
    .brk-hotspot-fx--v2 .brk-hl.is-hot {
        background: color-mix(in srgb, var(--neutral) 85%, transparent);
    }
    .brk-hotspot-fx--v2 .brk-hotspot-fx__stacked li.is-hot {
        background: var(--bg-ultra-light);
    }
}

@media (prefers-reduced-motion: reduce) {
    .brk-hotspot-fx.brk-hotspot-fx--v2.is-ready .x-marker,
    .brk-hotspot-fx.brk-hotspot-fx--v2.is-ready .x-marker_marker,
    .brk-hotspot-fx.brk-hotspot-fx--v2 .brk-hotspot-fx__line,
    .brk-hotspot-fx.brk-hotspot-fx--v2 .brk-hl-cap,
    .brk-hotspot-fx.brk-hotspot-fx--v2 .brk-hl {
        transition: opacity var(--dur-base) linear !important;
        transition-delay: 0s !important;
        scale: 1;
        stroke-dashoffset: 0;
    }
}