/* Hero world map — resources/views/home/partials/hero-map.blade.php + public/js/pages/hero-map.js.
   Tokens only. Animated parts use transform/opacity (composited) except the short arc draws (SVG stroke-dashoffset).
   Without .is-live (no JS / reduced motion) the figure shows a complete, static composition. */

.on-hmap {
    --hm-dot: color-mix(in srgb, var(--on-ink) 36%, transparent);
    --hm-arc: color-mix(in srgb, var(--on-brand) 65%, var(--on-brand-strong));
    --hm-spark: #fff;
    --hm-hot: var(--on-brand-strong);
    --hm-ease: cubic-bezier(.2, .8, .2, 1);
    position: relative; margin: 0; container-type: inline-size; isolation: isolate;
}
[data-bs-theme="dark"] .on-hmap { --hm-dot: color-mix(in srgb, var(--on-ink) 31%, transparent); --hm-spark: #eafcff; --hm-arc: var(--on-brand); }

.on-hmap-stage { position: relative; width: 100%; aspect-ratio: 1000 / 560; margin: 14cqw 0 18cqw; }

/* soft light behind Riyadh + the continents */
.on-hmap-aura {
    position: absolute; inset: -8% -4%; z-index: -1; pointer-events: none;
    background:
        radial-gradient(34% 44% at 57% 41%, color-mix(in srgb, var(--on-brand) 26%, transparent), transparent 70%),
        radial-gradient(60% 70% at 50% 45%, color-mix(in srgb, var(--on-blue) 9%, transparent), transparent 72%);
}

/* the dot-matrix world: a gradient painted through the precomputed dot mask */
.on-hmap-dots {
    position: absolute; inset: 0;
    background:
        radial-gradient(9% 15% at 57.1% 40.8%, var(--on-brand) 0%, color-mix(in srgb, var(--on-brand) 60%, transparent) 55%, transparent 100%),
        radial-gradient(44% 56% at 57% 41%, color-mix(in srgb, var(--on-brand) 70%, transparent), transparent 78%),
        linear-gradient(100deg, color-mix(in srgb, var(--on-blue) 22%, var(--hm-dot)) 0%, var(--hm-dot) 40%, var(--hm-dot) 100%);
    -webkit-mask: var(--hm-map) center / 100% 100% no-repeat;
    mask: var(--hm-map) center / 100% 100% no-repeat;
}

.on-hmap-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.on-hmap-svg .s0 { stop-color: var(--hm-spark); stop-opacity: .95; }
.on-hmap-svg .s1 { stop-color: var(--hm-arc); stop-opacity: .45; }
.on-hmap-svg .s2 { stop-color: var(--hm-arc); stop-opacity: 0; }

/* arcs */
.hm-arc path { fill: none; stroke-linecap: round; }
.hm-arc-glow { stroke: var(--hm-arc); stroke-width: 6; opacity: .1; }
.hm-arc-line { stroke: var(--hm-arc); stroke-width: 1.4; opacity: .62; }
.hm-arc-comet { stroke: var(--hm-spark); stroke-width: 2.6; stroke-dasharray: .16 2; stroke-dashoffset: .16; opacity: 0; }
.is-live .hm-arc-line, .is-live .hm-arc-glow { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.is-live .hm-arc { transition: opacity .9s ease; }
.is-live.is-fading .hm-arc { opacity: 0; }

/* city nodes */
.hm-node circle { transform-box: fill-box; transform-origin: center; }
.hm-node-dot { fill: var(--on-surface); stroke: var(--hm-arc); stroke-width: 1.8; }
.hm-node-halo { fill: var(--hm-arc); opacity: .16; }
.hm-node-burst { fill: none; stroke: var(--hm-arc); stroke-width: 1.4; opacity: 0; }
.is-live .hm-node-dot { transition: fill .4s ease; }
.is-live .hm-node.is-hit .hm-node-dot { fill: var(--hm-arc); }

/* travelling light */
.hm-spark { opacity: 0; }
.hm-spark-core { fill: var(--hm-spark); }

/* Riyadh — the source */
.hm-origin-core { fill: var(--hm-hot); stroke: var(--on-surface); stroke-width: 2; }
.hm-origin-ring { fill: none; stroke: var(--hm-arc); stroke-width: 1.4; opacity: .7; }
/* source pulse as HTML (composited, no SVG repaint) */
.on-hmap-pulse { position: absolute; width: 0; height: 0; pointer-events: none; }
.on-hmap-pulse i { position: absolute; left: -1.8cqw; top: -1.8cqw; width: 3.6cqw; height: 3.6cqw; border-radius: 50%; border: 1.5px solid var(--hm-arc); opacity: 0; }
.is-live .on-hmap-pulse i { animation: hm-wave 3.2s var(--hm-ease) infinite; }
.is-live .on-hmap-pulse i + i { animation-delay: 1.6s; }
.is-paused .on-hmap-pulse i, .is-paused .on-hmap-journey .live i, .is-paused .on-hmap-journey li.is-active .ico::after { animation-play-state: paused; }
@keyframes hm-wave { 0% { transform: scale(1); opacity: .65; } 100% { transform: scale(4.2); opacity: 0; } }

.on-hmap-origin {
    position: absolute; transform: translate(-50%, 1.6cqw); display: inline-flex; align-items: center; gap: .4em;
    padding: .28em .7em .28em .6em; border-radius: 99px; white-space: nowrap;
    font-size: clamp(10px, 1.85cqw, 12.5px); font-weight: 700; color: #fff; background: var(--hm-hot);
    box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--on-brand-strong) 70%, transparent);
}
.on-hmap-origin b { font-family: var(--on-font-arabic); font-weight: 600; opacity: .92; padding-left: .5em; border-left: 1px solid rgba(255, 255, 255, .35); }

/* greeting bubbles ("language glow") */
.on-hmap-bubble { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 2; }
.on-hmap-bubble .in {
    position: absolute; bottom: 1.7cqw; left: 0; translate: -50% 0; display: flex; flex-direction: column; align-items: center;
    padding: .38em .75em .42em; border-radius: 12px; white-space: nowrap; line-height: 1.2;
    font-size: clamp(10.5px, 2.05cqw, 13.5px);
    background: color-mix(in srgb, var(--on-surface) 94%, transparent); border: 1px solid color-mix(in srgb, var(--on-brand) 38%, var(--on-border));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--on-brand) 10%, transparent), 0 12px 26px -12px color-mix(in srgb, var(--on-brand-strong) 65%, transparent);
    opacity: 0; transform: translateY(.5em) scale(.86); transform-origin: 50% 100%;
    transition: opacity .35s ease, transform .5s var(--hm-ease);
}
.on-hmap-bubble .in::after {
    content: ""; position: absolute; left: 50%; bottom: -5px; width: 9px; height: 9px; margin-left: -4.5px; rotate: 45deg;
    background: inherit; border: inherit; border-width: 0 1px 1px 0;
}
.on-hmap-bubble b { font-weight: 700; color: var(--on-ink); font-size: 1.12em; }
.on-hmap-bubble b:lang(ar) { font-family: var(--on-font-arabic); }
.on-hmap-bubble small { display: flex; align-items: center; gap: .4em; color: var(--on-muted); font-size: .76em; font-weight: 600; }
.on-hmap-bubble small i { font-style: normal; font-size: .86em; letter-spacing: .04em; color: var(--on-brand-strong); background: var(--on-brand-soft); border-radius: 5px; padding: .05em .35em; }
.on-hmap:not(.is-live) .on-hmap-bubble.is-static .in,
.on-hmap-bubble.is-on .in { opacity: 1; transform: none; }

/* glass cards */
.on-hmap-journey, .on-hmap-card {
    position: absolute; z-index: 3; width: min(256px, 41%);
    background: var(--on-glass); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
    border: 1px solid var(--on-border); border-radius: var(--on-radius-lg); box-shadow: var(--on-shadow-lg);
    font-size: clamp(11px, 2cqw, 13px); color: var(--on-text);
}
.is-live .on-hmap-journey, .is-live .on-hmap-card { animation: hm-float 8s ease-in-out infinite; }
.is-live .on-hmap-card { animation-delay: -4s; }
.is-paused .on-hmap-journey, .is-paused .on-hmap-card { animation-play-state: paused; }
@keyframes hm-float { 50% { transform: translateY(-6px); } }

/* journey */
.on-hmap-journey { left: 0; bottom: 0; padding: .9em 1em 1em; }
.on-hmap-journey-head { display: flex; align-items: center; justify-content: space-between; gap: .5em; margin-bottom: .75em; font-weight: 700; color: var(--on-ink); font-size: .92em; }
.on-hmap-journey .live { display: inline-flex; align-items: center; gap: .35em; font-size: .78em; font-weight: 700; color: var(--on-green); background: var(--on-green-soft); padding: .15em .55em; border-radius: 99px; }
.on-hmap-journey .live i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.is-live .on-hmap-journey .live i { animation: hm-blink 1.6s ease-in-out infinite; }
@keyframes hm-blink { 50% { opacity: .25; } }
.on-hmap-journey ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .7em; }
.on-hmap-journey li { position: relative; display: grid; grid-template-columns: 2.35em 1fr; gap: .7em; align-items: center; transition: opacity .4s ease; }
.on-hmap-journey li + li::before {
    content: ""; position: absolute; top: -.7em; height: .7em; inset-inline-start: 1.12em; width: 2px; border-radius: 2px;
    background: color-mix(in srgb, var(--on-brand) 45%, var(--on-border));
}
.on-hmap-journey .ico {
    position: relative; width: 2.35em; height: 2.35em; border-radius: 10px; display: grid; place-items: center;
    background: var(--on-brand-soft); color: var(--on-brand-strong); transition: background .4s ease, color .4s ease, box-shadow .4s ease;
}
.on-hmap-journey .ico svg, .on-hmap-journey .ico i { width: 1.15em; height: 1.15em; }
.on-hmap-journey .txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.on-hmap-journey .txt b { color: var(--on-ink); font-size: .95em; }
.on-hmap-journey .txt small { color: var(--on-muted); font-size: .8em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.on-hmap-journey .bar { display: block; height: 3px; border-radius: 3px; margin-top: .45em; background: var(--on-border); overflow: hidden; }
.on-hmap-journey .bar span { display: block; height: 100%; background: var(--on-gradient); transform-origin: left center; transform: scaleX(var(--p, 1)); transition: transform .6s var(--hm-ease); }
[dir="rtl"] .on-hmap-journey .bar span { transform-origin: right center; }
.is-live .on-hmap-journey li { opacity: .5; }
.is-live .on-hmap-journey li .ico { background: var(--on-surface-2); color: var(--on-muted); }
.is-live .on-hmap-journey li.is-done, .is-live .on-hmap-journey li.is-active { opacity: 1; }
.is-live .on-hmap-journey li.is-done .ico { background: var(--on-brand-soft); color: var(--on-brand-strong); }
.is-live .on-hmap-journey li.is-active .ico { background: var(--on-gradient); color: #fff; box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--on-brand-strong) 80%, transparent); }
.is-live .on-hmap-journey li.is-active .ico::after {
    content: ""; position: absolute; inset: -3px; border-radius: 12px; border: 2px solid var(--on-brand); opacity: 0;
    animation: hm-ring 1.8s ease-out infinite;
}
@keyframes hm-ring { 0% { transform: scale(.9); opacity: .7; } 100% { transform: scale(1.25); opacity: 0; } }

/* article card */
.on-hmap-card { right: 0; top: 0; padding: .85em 1em .9em; }
.on-hmap-card-head { display: flex; align-items: center; gap: .55em; margin-bottom: .55em; }
.on-hmap-card-head .ico { width: 1.9em; height: 1.9em; border-radius: 8px; display: grid; place-items: center; background: var(--on-blue-soft); color: var(--on-blue); }
.on-hmap-card-head .ico svg, .on-hmap-card-head .ico i { width: 1em; height: 1em; }
.on-hmap-card-head .kicker { font-size: .78em; font-weight: 700; letter-spacing: .02em; color: var(--on-muted); text-transform: uppercase; }
.on-hmap-card-head .code { margin-inline-start: auto; font-size: .72em; font-weight: 800; color: var(--on-brand-strong); background: var(--on-brand-soft); border-radius: 6px; padding: .12em .45em; }
.on-hmap-card .title {
    margin: 0 0 .65em; font-weight: 700; color: var(--on-ink); font-size: 1em; line-height: 1.35; min-height: 2.7em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: opacity .25s ease, transform .35s var(--hm-ease);
}
.on-hmap-card .title:lang(ar) { font-family: var(--on-font-arabic); }
.on-hmap-card .title.is-swap { opacity: 0; transform: translateY(4px); }
.on-hmap-card .langs { display: flex; flex-wrap: wrap; gap: .3em; margin-bottom: .6em; }
.on-hmap-card .lang {
    font-size: .7em; font-weight: 800; letter-spacing: .03em; padding: .2em .5em; border-radius: 6px;
    background: var(--on-brand-soft); color: var(--on-brand-strong); border: 1px solid transparent; transition: background .35s ease, color .35s ease, border-color .35s ease;
}
.on-hmap-card .lang.is-source { background: var(--on-amber-soft); color: var(--on-amber); }
.is-live .on-hmap-card .lang:not(.is-source):not(.is-on) { background: transparent; color: var(--on-faint); border-color: var(--on-border); }
.on-hmap-card .status { display: flex; align-items: center; gap: .4em; font-size: .8em; font-weight: 600; color: var(--on-green); transition: opacity .4s ease; }
.on-hmap-card .status svg, .on-hmap-card .status i { width: 1.1em; height: 1.1em; }
.is-live .on-hmap-card .status { opacity: .35; }
.is-live .on-hmap-card.is-complete .status { opacity: 1; }

/* tablets: a little less chrome */
@container (max-width: 560px) {
    .on-hmap-stage { margin: 19cqw 0 24cqw; }
    .on-hmap-card .langs { display: none; }
}

/* phones: simplified — fewer cities, journey as a row under the map, no article card */
@container (max-width: 520px) {
    .on-hmap-stage { margin: 0 0 1rem; }
    .tier-2 { display: none; }
    .hm-node circle { scale: 1.45; }
    .hm-origin circle { scale: 1.35; }
    .hm-node-dot { stroke-width: 2.6; }
    .hm-arc-line { stroke-width: 2; }
    .hm-arc-glow { stroke-width: 8; }
    .on-hmap-bubble .in { font-size: 11px; padding: .32em .6em .36em; }
    .on-hmap-bubble small span { display: none; }
    .on-hmap-origin { font-size: 10.5px; }
    .on-hmap-card { display: none; }
    .on-hmap-journey { position: relative; width: 100%; padding: .75em .8em; font-size: 12px; animation: none !important; }
    .on-hmap-journey-head { margin-bottom: .6em; }
    .on-hmap-journey ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5em; }
    .on-hmap-journey li { grid-template-columns: 1fr; justify-items: center; align-items: start; align-content: start; text-align: center; gap: .35em; }
    .on-hmap-journey li + li::before { display: none; }
    .on-hmap-journey .txt { align-items: center; width: 100%; }
    .on-hmap-journey .txt small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .on-hmap-journey .bar { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .on-hmap *, .on-hmap { animation: none !important; transition: none !important; }
}