/* ============================================
   PROJECT MAP — Marker reveal animation
   ============================================
   Markers are L.divIcon: a wrapper <div class="fm-pin-marker"> is
   positioned by Leaflet via `transform: translate3d(...)`, and inside
   the wrapper sits the actual pin <img class="fm-pin-icon">.
   By decoupling the visual (img) from the positioned element (div),
   the img's scale can animate freely without ever clashing with
   Leaflet's transform on the wrapper.
   ============================================ */

/* Wrapper: kill divIcon's default white background + border, remove any
   transition that might cause a visible slide (the wrapper is invisible
   structurally — it just carries the position). */
.fm-pin-marker {
    background: transparent;
    border: 0;
}

/* The actual pin image — what the user sees. Starts at scale 0 so
   the pin is invisible at its correct lat/lng position. Only `scale`
   transitions; nothing else here moves. */
.fm-pin-marker .fm-pin-icon {
    display: block;
    width: 100%;
    height: 100%;
    scale: 0;
    transform-origin: 50% calc(100% - 16px); /* pin tip — 16px shadow pad below */
    transition: scale 700ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: scale;
}

/* Once the wave triggers, the map container carries this class.
   All current and future pin imgs render at full scale; ones that
   currently have a transition-delay inline still stagger in. */
.fm-pins-revealed .fm-pin-marker .fm-pin-icon {
    scale: 1;
}

@media (prefers-reduced-motion: reduce) {
    .fm-pin-marker .fm-pin-icon {
        scale: 1;
        transition: none;
    }
}

/* ============================================
   MOBILE / TOUCH — popup becomes a bottom sheet
   ============================================
   Touch devices have no hover, so map pins and clusters open
   their popup on tap (see project-map.js). With no cursor to
   anchor a floating popup + connector cone, the popup docks to
   the bottom of the viewport as a sheet with an explicit close
   button. */

/* Close button — injected by JS on touch devices only; hidden
   everywhere else (desktop popups close on mouse-out). */
.ext-popup__close {
    display: none;
}

@media (hover: none), (pointer: coarse) {
    /* The connector cone has no cursor anchor on a docked sheet */
    .ext-popup-cone {
        display: none !important;
    }

    /* No +/- zoom buttons on touch — pinch to zoom instead.
       Targets every map that uses the shared #fullscreen-map-leaflet
       container (homepage `.fullscreen-map__map`, projects page
       `.projects-hero__map`, etc.). */
    .fullscreen-map__map .leaflet-control-zoom,
    .projects-hero__map .leaflet-control-zoom,
    #fullscreen-map-leaflet .leaflet-control-zoom {
        display: none !important;
    }

    /* Dock the fullscreen popup to the bottom of the viewport */
    .ext-popup--fullscreen {
        position: fixed;
        left: 50% !important;
        right: auto;
        top: auto !important;
        bottom: max(16px, env(safe-area-inset-bottom, 16px));
        width: calc(100vw - 24px);
        min-width: 0;
        max-width: 420px;
        z-index: 350;
        transform: translateX(-50%) translateY(24px);
    }

    .ext-popup--fullscreen.ext-popup--visible {
        transform: translateX(-50%) translateY(0);
    }

    /* Floating close button just outside the top-right corner */
    .ext-popup__close {
        position: absolute;
        top: -14px;
        right: -14px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 0;
        border: 0.5px solid #d8d8d4;
        border-radius: 50%;
        background: #FFFFFF;
        color: #1A1A1A;
        cursor: pointer;
        z-index: 3;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
        -webkit-tap-highlight-color: transparent;
    }

    .ext-popup__close:active {
        transform: scale(0.92);
    }

    /* Cluster list fits inside the sheet without running off-screen */
    .cluster-popup {
        min-width: 0;
    }

    .cluster-popup__list {
        max-height: 50vh;
    }
}