/* ============================
   Fichier : animation.css
   Auteur : lyunabi
   Description : Animations et transitions pour les sections
   ============================ */

/* ============================================ */
/* ANIMATION DE FOND - POINTS RÉTRO */
/* ============================================ */

/* ── Section about : fond clair ── */
.section-about {
    background: white;
    position: relative;
    /* overflow: hidden retiré — nécessaire pour position: sticky sur le watermark */
}

.about-wrapper {
    overflow: hidden; /* contient le watermark dans les limites du bloc */
}

/* Dot grid rose — palette stricte */
.section-about::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 132, 247, 0.35) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 1;
}

@keyframes auroraFloat {
    0%   { transform: translate(0%, 0%) scale(1); }
    25%  { transform: translate(10%, 14%) scale(1.14); }
    50%  { transform: translate(-12%, 7%) scale(0.90); }
    75%  { transform: translate(8%, -10%) scale(1.20); }
    100% { transform: translate(-8%, 16%) scale(1.08); }
}

/* ============================================ */
/* MASQUES BLANCS - HERO SECTION */
/* ============================================ */

/* Masque blanc en HAUT du Hero (apparition progressive) */
.section1::before {
    display: none;
}

/* Masque blanc en BAS du Hero (transition vers About) */
.section1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.2) 20%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(255, 255, 255, 0.9) 80%,
        rgba(255, 255, 255, 1) 100%
    );
    pointer-events: none;
    z-index: 10;
}

/* ============================================ */
/* MASQUES BLANCS - ABOUT SECTION */
/* ============================================ */

/* Aurora — désactivée */
.section-about::after {
    content: none;
}

/* ============================================ */
/* WRAPPER POUR MASQUE BAS DU ABOUT */
/* ============================================ */

/* 
IMPORTANT : Entourer la section-about d'un wrapper
Structure HTML nécessaire :
<div class="about-wrapper">
    <div class="section-about">
        ... contenu ...
    </div>
</div>
*/

.about-wrapper {
    position: relative;
}


/* ============================================ */
/* ANIMATION DU CURSEUR (Typing) */
/* ============================================ */

.cursor {
    display: inline-block;
    width: 3px;
    height: 30px;
    background: #1E1E1E;
    margin-left: 3px;
    animation: blink 0.75s step-end infinite;
    vertical-align: text-bottom;
}

@keyframes blink {
    0%, 49% { 
        opacity: 1; 
    }
    50%, 100% { 
        opacity: 0; 
    }
}

/* ============================================ */
/* RESPONSIVE */
/* ============================================ */

@media (max-width: 768px) {
    /* Gradient de transition hero désactivé sur mobile */
    .section1::before,
    .section1::after {
        display: none;
    }

    /* Curseur plus petit sur mobile */
    .cursor {
        height: 20px;
    }
}

@media (max-width: 480px) {
    /* Curseur encore plus petit */
    .cursor {
        height: 18px;
    }
}