/**
 * Yellow Diligence
 * Animations et micro-interactions globales.
 *
 * Les animations doivent rester discrètes, fluides et peu coûteuses.
 * On privilégie transform et opacity pour limiter les recalculs.
 */


/* ====================================================================
   Ripple
   ==================================================================== */

@keyframes yd-ripple-animation {

    0% {
        opacity: 0.5;
        transform:
            translate(-50%, -50%)
            scale(0);
    }

    70% {
        opacity: 0.22;
    }

    100% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(18);
    }

}


/* ====================================================================
   Vinyle
   ==================================================================== */

@keyframes yd-vinyl-spin {

    from {
        transform:
            translateX(6%)
            rotate(0deg);
    }

    to {
        transform:
            translateX(6%)
            rotate(360deg);
    }

}


/* ====================================================================
   Égaliseur
   ==================================================================== */

@keyframes yd-equalizer {

    0% {
        height: 25%;
        opacity: 0.65;
    }

    40% {
        height: 95%;
        opacity: 1;
    }

    70% {
        height: 45%;
        opacity: 0.8;
    }

    100% {
        height: 72%;
        opacity: 1;
    }

}


/* ====================================================================
   Scroll hint du Hero
   ==================================================================== */

@keyframes yd-scroll-hint {

    0%,
    100% {
        transform: translateY(0);
        opacity: 0.5;
    }

    50% {
        transform: translateY(0.45rem);
        opacity: 1;
    }

}

.yd-hero__scroll-hint i {
    animation:
        yd-scroll-hint
        1.65s
        var(--yd-ease)
        infinite;
}


/* ====================================================================
   Apparition douce du Hero
   ==================================================================== */

@keyframes yd-hero-reveal {

    from {
        opacity: 0;
        transform: translateY(1.25rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

.yd-hero__content {
    animation:
        yd-hero-reveal
        900ms
        var(--yd-ease-out)
        both;
}


/* ====================================================================
   Grain / texture
   ====================================================================

   Mouvement extrêmement léger pour éviter un fond totalement figé.
   Aucun intérêt si l'utilisateur préfère réduire les animations.
   ==================================================================== */

@keyframes yd-texture-drift {

    0% {
        transform: translate3d(0, 0, 0);
    }

    25% {
        transform: translate3d(-1%, 0.5%, 0);
    }

    50% {
        transform: translate3d(0.6%, -0.4%, 0);
    }

    75% {
        transform: translate3d(-0.4%, -0.6%, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }

}

.yd-global-texture {
    animation:
        yd-texture-drift
        18s
        steps(2, end)
        infinite;
}


/* ====================================================================
   Feuilles tropicales
   ==================================================================== */

@keyframes yd-leaf-float-left {

    0%,
    100% {
        transform:
            rotate(24deg)
            translate3d(0, 0, 0);
    }

    50% {
        transform:
            rotate(27deg)
            translate3d(0.6rem, -0.7rem, 0);
    }

}

@keyframes yd-leaf-float-right {

    0%,
    100% {
        transform:
            rotate(-34deg)
            scaleX(-1)
            translate3d(0, 0, 0);
    }

    50% {
        transform:
            rotate(-31deg)
            scaleX(-1)
            translate3d(-0.5rem, -0.8rem, 0);
    }

}

.yd-tropical-leaves--left {
    animation:
        yd-leaf-float-left
        13s
        ease-in-out
        infinite;
}

.yd-tropical-leaves--right {
    animation:
        yd-leaf-float-right
        15s
        ease-in-out
        infinite;
}


/* ====================================================================
   Brillance légère sur certaines cartes
   ==================================================================== */

@keyframes yd-soft-shine {

    0% {
        transform: translateX(-120%) rotate(10deg);
    }

    100% {
        transform: translateX(170%) rotate(10deg);
    }

}

.yd-member-card::after,
.yd-player::after,
.yd-concert--featured::after {
    content: "";

    position: absolute;
    top: -30%;
    bottom: -30%;
    left: -30%;

    width: 18%;

    pointer-events: none;

    opacity: 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.07),
            transparent
        );

    transform:
        translateX(-120%)
        rotate(10deg);
}

.yd-member-card:hover::after,
.yd-player:hover::after,
.yd-concert--featured:hover::after {
    opacity: 1;

    animation:
        yd-soft-shine
        850ms
        var(--yd-ease-out)
        both;
}


/* ====================================================================
   Pulsation du bouton lecture
   ==================================================================== */

@keyframes yd-play-pulse {

    0% {
        box-shadow:
            0 0 0 0 rgba(242, 183, 5, 0.28),
            var(--yd-shadow-yellow);
    }

    70% {
        box-shadow:
            0 0 0 0.8rem rgba(242, 183, 5, 0),
            var(--yd-shadow-yellow);
    }

    100% {
        box-shadow:
            0 0 0 0 rgba(242, 183, 5, 0),
            var(--yd-shadow-yellow);
    }

}

.yd-player.is-playing
.yd-player__main-button {
    animation:
        yd-play-pulse
        2.2s
        ease-out
        infinite;
}


/* ====================================================================
   Piste active
   ==================================================================== */

@keyframes yd-track-active {

    0% {
        box-shadow:
            inset 0 0 0 0 rgba(37, 115, 59, 0);
    }

    50% {
        box-shadow:
            inset 0 0 0 1px rgba(37, 115, 59, 0.34);
    }

    100% {
        box-shadow:
            inset 0 0 0 0 rgba(37, 115, 59, 0);
    }

}

.yd-player.is-playing
.yd-player__track.is-active {
    animation:
        yd-track-active
        2.4s
        ease-in-out
        infinite;
}


/* ====================================================================
   Apparition filtre galerie
   ==================================================================== */

/* ====================================================================
   Concert mis en avant
   ==================================================================== */

@keyframes yd-featured-border {

    0%,
    100% {
        border-color: rgba(242, 183, 5, 0.35);
    }

    50% {
        border-color: rgba(242, 183, 5, 0.62);
    }

}

.yd-concert--featured {
    animation:
        yd-featured-border
        4.2s
        ease-in-out
        infinite;
}


/* ====================================================================
   Petite animation d'entrée des cartes sans AOS
   ====================================================================

   Sert uniquement comme fallback lorsque des éléments sont rendus
   dynamiquement après chargement.
   ==================================================================== */

/* ====================================================================
   Accessibilité : mouvement réduit
   ==================================================================== */

@media (prefers-reduced-motion: reduce) {

    .yd-hero__content,
    .yd-hero__scroll-hint i,
    .yd-global-texture,
    .yd-tropical-leaves,
    .yd-record__vinyl,
    .yd-equalizer__bar,
    .yd-player__main-button,
    .yd-player__track,
    .yd-concert--featured,
    .yd-gallery__item,
    .yd-member-card::after,
    .yd-player::after,
    .yd-concert--featured::after {
        animation: none !important;
    }

}


/* ====================================================================
   Sécurité AOS
   ====================================================================

   Le contenu doit rester visible même si AOS ne s'initialise pas.
   La classe .aos-ready est ajoutée par app.js uniquement lorsque
   AOS est disponible et initialisé correctement.
   ==================================================================== */

html:not(.aos-ready) [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}