/* FIRST STEPS INTERACTIVE MAP */

.firststeps-map {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    overflow: hidden;
}

.firststeps-map-image {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}


/* FIRST STEPS DIAMOND LINKS */

.firststeps-map-diamond {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 42px;
    height: 42px;
    padding: 0;

    transform: translate(-50%, -50%) rotate(45deg);
    transform-origin: center;

    background: rgba(246, 243, 238, 0.97);
    border: 2px solid #95672e;
    color: #5f4c27;

    text-decoration: none;
    cursor: pointer;
    z-index: 5;

    -webkit-tap-highlight-color: transparent;

    animation: firststepsMapDiamondPulse 1.8s ease-in-out infinite;

    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}


/* EXPANDING GOLDEN-BROWN HALO */

.firststeps-map-diamond::before {
    content: "";
    position: absolute;
    inset: -8px;

    box-sizing: border-box;
    border: 1px solid rgba(120, 78, 35, 0.8);

    box-shadow:
        0 0 8px rgba(120, 78, 35, 0.7),
        0 0 18px rgba(120, 78, 35, 0.65),
        0 0 30px rgba(184, 134, 11, 0.35);

    pointer-events: none;

    animation: firststepsMapHaloPulse 1.8s ease-in-out infinite;
}


/* BRIGHT CENTRAL LIGHT */

.firststeps-map-diamond::after {
    content: "";
    position: absolute;

    width: 8px;
    height: 8px;

    background: #fffdf0;
    box-shadow:
        0 0 7px 3px rgba(255, 255, 245, 0.95),
        0 0 15px 5px rgba(255, 224, 143, 0.85),
        0 0 25px 7px rgba(120, 78, 35, 0.7);

    pointer-events: none;

    animation: firststepsMapCorePulse 1.8s ease-in-out infinite;
}


/* DIAMOND LABELS */

.firststeps-map-diamond span {
    position: absolute;
    z-index: 6;

    top: calc(100% + 15px);
    left: 50%;

    display: block;
    width: max-content;
    max-width: 200px;
    box-sizing: border-box;

    padding: 5px 8px;

    transform: translateX(-50%) rotate(-45deg);

    background: rgba(246, 243, 238, 0.98);
    border: 1px solid rgba(149, 103, 46, 0.85);
    border-radius: 3px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;

    color: #5f4c27;

    opacity: 0;
    pointer-events: none;

    transition: opacity 0.25s ease;
}


/* SHOW LABEL ON HOVER OR KEYBOARD FOCUS */

.firststeps-map-diamond:hover span,
.firststeps-map-diamond:focus-visible span {
    opacity: 1;
}


/* STRONGER INTERACTION */

.firststeps-map-diamond:hover,
.firststeps-map-diamond:focus-visible {
    background: #fffaf0;
    border-color: #b8860b;

    transform: translate(-50%, -50%) rotate(45deg) scale(1.13);

    box-shadow:
        0 0 0 7px rgba(120, 78, 35, 0.28),
        0 0 22px rgba(120, 78, 35, 0.9),
        0 0 36px rgba(184, 134, 11, 0.65);
}

.firststeps-map-diamond:hover::before,
.firststeps-map-diamond:focus-visible::before {
    border-color: rgba(184, 134, 11, 0.95);

    box-shadow:
        0 0 12px rgba(120, 78, 35, 0.85),
        0 0 26px rgba(184, 134, 11, 0.8),
        0 0 42px rgba(184, 134, 11, 0.55);
}

.firststeps-map-diamond:focus-visible {
    outline: 2px solid #5f6433;
    outline-offset: 9px;
}


/* MAIN DIAMOND PULSE */

@keyframes firststepsMapDiamondPulse {
    0%,
    100% {
        box-shadow:
            0 0 0 3px rgba(100, 65, 28, 0.22),
            0 0 10px rgba(120, 78, 35, 0.65),
            0 0 18px rgba(184, 134, 11, 0.28);
    }

    50% {
        box-shadow:
            0 0 0 9px rgba(100, 65, 28, 0.3),
            0 0 23px rgba(120, 78, 35, 0.9),
            0 0 36px rgba(184, 134, 11, 0.55);
    }
}


/* HALO EXPANSION */

@keyframes firststepsMapHaloPulse {
    0%,
    100% {
        opacity: 0.65;
        transform: scale(0.88);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}


/* CENTRAL LIGHT PULSE */

@keyframes firststepsMapCorePulse {
    0%,
    100% {
        opacity: 0.8;
        transform: scale(0.85);
    }

    50% {
        opacity: 1;
        transform: scale(1.3);
    }
}


/* DIAMOND POSITIONS - PRESERVED */

.firststeps-map-diamond-breed {
    left: 38%;
    top: 35%;
}

.firststeps-map-diamond-puppy {
    left: 90%;
    top: 31%;
}

.firststeps-map-diamond-kennel {
    left: 71%;
    top: 41%;
}


/* MOBILE DIAMONDS */

@media (max-width: 700px) {

    .firststeps-map-diamond {
        width: 14px;
        height: 14px;
        border-width: 1px;
    }

    .firststeps-map-diamond::before {
        inset: -3px;
    }

    .firststeps-map-diamond::after {
        width: 4px;
        height: 4px;
    }

    .firststeps-map-diamond span {
        font-size: 10px;
        max-width: 170px;
        padding: 4px 6px;
    }

    .firststeps-map-diamond:hover,
    .firststeps-map-diamond:focus-visible {
        transform: translate(-50%, -50%) rotate(45deg) scale(1.2);
    }
}

/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {

    .firststeps-map-diamond,
    .firststeps-map-diamond::before,
    .firststeps-map-diamond::after {
        animation: none;
    }

    .firststeps-map-diamond {
        transition: none;
    }

    .firststeps-map-diamond span {
        transition: none;
    }
}