/* ===================================
   MAP MARKERS & ANIMATIONS
   (Based on User Snippet Architecture)
   =================================== */

.map-markers {
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 60%;
    pointer-events: none;
    overflow: visible;
    /* CRITICAL for Chrome: allows markers to show outside the 60% box */
    z-index: 10;
}

.marker-container {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    pointer-events: auto;
    overflow: visible;
    /* Prevent clipping of arrows/texts */
    z-index: 20;
    /* Keep above map background */
    /* Initially hidden to prevent any visual glitches/black points before animation */
    opacity: 0;
    visibility: hidden;
}


/* 1. LANNION MARKER (Blue Dot) */
/* Lannion (Côtes-d'Armor) - North West Coast, roughly center of north bulge */
.marker-lannion {
    top: 48%;
    left: 64%;
}

.marker-lannion .marker-svg {
    transform: translate(-50%, -50%);
    /* Center the dot (20,20) was old, now we center the whole 100x100 svg on the point */
}

/* Animations for Lannion */
.anim-ring-blue {
    transform-origin: 50px 50px;
    animation: pulseRing 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulseRing {
    0% {
        opacity: 0.6;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(2.5);
    }
}

.anim-dash-arrow {
    stroke-dashoffset: 8;
    animation: dashOffset 20s linear infinite reverse;
}

/* --- CARHAIX (Red Pin) --- */
/* Carhaix (Finistère) - Le Poher (Center West) */
.marker-carhaix {
    top: 63%;
    left: 50%;
    align-items: flex-end;
    /* Text on left */
}

.pin-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -100%) scale(0.35);
    /* Scale down icon */
    transform-origin: bottom center;
    /* Anchor at pin tip */
}

/* Carhaix Arrow Centering */
.arrow-carhaix-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    overflow: visible;
}

/* Animations for Carhaix */
.anim-bounce-pin-group {
    transform-origin: 50px 95px;
    /* Pin tip */
    animation: bounceOnly 2.5s ease-in-out infinite;
}

@keyframes bounceOnly {

    0%,
    100% {
        transform: translateY(0) scaleY(1);
    }

    50% {
        transform: translateY(-5px) scaleY(1.05);
        /* Squash & stretch */
    }
}

.anim-pulse-shadow {
    transform-origin: 50px 95px;
    /* Center of shadow */
    animation: pulseShadowOnly 2.5s ease-in-out infinite;
}

@keyframes pulseShadowOnly {

    0%,
    100% {
        transform: scale(1.1);
        opacity: 0.3;
    }

    50% {
        transform: scale(0.85);
        opacity: 0.15;
    }
}

.anim-dash-arrow-reverse {
    stroke-dashoffset: 0;
    animation: dashOffset 20s linear infinite;
}

@keyframes dashOffset {
    to {
        stroke-dashoffset: -100;
    }
}

/* --- TEXT STYLING --- */
.marker-text {
    position: absolute;
    width: max-content;
    pointer-events: none;
}

/* Text Positioning relative to SVG */
/* Text Positioning relative to SVG */
.text-lannion {
    top: 30px;
    /* Above the dot */
    left: 55px;
    /* Slightly right */
    text-align: left;
}

.text-carhaix {
    top: 50px;
    /* Above/Left of pin? No, user said RIGHT of pin */
    left: 65px;
    /* To the right of the pin */
    text-align: left;
    /* Align text left */
}

.marker-title {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0;
    line-height: 1.2;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(2px);
    padding: 2px 6px;
    border-radius: 4px;
}

.marker-subtitle {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* Dark mode text shadow adjustment */
/* Dark mode text styles */
[data-theme="dark"] .marker-title {
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    text-shadow: none;
    backdrop-filter: blur(4px);
}

/* --- RESPONSIVE ADJUSTMENTS --- */
/* Adjust coordinates slightly for mobile if map aspect ratio changes or crops */
@media (max-width: 768px) {
    .marker-title {
        font-size: 0.8rem;
    }

    .marker-subtitle {
        font-size: 0.65rem;
    }

    .marker-svg {
        transform: scale(0.8);
    }

    .map-markers {
        transform: translateY(-15px);
    }
}