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

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

/* Fond animé avec points roses */
.section-about::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image:
        radial-gradient(circle, #FFB8FA 3px, transparent 3px),
        radial-gradient(circle, #FF84F7 2px, transparent 2px);
    background-size: 80px 80px, 80px 80px;
    background-position: 0 0, 40px 40px;
    opacity: 0.5;
    z-index: 0;
    animation: pixelScroll 10s linear infinite;
}

@keyframes pixelScroll {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(80px, 80px);
    }
}

/* ============================================ */
/* 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 */
/* ============================================ */

/* Masque blanc en HAUT du About (apparition des points) */
.section-about::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 180px;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.9) 20%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(255, 255, 255, 0.2) 80%,
        rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
    z-index: 2;
}

/* ============================================ */
/* 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;
}

/* Masque blanc en BAS du About (disparition des points) */
.about-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 180px;
    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: 2;
}

/* ============================================ */
/* 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) {
    /* Animation de fond désactivée sur mobile */
    .section-about::before {
        animation: none;
    }

    /* Gradients blancs désactivés sur mobile */
    .section1::before,
    .section1::after,
    .section-about::after,
    .about-wrapper::after {
        display: none;
    }

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

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