/* --- BASE & TYPOGRAPHIE (stars.css) --- */
/* Version droite */
@font-face {
    font-family: 'NotoSans';
    src: url('../fonts/NotoSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Satisfy';
    src: url('/fonts/satisfy.woff2') format('woff2');
    font-weight: normal; 
    font-style: normal; 
    font-display: block;
}

body { 
    margin: 0; 
    overflow: hidden; 
    font-family: 'Satisfy', Arial, sans-serif; 
}

#p5-holder { 
    position: fixed; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

/* --- LE CIEL --- */
.stars-wrapper {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-color: #040d30;
     background-image: radial-gradient(ellipse farthest-corner at 45px 45px, #08123d 0%, #02071a 50%, #609ee7 95%);
    z-index: -1;
    overflow: hidden;
   
}

/* --- ÉTOILES (Constellations & Poussière) --- */
.signal-star {
    fill: #fff;
    transform: none; 
    animation: signal-twinkle 4s infinite ease-in-out;
    backface-visibility: hidden;
    will-change: opacity;
}

.constellation-star { fill: #ffffff; }

@keyframes signal-twinkle {
    0%, 100% { opacity: 0.3; filter: brightness(1); }
    20%, 80% { opacity: 0.5; }
    50% { opacity: 1; filter: brightness(1.4); }
}

/* --- LA COMÈTE (Optimisée) --- */
.comet-mover {
    display: none; /* Piloté par le JS pour éviter le bug d'angle */
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform, opacity;
    animation: comet-pass 15s linear infinite;
}

@keyframes comet-pass {
    0% { transform: translate(-10vw, 105vh); opacity: 0; }
    1% { opacity: 1; }
    30% { transform: translate(105vw, -5vh); opacity: 0; }
    100% { opacity: 0; }
}

/* --- LE BOUTON (Perspective & Design) --- */
.perspective-container {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    perspective: 500px; /* L'objectif de la caméra */
    z-index: 10001;
    pointer-events: none;
}

#retour-studio {
    position: relative;
    display: block;
    width: 284px;
    height: 90px;
    background: #000;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15); 
    border-radius: 15px;
    overflow: hidden;
    pointer-events: auto;
    
    /* Effet 3D */
    transform: rotateX(30deg);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    
    /* Halo Lumineux */
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), 0 0 40px rgba(255, 255, 255, 0.2);
    
    will-change: transform, box-shadow;
    transition: box-shadow 0.3s ease; 
}

#retour-studio:hover {
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.4), 0 0 50px rgba(255, 255, 255, 0.3);
}

#signalCanvas {
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    pointer-events: none; /* Pour que l'utilisateur puisse cliquer sur le bouton derrière si besoin */
}

/* Assure-toi que le bouton de réponse reste au-dessus */
#reply-button-wrapper {
    position: fixed;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
}