/* CONDORMAN — ANIMATIONS CSS, SANS JAVASCRIPT.
   Cette feuille complète style.css. Elle ne change pas les largeurs.
   Les animations automatiques sont courtes et ne tournent pas en boucle. */

/* 1. TRANSITION : le bouton s’enfonce dans son ombre au survol.
   focus-visible donne la même réaction au clavier. */
.bouton {
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s, color 0.2s;
}

.bouton:hover, .bouton:focus-visible {
    transform: translate(3px, 3px);
    box-shadow: 2px 2px 0 #151515;
}

/* 2. BATTERIE : quatre clignotements, puis extinction du témoin.
   forwards conserve l’état de la dernière image de l’animation. */
.batterie span {
    animation: batterie-vide 1s 4 forwards;
}

@keyframes batterie-vide {
    0% { opacity: 1; }
    50% { opacity: 0; }
    75% { opacity: 1; }
    100% { opacity: 0; }
}

/* 3. BZZZ : deux petites vibrations, après 1 seconde d’attente.
   On conserve l’inclinaison de départ dans chaque étape. */
.cri {
    animation: vibration 0.45s 1s 2;
}

.cri:hover {
    animation: vibration-survol 0.45s 2;
}

@keyframes vibration {
    0%, 100% { transform: rotate(-7deg) translateX(0); }
    20%, 60% { transform: rotate(-7deg) translateX(-5px); }
    40%, 80% { transform: rotate(-7deg) translateX(5px); }
}

/* Un second nom permet de rejouer la vibration au survol. */
@keyframes vibration-survol {
    0%, 100% { transform: rotate(-7deg) translateX(0); }
    20%, 60% { transform: rotate(-7deg) translateX(-5px); }
    40%, 80% { transform: rotate(-7deg) translateX(5px); }
}

/* 4. GALERIE : une affiche se soulève légèrement au survol.
   Le texte de la page ne bouge pas et les images restent entières. */
.affiche .lien-image {
    transition: transform 0.2s, box-shadow 0.2s;
}

.affiche .lien-image:hover, .affiche .lien-image:focus-visible {
    transform: translateY(-5px);
    box-shadow: 0 5px 0 #151515;
}

/* 5. CHARGEMENT : les points démarrent à l’entrée dans le contact.
   focus-within fonctionne aussi lorsqu’un champ reçoit le focus clavier.
   Les classes point-2 et point-3 rendent le décalage explicite. */
.chargement span {
    display: inline-block;
}

#contact:hover .chargement span,
#contact:focus-within .chargement span {
    animation: point-charge 0.9s 3;
}

#contact:hover .chargement .point-2,
#contact:focus-within .chargement .point-2 {
    animation-delay: 0.15s;
}

#contact:hover .chargement .point-3,
#contact:focus-within .chargement .point-3 {
    animation-delay: 0.3s;
}

@keyframes point-charge {
    0%, 100% { opacity: 1; transform: translateY(0); }
    50% { opacity: 0.2; transform: translateY(-5px); }
}

/* 6. CONTACT : l’enveloppe perd courage à l’approche du visiteur. */
#contact:hover .enveloppe,
#contact:focus-within .enveloppe {
    animation: courrier-fatigue 1.2s 1 forwards;
}

@keyframes courrier-fatigue {
    0% { transform: rotate(-9deg) translateY(0); }
    45% { transform: rotate(5deg) translateY(-6px); }
    100% { transform: rotate(-17deg) translateY(9px); }
}

/* 7. La réponse apparaît lorsque le visiteur ouvre details.
   Le clic ne transmet rien : le comportement reste celui du HTML natif. */
.envoi[open] .erreur {
    animation: message-rate 0.45s 1;
}

@keyframes message-rate {
    0% { opacity: 0; transform: translateY(-7px); }
    65% { opacity: 1; transform: translateY(3px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 8. ACCESSIBILITÉ : respecter le choix de réduire les mouvements.
   Cette media query n’est pas du responsive : elle lit une préférence.
   Le contenu et toutes les commandes restent disponibles. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .batterie span, .cri, .cri:hover,
    #contact:hover .chargement span,
    #contact:focus-within .chargement span,
    #contact:hover .enveloppe,
    #contact:focus-within .enveloppe,
    .envoi[open] .erreur {
        animation: none;
    }

    .bouton, .affiche .lien-image {
        transition: none;
    }

    .bouton:hover, .bouton:focus-visible,
    .affiche .lien-image:hover, .affiche .lien-image:focus-visible {
        transform: none;
    }
}