/* ========================================================
   CONSTELLATION - Projets personnels
   Theme cosmique : ciel profond, étoiles, nébuleuses
   ======================================================== */

/* ========================================================
   VARIABLES DE THÈME COSMIQUE
   - Constellation (défaut) : violet / rose / bleu, accent doré
   - Blue / Green / Brown : variantes teintées
   ======================================================== */

/* ============== LA CARTE STELLAIRE ============== */
.starmap{
    position: relative;
    width: 100%;
    height: 92vh;
    min-height: 720px;
    margin: 0 auto 4rem;
    overflow: visible;
}

.projects-page .project-view[hidden]{
    display: none;
}
.projects-page .project-view-toggle{
    display: block;
    margin: 1rem auto;
}
.projects-page .projects-starmap{
    border: 1px solid rgba(180, 200, 255, .16);
    border-radius: 24px;
    background:
        radial-gradient(ellipse at 20% 18%, rgba(91, 73, 230, .22), transparent 55%),
        radial-gradient(ellipse at 78% 30%, rgba(230, 84, 167, .18), transparent 50%),
        radial-gradient(ellipse at 55% 82%, rgba(72, 200, 255, .16), transparent 55%),
        linear-gradient(180deg, #050616 0%, #08071a 45%, #04050f 100%);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
    overflow: visible;
}

.starmap svg.lines{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}
.starmap svg.lines line{
    stroke: rgba(200, 215, 255, 0.32);
    stroke-width: 1;
    stroke-linecap: round;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: draw-line 1.6s ease-out forwards;
    filter: drop-shadow(0 0 4px rgba(140, 170, 255, .35));
}
@keyframes draw-line{
    to{ stroke-dashoffset: 0; }
}

/* Étoile = bouton de projet */
.star{
    position: absolute;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 3;
    opacity: 0;
    animation: star-pop .9s ease-out forwards;
}
@keyframes star-pop{
    0%{ opacity:0; transform: translate(-50%,-50%) scale(.3); }
    100%{ opacity:1; transform: translate(-50%,-50%) scale(1); }
}

.star .dot{
    position: relative;
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, #fff 35%, #f6e6b3 55%, rgba(255,210,120,0) 75%);
    box-shadow:
        0 0 8px #fff,
        0 0 18px rgba(255, 230, 170, .9),
        0 0 38px rgba(255, 180, 120, .55),
        0 0 80px rgba(140, 170, 255, .35);
    animation: twinkle 3.4s ease-in-out infinite;
}
.star[data-size="lg"] .dot{ width: 20px; height: 20px; }
.star[data-size="sm"] .dot{ width: 10px; height: 10px; }

@keyframes twinkle{
    0%, 100%{ opacity: 1; transform: scale(1); }
    50%{ opacity: .55; transform: scale(.78); }
}

/* Ray cross around star (shine) */
.star .dot::before, .star .dot::after{
    content:"";
    position:absolute;
    top:50%; left:50%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
    transform-origin: center;
    pointer-events: none;
}
.star .dot::before{
    width: 60px; height: 1px;
    transform: translate(-50%,-50%);
    opacity: .55;
}
.star .dot::after{
    width: 1px; height: 60px;
    transform: translate(-50%,-50%);
    opacity: .55;
}

/* Label sous l'étoile */
.star .label{
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: .95rem;
    letter-spacing: .14em;
    color: #f3ebd6;
    text-shadow: 0 0 12px rgba(0,0,0,.8), 0 0 24px rgba(120,140,255,.35);
    text-transform: uppercase;
    pointer-events: none;
    transition: color .25s ease, text-shadow .25s ease, transform .25s ease;
}
.star .tag{
    display:block;
    text-align:center;
    margin-top: 2px;
    font-family: 'JetBrains Mono', monospace;
    font-size: .68rem;
    letter-spacing: .15em;
    color: #8896c8;
    text-transform: uppercase;
}

.star:hover .dot, .star:focus .dot{
    transform: scale(1.5);
    animation-play-state: paused;
    box-shadow:
        0 0 12px #fff,
        0 0 30px rgba(255, 230, 170, 1),
        0 0 60px rgba(255, 180, 120, .9),
        0 0 120px rgba(180, 200, 255, .7);
}
.star:hover .label, .star:focus .label{
    color: #fff;
    transform: translateX(-50%) translateY(2px);
    text-shadow: 0 0 18px rgba(255,230,170,.9);
}

/* Marquage de l'étoile active */
.star.is-active .dot{
    box-shadow:
        0 0 16px #fff,
        0 0 40px #ffd57a,
        0 0 90px rgba(255, 200, 120, .9);
}

/* ===== Tooltip details ===== */
.star-tooltip{
    position: absolute;
    transform: translate(-50%, calc(-100% - 28px));
    background: linear-gradient(135deg, var(--main-second), var(--main-background));
    border: 1px solid var(--main-fourth);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--text-dark);
    padding: .7rem 1rem;
    border-radius: 10px;
    max-width: 240px;
    font-size: .85rem;
    line-height: 1.4;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease;
    z-index: 10;
    box-shadow: 0 12px 40px rgba(0,0,0,.2), 0 0 30px color-mix(in srgb, var(--main-fourth) 18%, transparent);
}
.star-tooltip strong{ color: var(--main-link); letter-spacing: .1em; display:block; margin-bottom: .25rem;}
.star:hover + .star-tooltip, .star:focus + .star-tooltip{ opacity: 1; }

/* ===== Responsive ===== */
@media (max-width: 900px){
    .starmap{ height: 110vh; min-height: 760px; }
    .star .label{ font-size: .8rem; }
    .star .tag{ font-size: .58rem; }
    .star .dot::before, .star .dot::after{ width: 36px; height: 1px;}
    .star .dot::after{ width: 1px; height: 36px;}
}
@media (max-width: 600px){
    .starmap{ height: 130vh; min-height: 900px; }
    .star .label{ font-size: .7rem; letter-spacing: .08em;}
    .star .tag{ display: none; }
}