/*
 * Constellation Voix du Subtil
 * Positions : modifier les variables --x/--y/--mx/--my dans le partial PHP.
 */
.constellation-section {
    width: 100%;
    margin: 0;
    padding: clamp(4rem, 8vw, 7rem) 0;
}

.constellation-heading {
    position: relative;
    z-index: 2;
    width: min(1240px, calc(100% - 2rem));
    margin: 0 auto;
    max-width: none;
}

.constellation-heading h2 {
    font-size: clamp(2rem, 3.2vw, 3.45rem);
    line-height: 1.08;
    max-width: 100%;
    white-space: nowrap;
}

.subtle-map {
    position: relative;
    width: 100%;
    min-height: 760px;
    margin-top: clamp(2rem, 4vw, 3.5rem);
    overflow: hidden;
    border-top: 1px solid rgba(227, 212, 165, .16);
    border-bottom: 1px solid rgba(227, 212, 165, .16);
    background:
        radial-gradient(circle at 50% 45%, rgba(200, 169, 106, .08), transparent 18rem),
        linear-gradient(180deg, #020812, #061426 48%, #020812);
    isolation: isolate;
}

.subtle-map__bg {
    position: absolute;
    inset: 0;
    z-index: -3;
    background:
        linear-gradient(rgba(2, 8, 18, .84), rgba(2, 8, 18, .84)),
        radial-gradient(circle at 50% 44%, rgba(227, 212, 165, .08), transparent 14rem),
        radial-gradient(circle at 24% 60%, rgba(38, 88, 132, .2), transparent 22rem),
        radial-gradient(circle at 76% 32%, rgba(200, 169, 106, .06), transparent 17rem),
        linear-gradient(rgba(2, 8, 18, .88), rgba(2, 8, 18, .88)),
        linear-gradient(180deg, #020812, #061426 55%, #020812);
    background-size: cover;
    background-position: center;
}

.subtle-map::before,
.subtle-map::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.subtle-map::before {
    z-index: -2;
    background:
        radial-gradient(circle at 50% 48%, rgba(11, 31, 58, .18) 0 18rem, rgba(2, 8, 18, .42) 36rem),
        linear-gradient(90deg, rgba(2, 8, 18, .82), transparent 28%, transparent 72%, rgba(2, 8, 18, .82));
}

.subtle-map::after {
    z-index: -1;
    background-image:
        radial-gradient(circle, rgba(244, 241, 234, .42) 0 1px, transparent 1.2px),
        radial-gradient(circle, rgba(227, 212, 165, .28) 0 1px, transparent 1.3px);
    background-size: 146px 146px, 238px 238px;
    background-position: 12px 20px, 90px 118px;
    opacity: .14;
}

.subtle-map__lines,
.subtle-map__stars {
    position: absolute;
    inset: 0;
}

.subtle-map__lines {
    z-index: 1;
    overflow: visible;
}

.constellation-line {
    fill: none;
    stroke: rgba(200, 169, 106, .75);
    stroke-width: 1.15;
    vector-effect: non-scaling-stroke;
    filter: url("#goldGlow");
    opacity: .06;
    stroke-linecap: round;
    stroke-dasharray: var(--line-length, 120);
    stroke-dashoffset: var(--line-length, 120);
    transition:
        stroke-dashoffset 900ms cubic-bezier(.22, .75, .2, 1),
        opacity 450ms ease;
    transition-delay: var(--line-delay, 0ms);
}

.constellation-line--secondary {
    stroke-width: .85;
    opacity: .035;
}

.subtle-map[data-active] .constellation-line {
    opacity: .035;
}

.subtle-map[data-active="lecture"] .constellation-line[data-from="lecture"],
.subtle-map[data-active="lecture"] .constellation-line[data-to="lecture"],
.subtle-map[data-active="realignement"] .constellation-line[data-from="realignement"],
.subtle-map[data-active="realignement"] .constellation-line[data-to="realignement"],
.subtle-map[data-active="hypnose"] .constellation-line[data-from="hypnose"],
.subtle-map[data-active="hypnose"] .constellation-line[data-to="hypnose"],
.subtle-map[data-active="nettoyage"] .constellation-line[data-from="nettoyage"],
.subtle-map[data-active="nettoyage"] .constellation-line[data-to="nettoyage"],
.subtle-map[data-active="passage"] .constellation-line[data-from="passage"],
.subtle-map[data-active="passage"] .constellation-line[data-to="passage"] {
    opacity: .88;
    stroke-dashoffset: 0;
}

.map-star {
    position: absolute;
    left: var(--x);
    top: var(--y);
    z-index: 3;
    transform: translate(-50%, -50%) scale(.82);
    border: 0;
    padding: 0;
    background: transparent;
    color: #f4f1ea;
    cursor: pointer;
    opacity: 0;
    animation: star-enter 1.1s ease forwards;
    animation-delay: var(--delay);
}

.map-star--main {
    width: 4.8rem;
    height: 4.8rem;
    display: grid;
    place-items: center;
}

.map-star--main::before,
.map-star--main::after {
    content: "";
    position: absolute;
    inset: .34rem;
    border-radius: 50%;
    pointer-events: none;
    opacity: .44;
}

.map-star--main::before {
    background:
        conic-gradient(from 120deg, transparent 0 64%, rgba(227, 212, 165, .34), transparent 82%),
        radial-gradient(circle, transparent 58%, rgba(227, 212, 165, .16) 60%, transparent 68%);
    filter: blur(.2px);
    animation: star-energy-orbit 14s linear infinite;
}

.map-star--main::after {
    inset: .9rem;
    background: radial-gradient(circle, rgba(227, 212, 165, .2), transparent 68%);
    filter: blur(10px);
    animation: star-energy-breathe 5.8s ease-in-out infinite;
}

.map-star--minor {
    width: 2rem;
    height: 2rem;
}

.map-star__spark {
    display: block;
    border-radius: 50%;
    background: #e3d4a5;
    box-shadow: 0 0 18px rgba(227, 212, 165, .58);
}

.map-star--main .map-star__spark {
    width: .9rem;
    height: .9rem;
}

.map-star--minor .map-star__spark {
    width: .32rem;
    height: .32rem;
    opacity: .72;
}

.map-star__halo {
    position: absolute;
    inset: .45rem;
    border: 1px solid rgba(227, 212, 165, .18);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(227, 212, 165, .14), transparent 62%);
    opacity: .52;
    transform: scale(.82);
    transition: transform .5s ease, opacity .5s ease, border-color .5s ease;
}

.subtle-map[data-active] .map-star--main:not(.is-active) {
    opacity: .54;
    filter: saturate(.7);
}

.map-star--main.is-near,
.map-star--main:is(:hover, :focus-visible, .is-active) {
    transform: translate(-50%, -50%) scale(1.05);
    opacity: 1;
}

.map-star--main:is(:hover, :focus-visible, .is-active) .map-star__halo {
    opacity: .92;
    border-color: rgba(227, 212, 165, .58);
    transform: scale(1.18);
    animation: map-pulse 3.6s ease-in-out infinite;
}

.map-star--main:is(:hover, :focus-visible, .is-active)::before {
    opacity: .78;
    animation-duration: 7s;
}

.map-star--main:is(:hover, :focus-visible, .is-active)::after {
    opacity: .72;
}

.map-star--main:is(:hover, :focus-visible, .is-active) .map-star__spark {
    box-shadow:
        0 0 18px rgba(227, 212, 165, .95),
        0 0 46px rgba(200, 169, 106, .58);
}

.map-star:focus-visible {
    outline: 1px solid rgba(227, 212, 165, .92);
    outline-offset: .35rem;
    border-radius: 999px;
}

.map-panel,
.minor-tooltip {
    position: absolute;
    opacity: 0;
    transform: translateY(.8rem);
    filter: blur(6px);
    transition: opacity .32s ease, transform .32s ease, filter .32s ease;
}

.minor-tooltip {
    pointer-events: none;
}

.map-panel {
    pointer-events: auto;
    left: 3.7rem;
    top: 3.15rem;
    width: min(20rem, 72vw);
    padding: 1rem 1.05rem;
    border: 1px solid rgba(227, 212, 165, .26);
    border-radius: .7rem;
    background: rgba(4, 12, 24, .72);
    backdrop-filter: blur(16px);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .34);
    text-align: left;
}

.map-panel strong {
    display: block;
    font-family: var(--serif);
    font-size: 1.3rem;
    font-weight: 500;
}

.map-panel small {
    display: block;
    margin-top: .35rem;
    color: rgba(244, 241, 234, .75);
    line-height: 1.45;
}

.map-panel span {
    display: inline-block;
    margin-top: .8rem;
    color: #e3d4a5;
    font-size: .82rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.map-star--main:is(:hover, :focus-visible, .is-active) .map-panel,
.map-star--minor:is(:hover, :focus-visible, .is-active) .minor-tooltip {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.minor-tooltip {
    left: 1.1rem;
    top: .6rem;
    width: 15rem;
    color: #e3d4a5;
    font-size: .84rem;
    line-height: 1.35;
    text-align: left;
}

.constellation-fallback {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.constellation-fallback a {
    display: grid;
    gap: .35rem;
    padding: 1rem;
    border: 1px solid rgba(227, 212, 165, .2);
    border-radius: .5rem;
    background: rgba(244, 241, 234, .045);
}

.constellation-fallback span {
    color: rgba(244, 241, 234, .72);
}

.map-star.is-departing {
    animation: star-depart .32s ease forwards;
}

@keyframes star-enter {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.58);
        filter: blur(10px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(.82);
        filter: blur(0);
    }
}

@keyframes map-pulse {
    50% { transform: scale(1.32); opacity: .72; }
}

@keyframes star-energy-orbit {
    to { transform: rotate(1turn); }
}

@keyframes star-energy-breathe {
    0%, 100% { transform: scale(.9); opacity: .28; }
    50% { transform: scale(1.28); opacity: .52; }
}

@keyframes star-depart {
    to {
        transform: translate(-50%, -50%) scale(1.28);
        filter: blur(1px);
        opacity: .9;
    }
}

@media (max-width: 980px) {
    .constellation-heading h2 {
        font-size: clamp(1.9rem, 5vw, 3rem);
        white-space: normal;
    }

    .subtle-map {
        min-height: 680px;
    }

    .map-panel {
        width: min(18rem, 62vw);
    }

    .constellation-fallback {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 720px) {
    .constellation-section {
        width: 100%;
    }

    .subtle-map {
        min-height: 980px;
    }

    .map-star {
        left: var(--mx);
        top: var(--my);
    }

    .map-star--main {
        width: 5.2rem;
        height: 5.2rem;
    }

    .map-panel {
        left: 50%;
        top: 4.8rem;
        width: min(19rem, 82vw);
        transform: translate(-50%, .8rem);
        text-align: center;
    }

    .map-star--main:is(:hover, :focus-visible, .is-active) .map-panel {
        transform: translate(-50%, 0);
    }

    .minor-tooltip {
        left: 50%;
        top: 1.4rem;
        width: 13rem;
        transform: translate(-50%, .6rem);
        text-align: center;
    }

    .map-star--minor:is(:hover, :focus-visible, .is-active) .minor-tooltip {
        transform: translate(-50%, 0);
    }

    .constellation-fallback {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .constellation-line {
        transition-duration: .01ms;
    }

    .map-star,
    .map-star__halo,
    .map-star--main::before,
    .map-star--main::after,
    .map-star.is-departing {
        animation: none !important;
    }

    .map-star {
        opacity: 1;
        filter: none;
    }
}