/* Showroom map layer.
 *
 * Values are the static build's, resolved from its compiled Tailwind rather
 * than eyeballed: h-[34rem], the three scrims at z-500, the pin at z-510, and
 * gradients interpolated `in oklab` — Tailwind v4's default, and visibly
 * different from the same stops interpolated in sRGB.
 *
 * Prefix is `asm-`, not `atlas-`: `.atlas-map` and `.atlas-map-pin` are icons
 * in the Atlas Icons library and carry a mask-image. */

/* ---------- Escaping the widget wrapper ------------------------------- */

/* Elementor gives every widget `position: relative`, so when this one's only
   child is the absolutely positioned map layer the wrapper collapses to zero
   width — and the layer then sizes itself against that empty box instead of the
   band. Taking the wrapper out of the positioning chain hands the layer back to
   `.asm-band`, which is the element that actually spans the section. */
.asm-band > .elementor-widget-shortcode,
.asm-band > .elementor-widget-shortcode > .elementor-shortcode {
    position: static;
}

/* ---------- The layer ------------------------------------------------ */

.asm {
    position: absolute; inset-inline: 0; top: 0;
    height: var(--asm-h, 34rem); overflow: hidden;
}

.asm__canvas,
.asm__canvas .leaflet-container {
    position: absolute; inset: 0; width: 100%; height: 100%;
    background: var(--NavyDeep, #0A2039);
}

/* Tiles are a backdrop for copy sitting on them, so they are dimmed and
   desaturated before the scrims go over the top. */
.asm__canvas .leaflet-tile-pane { filter: brightness(.6) saturate(.5) contrast(1.1); }
.asm__canvas .leaflet-control-attribution { display: none !important; }

/* ---------- Scrims ---------------------------------------------------- */

.asm__scrim { position: absolute; z-index: 500; pointer-events: none; }

/* Side scrim carries the copy.

   The source runs navy → navy/85 at 50% → fully transparent, which leaves the
   map reading very strongly on the right. `--asm-veil` is how much navy is left
   at the open edge; raise it to calm the map down, drop it to 0% to get the
   source's gradient back exactly. */
.asm { --asm-veil: 55%; }
.asm__scrim--side {
    inset: 0;
    background: linear-gradient(to right in oklab,
        var(--NavyDeep, #0A2039) 0%,
        color-mix(in oklab, var(--NavyDeep, #0A2039) 90%, transparent) 45%,
        color-mix(in oklab, var(--NavyDeep, #0A2039) var(--asm-veil), transparent) 100%);
}
.asm__scrim--bottom {
    inset-inline: 0; bottom: 0; height: 8rem;
    background: linear-gradient(to bottom in oklab, transparent 0%, var(--NavyDeep, #0A2039) 100%);
}
.asm__scrim--top {
    inset-inline: 0; top: 0; height: 4rem;
    background: linear-gradient(to top in oklab, transparent 0%, var(--NavyDeep, #0A2039) 100%);
}

/* A browser without color-mix would drop the whole side gradient, taking the
   copy's contrast with it — so fall back to a flat two-stop version. */
@supports not (color: color-mix(in oklab, red, red)) {
    .asm__scrim--side {
        background: linear-gradient(to right,
            var(--NavyDeep, #0A2039) 0%, var(--NavyDeep, #0A2039) 45%, rgba(10, 32, 57, .55) 100%);
    }
}

/* ---------- Pin ------------------------------------------------------- */

/* Not a Leaflet marker. Leaflet renders markers inside the map container, which
   the scrims sit on top of — that is what dimmed it. The pin is a sibling of
   the canvas instead, stacked above the scrims and kept in sync by the JS. */
.asm-pin { position: absolute; z-index: 510; pointer-events: none; width: 0; height: 0; }
.asm-pin > span {
    position: absolute; top: 0; left: 0;
    border-radius: 9999px; transform: translate(-50%, -50%);
    background: var(--Sun, #FAB210); width: 14px; height: 14px;
}
/* The source wrote this ripple and then overrode it to `none` further down its
   own stylesheet, shipping a static halo instead. The animation is restored
   here, at the timings it was authored with. */
@keyframes asm-pin-ripple {
    0%   { opacity: .45; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0;   transform: translate(-50%, -50%) scale(4); }
}
.asm-pin__ripple { animation: 2.4s ease-out infinite asm-pin-ripple; }
.asm-pin__ripple--2 { animation-delay: 1.2s; }
/* The dot sits above both ripples so it never dims as they pass under it. */
.asm-pin__dot { z-index: 1; }

/* ---------- Band stacking -------------------------------------------- */

/* The layer is absolute, so whatever holds it must be its containing block and
   the copy must clear the scrims. Put `asm-band` on the Elementor container
   that wraps the map and the copy, and `asm-over` on the copy itself. */
/* `body .elementor` because Elementor's own container rules are two classes
   deep and would otherwise win the z-index at equal specificity — leaving the
   copy at `z-index: auto`, painted underneath the z-500 scrims. That failure is
   invisible to `elementFromPoint`, which skips the scrims because they are
   `pointer-events: none`, so the copy tests as the top element while being
   completely covered. */
body .elementor .asm-band { position: relative; overflow: hidden; }
body .elementor .asm-over { position: relative; z-index: 520; }

@media (prefers-reduced-motion: reduce) {
    .asm__canvas .leaflet-fade-anim .leaflet-tile { transition: none !important; }
    /* Falls back to exactly what the source ships: one still halo, no pulse. */
    .asm-pin__ripple { animation: none; opacity: .2; transform: translate(-50%, -50%) scale(2.2); }
    .asm-pin__ripple--2 { display: none; }
}