/* First hero only. The shared interactive map keeps its own renderer. */
.hx-scene.hg-enhanced { height: 370vh; }
.hx-scene .hx-stage { position: absolute; inset: 0 -5% 0 43%; opacity: 1; z-index: 1; pointer-events: none; background: none; overflow: hidden; }
.hg-canvas { position: absolute; inset: 0; opacity: 0; transition: opacity .65s ease; mask-image: linear-gradient(90deg, transparent, #000 13%, #000); }
.hg-ready .hg-canvas { opacity: 1; }
.hg-canvas canvas { display: block; opacity: .83; }
.hx-scene .hx-scene-photo img { filter: grayscale(.2) saturate(.8) brightness(.88) contrast(1.05); opacity: var(--photo-o, .8); transform: scale(calc(var(--photo-s, 1.08) * 1.07)); transform-origin: 0% 70%; object-position: 60% 62%; }
.hx-scene .hx-scene-photo::after { background: linear-gradient(180deg, rgba(15,15,18,.22), transparent 35%, rgba(15,15,18,.3)); }
.hx-scene .hx-scene-veil { background: linear-gradient(90deg, rgba(15,15,18,.9), rgba(15,15,18,.75) 36%, rgba(15,15,18,.12) 66%, rgba(15,15,18,.02)), linear-gradient(180deg, rgba(15,15,18,.1), transparent 35%, transparent 80%, rgba(15,15,18,.35)); }
.hg-steps { position: absolute; z-index: 3; top: 1.8rem; left: 50%; transform: translateX(-50%); display: flex; gap: 1.25rem; white-space: nowrap; font: 10px var(--font-body, sans-serif); text-transform: uppercase; letter-spacing: .15em; color: rgba(255,255,255,.4); }
.hg-steps span { padding-bottom: .6rem; border-bottom: 1px solid transparent; transition: color .25s, border-color .25s; }
.hg-steps .is-active { color: #ffbc8e; border-color: rgba(242,106,33,.7); }
.hg-marker { color: #f1b58e; font: 11px var(--font-body, sans-serif); position: relative; }
.hg-marker-dot { position: absolute; width: var(--dot-size, 6px); height: var(--dot-size, 6px); border-radius: 50%; background: currentColor; border: 1px solid #ffdbc3; box-shadow: 0 0 0 3px rgba(242,106,33,.08); transform: translate(-50%, -50%); }
.hg-marker-label { position: absolute; left: 10px; top: -7px; white-space: nowrap; color: #eee9e5; text-shadow: 0 1px 4px #101014, 0 0 12px #101014; }
.hg-marker-left .hg-marker-label { left: auto; right: 10px; }
.hg-marker-high .hg-marker-label { top: -24px; }
.hg-marker-landmark { color: #9da8b9; opacity: var(--hub-opacity, 1); }
.hg-marker-landmark .hg-marker-dot { border: none; box-shadow: none; }
.hg-marker-landmark .hg-marker-label { color: #bbc3ce; opacity: var(--hub-label-opacity, 0); }
.hg-marker-city { opacity: var(--city-opacity, 0); }
.hg-marker-city .hg-marker-label { opacity: var(--city-label-opacity, 0); }
.hg-marker-secondary .hg-marker-label { display: none; }
.hg-marker-primary::before { content: ''; position: absolute; inset: -7px; width: 14px; height: 14px; border: 1px solid rgba(242,106,33,.65); border-radius: 50%; animation: hgPulse 6s ease-out infinite; }
@keyframes hgPulse { 0%, 12% { opacity: 0; transform: scale(.65); } 22% { opacity: .45; } 65%, 100% { opacity: 0; transform: scale(2.2); } }
.hg-paused .hg-marker-primary::before { animation-play-state: paused; }
.hx-scene.hg-enhanced .hx-cities { bottom: 1.5rem; right: 1.5rem; pointer-events: none; visibility: hidden; }
.hx-scene.hg-enhanced .hx-cities.is-on { visibility: visible; pointer-events: auto; }
/* Fallback for unavailable WebGL or a blocked library. */
.hx-scene .hx-atlas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .8; }
.hg-ready .hx-atlas { display: none; }
.hx-atlas .atlas-land { fill: #333a46; stroke: #69727e; stroke-width: .6; }
.hx-atlas .atlas-morocco { fill: #6e4934; stroke: #c88960; }
.hx-atlas .atlas-graticule { fill: none; stroke: #818897; opacity: .12; }
.hx-atlas .atlas-route { fill: none; stroke: #f0b38a; opacity: .2; }
.hx-atlas .atlas-node { fill: #aab2bf; }
.hx-atlas .atlas-node-primary { fill: #f4b183; }
.hx-atlas .atlas-label { fill: #c0c4cc; font: 12px var(--font-body,sans-serif); }
.hx-atlas .atlas-overline, .hx-atlas .atlas-note, .hx-atlas .atlas-scan, .hx-atlas .atlas-pulse { display: none; }
@media (max-width: 992px) {
    .hx-scene.hg-enhanced { height: calc(var(--hg-copy-height, 850px) + 320svh); }
    .hx-scene.hg-enhanced .hx-scene-sticky { position: sticky; top: calc(var(--navbar-height) - var(--hg-copy-height, 850px)); height: auto; min-height: 0; }
    .hx-scene .hx-stage { position: relative; inset: auto; width: 100%; height: calc(100svh - var(--navbar-height)); }
    .hx-scene .hx-scene-photo img { transform: scale(1.04); object-position: 62% 65%; }
    .hx-scene .hx-scene-veil { background: linear-gradient(180deg, rgba(15,15,18,.8), rgba(15,15,18,.55) 45%, rgba(15,15,18,.08) 72%, rgba(15,15,18,.3)); }
    .hx-scene .hx-scene-content { position: relative; }
    .hx-scene.hg-enhanced .hx-cities { position: absolute; bottom: 1.2rem; left: 1rem; right: 1rem; margin: 0; width: auto; opacity: 0; transform: translateY(10px); }
    .hx-scene.hg-enhanced .hx-cities.is-on { opacity: 1; transform: none; }
    .hg-steps { top: 1.2rem; gap: 1rem; font-size: 9px; }
    .hg-marker { font-size: 10px; }
    .hg-canvas { mask-image: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hg-marker-primary::before { animation: none; display: none; }
    .hg-canvas, .hg-steps span { transition: none; }
    .hx-scene.hg-enhanced { height: auto; }
    .hx-scene.hg-enhanced .hx-scene-sticky { position: relative; top: auto; }
}