/* Interactive Map — Infinity Suite module asset (v2.1.0).
   Modernized from the inline <style> blocks of the original shortcodes:
   - per-instance theming via CSS custom properties on the container
   - hover treatment uses filter + transform with transform-box: fill-box
     (the modern way to scale SVG paths around their own center instead of
     the SVG origin) behind an @media (hover) gate so touch devices never
     get sticky hover states
   - entrance animations are CSS-driven: JS only assigns a per-region index
     (--is-imap-i) and flips one class; the stagger is calc()'d here
   - :focus-visible keyboard outlines and full prefers-reduced-motion support
   Class names from the originals (.map-container, .highlight_label,
   .state-name-container, …) are preserved so existing site CSS overrides
   keep working. */

.is-imap {
    --is-imap-stagger: 14ms;     /* delay between regions */
    --is-imap-duration: 480ms;   /* per-region reveal time */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: relative;
}

.is-imap svg {
    max-width: 100%;
    height: auto;
}

.is-imap svg :where(path, circle) {
    fill: var(--is-imap-base, #D3D3D3);
    transform-box: fill-box;
    transform-origin: center;
    transition: filter 180ms ease, transform 180ms ease;
}

.is-imap path.highlighted,
.is-imap circle.highlighted {
    fill: var(--is-imap-highlight, #95CE72) !important;
}

.is-imap path.pending,
.is-imap circle.pending {
    fill: var(--is-imap-pending, #FFB366) !important;
}

/* Hover/focus: brighten and lift slightly. Hover-capable pointers only. */
@media (hover: hover) and (pointer: fine) {
    .is-imap svg :where(path, circle):hover {
        filter: brightness(1.08) saturate(1.06);
        transform: scale(1.012);
        cursor: pointer;
    }
}

.is-imap svg :where(path, circle):focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
    filter: brightness(1.08);
}

/* The US map's AK/HI inset frame (id=path67) is decoration, never a region. */
.is-imap #path67,
.is-imap .is-imap-frame {
    fill: none !important;
    stroke: #A9A9A9 !important;
    cursor: default;
    filter: none !important;
    transform: none !important;
    opacity: 1 !important;
}

/* Legend */
.is-imap-legend .highlight_label,
.is-imap-legend .pending_label {
    margin-right: 5px;
}
.is-imap-legend :where(.highlight_label, .pending_label, .unhighlighted_label)::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
}
.is-imap-legend .highlight_label::before {
    background-color: var(--is-imap-highlight, #95CE72);
}
.is-imap-legend .pending_label::before {
    background-color: var(--is-imap-pending, #FFB366);
}
.is-imap-legend .unhighlighted_label::before {
    background-color: var(--is-imap-base, #D3D3D3);
    margin-right: 2px;
}

/* Hover name bar */
.is-imap-namebar {
    display: inline-block;
    min-height: 60px;
    width: 100%;
    text-align: center;
}
.is-imap-namebar .is-imap-name {
    display: inline-block;
    line-height: 20px;
    font-family: inherit;
    font-size: 1.1rem;
    text-align: center;
    padding: 17px;
}

/* ---------------------------------------------------------------------------
   Entrance animations. JS sets --is-imap-i on each region (its reveal order)
   and adds .is-imap-revealed when the map is ~half visible; everything else
   is pure CSS. After the reveal, .is-imap-settled removes the stagger so the
   hover transition is instant from then on. */

.is-imap-anim:not(.is-imap-revealed) svg path {
    opacity: 0;
}
.is-imap-anim-rise:not(.is-imap-revealed) svg path {
    transform: translateY(7px) scale(0.992);
}

.is-imap-anim svg path {
    transition:
        opacity var(--is-imap-duration) cubic-bezier(0.22, 1, 0.36, 1),
        transform var(--is-imap-duration) cubic-bezier(0.22, 1, 0.36, 1),
        filter 180ms ease;
    transition-delay: calc(var(--is-imap-i, 0) * var(--is-imap-stagger));
}
.is-imap-anim.is-imap-revealed svg path {
    opacity: 1;
    transform: none;
}
.is-imap-anim.is-imap-settled svg path {
    transition-delay: 0s;
    transition:
        filter 180ms ease,
        transform 180ms ease;
}

/* Frame stays put through all of it. */
.is-imap-anim svg #path67,
.is-imap-anim svg .is-imap-frame {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .is-imap-anim svg path,
    .is-imap-anim:not(.is-imap-revealed) svg path {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .is-imap svg :where(path, circle) {
        transition: none;
    }
    .is-imap svg :where(path, circle):hover {
        transform: none;
    }
}