/* markers.css — Shape-based marker visual language for the map.
   Loaded after design-system.css + style.css. Cache-busted via index.html. */

/* ============================================================
   Base marker hygiene — kill Leaflet's default img box
   ============================================================ */

.leaflet-marker-icon.omni-marker,
.leaflet-marker-icon.mf-marker,
.leaflet-marker-icon.mf-marker-badge,
.leaflet-marker-icon.mf-marker-ember,
.leaflet-marker-icon.mf-marker-pulse {
    background: transparent !important;
    border: none !important;
    outline: none !important;
}

/* ============================================================
   Shape primitives
   ============================================================ */

.mf-shape {
    display: block;
    overflow: visible;
    transition: transform 140ms ease-out, filter 140ms ease-out;
}
.mf-marker:hover .mf-shape,
.mf-marker-badge:hover > div {
    transform: scale(1.2);
    z-index: 9999;
}

/* Confidence tiers — opacity + phosphor flicker for low-confidence signals */
.mf-shape.mf-conf-high    { opacity: 1;    }
.mf-shape.mf-conf-medium  { opacity: 0.88; }
.mf-shape.mf-conf-low     { opacity: 0.7;  }
.mf-shape.mf-conf-verylow {
    opacity: 0.55;
    animation: mf-phosphor-flicker 2.8s ease-in-out infinite;
}

@keyframes mf-phosphor-flicker {
    0%, 100% { opacity: 0.55; }
    18%      { opacity: 0.42; }
    35%      { opacity: 0.65; }
    52%      { opacity: 0.38; }
    79%      { opacity: 0.7;  }
}

/* ============================================================
   Pulsing rings (severity >= 3)
   ============================================================ */

.mf-shape .mf-pulse-ring {
    transform-origin: center;
    transform-box: fill-box;
    animation: mf-ring-pulse 1.8s ease-out infinite;
    pointer-events: none;
}

@keyframes mf-ring-pulse {
    0%   { transform: scale(0.45); opacity: 0.9; }
    70%  { transform: scale(1.6);  opacity: 0;   }
    100% { transform: scale(1.6);  opacity: 0;   }
}

/* ============================================================
   Infrastructure badges — fixed installations
   ============================================================ */

.mf-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 120ms ease-out, box-shadow 120ms;
    user-select: none;
}
.mf-badge:hover {
    transform: scale(1.2);
}
.mf-badge-alert {
    animation: mf-pulse-badge 2s ease-in-out infinite;
}
@keyframes mf-pulse-badge {
    0%, 100% { box-shadow: 0 0 6px #ff444499; }
    50%      { box-shadow: 0 0 14px #ff4444ee, 0 0 24px #ff444466; }
}

/* ============================================================
   Ember dots — wildfire hotspots inside perimeter
   ============================================================ */

.mf-ember {
    animation: mf-ember-pulse 1.4s ease-in-out infinite;
}
@keyframes mf-ember-pulse {
    0%, 100% { opacity: 0.85; filter: drop-shadow(0 0 2px #ff6622); }
    50%      { opacity: 1;    filter: drop-shadow(0 0 8px #ffaa00); }
}

/* ============================================================
   Wildfire perimeter — marching dashes
   ============================================================ */

.mf-wildfire-perimeter {
    stroke: #ff2222;
    stroke-width: 2.5;
    stroke-dasharray: 10 6;
    fill: #ff4422;
    fill-opacity: 0.14;
    filter: drop-shadow(0 0 6px #ff4422aa);
    animation: mf-march 3s linear infinite;
}

/* ============================================================
   Dark-vessel / anomaly dashed outlines
   ============================================================ */

.mf-ship-dark .mf-shape--shipHull,
.mf-shape--shipHull.mf-dashed {
    stroke-dasharray: 3 2;
}

@keyframes mf-march {
    to { stroke-dashoffset: -16; }
}

/* ============================================================
   Deforestation / active-front marching lines
   ============================================================ */

.mf-defo-front {
    stroke: #ff2222;
    stroke-width: 2;
    stroke-dasharray: 8 4;
    fill: none;
    filter: drop-shadow(0 0 4px #ff2222aa);
    animation: mf-march 2s linear infinite;
}

/* ============================================================
   Flood-gauge bars — vertical bars that scale with river stage
   ============================================================ */

.mf-gauge-bar {
    width: 6px;
    border-radius: 1px;
    transition: height 200ms ease-out, filter 120ms;
}
.mf-gauge-bar:hover {
    filter: brightness(1.4);
    width: 8px;
}

/* ============================================================
   Pulsing transient events (BGP / cyber / hijacks)
   ============================================================ */

.mf-pulse-host {
    display: grid;
    place-items: center;
}
.mf-pulse-core {
    grid-area: 1 / 1;
    width: 8px; height: 8px;
    border-radius: 50%;
    z-index: 2;
}
.mf-pulse-outer {
    grid-area: 1 / 1;
    width: 100%; height: 100%;
    border-radius: 50%;
    border: 2px solid var(--ring-color, #ff3333);
    box-shadow: 0 0 6px var(--ring-color, #ff3333) inset;
    animation: mf-ring-expand 2s ease-out infinite;
}
@keyframes mf-ring-expand {
    0%   { transform: scale(0.4); opacity: 0.9; }
    80%  { transform: scale(1);   opacity: 0;   }
    100% { transform: scale(1);   opacity: 0;   }
}

/* ============================================================
   Aircraft + ship trails — used by future tracking-trail logic
   ============================================================ */

.mf-trail {
    stroke-width: 1.4;
    fill: none;
    pointer-events: none;
}
.mf-trail-aircraft { stroke: #00d4ff; }
.mf-trail-ship     { stroke: #44ff88; }
.mf-trail-military { stroke: #ff3333; }
.mf-trail-dark     { stroke: #cc00ff; stroke-dasharray: 3 2; }

/* ============================================================
   Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .mf-shape .mf-pulse-ring,
    .mf-badge-alert,
    .mf-ember,
    .mf-wildfire-perimeter,
    .mf-defo-front,
    .mf-pulse-outer,
    .mf-shape.mf-conf-verylow {
        animation: none !important;
    }
}