/*
 * Clé de sol du héros de la homepage (public/assets/css/hero.css).
 *
 * Fichier séparé de style.css à dessein (historique : ne pas emporter les
 * modifications en cours du porteur sur style.css). Chargé via le tableau
 * cssFiles passé à common/header depuis app/Views/home.php.
 *
 * La clé de sol dorée (public/assets/logos/lyrico-favicon.png) est un CALQUE
 * de la section (demande porteur 03/09 soir) : affichée EN ENTIER, sur toute
 * la hauteur du hero, posée SOUS le texte mais SUR le fond. Ordre d'empilement
 * naturel : ::before/::after (partition et voile, z-index négatifs) < .hero-notes
 * (notes qui montent, z-index 0) < .clef < .container.
 *
 * 09/10/2026 : plus aucun JavaScript sur la homepage (Typed.js retiré, demande
 * porteur). L'arrivée de la clé « façon chevrons ContreAttHack », rejouée toutes
 * les 20 s, est désormais une animation CSS infinie dont le cycle dure 20 s :
 * la descente occupe les 900 premières millisecondes (4,5 % du cycle), le reste
 * du temps la clé est immobile. prefers-reduced-motion coupe l'animation.
 */
.lyr .hero {
    overflow: hidden; /* l'arrivée animée de la clé ne déborde jamais de la section */
}

.lyr .hero > .clef {
    position: absolute;
    top: 0;
    right: clamp(1rem, 6vw, 6rem);
    height: 100%;
    width: auto;
    max-width: none;
    max-height: none;
    margin: 0;
    object-fit: contain;
    z-index: 1;
    animation: clef-drop 20s cubic-bezier(.22, .61, .36, 1) infinite;
}

.lyr .hero > .container {
    position: relative;
    z-index: 2;
}

@media (max-width: 860px) {
    /* Sur petit écran, le texte passe par-dessus la clé : elle reste entière
       et pleine hauteur, mais s'estompe et glisse vers le bord pour ne jamais
       gêner la lecture. */
    .lyr .hero > .clef {
        right: -12%;
        opacity: .25;
    }
}

@keyframes clef-drop {
    0%    { opacity: 0; transform: translateY(-45%); }
    4.5%  { opacity: 1; transform: translateY(0); }
    100%  { opacity: 1; transform: translateY(0); }
}

@media (max-width: 860px) {
    @keyframes clef-drop {
        0%    { opacity: 0; transform: translateY(-45%); }
        4.5%  { opacity: .25; transform: translateY(0); }
        100%  { opacity: .25; transform: translateY(0); }
    }
}

@media (prefers-reduced-motion: reduce) {
    .lyr .hero > .clef { animation: none; }
}

/* --- Notes qui montent : position, délai et durée de chacune des dix notes de home.php.
   Variables lues par .lyr .note dans style.css (animation note-monte). Les abscisses se
   concentrent sur la moitié droite, là où la partition du fond est découverte ; --repos est
   l'ordonnée de repos quand le mouvement est coupé (prefers-reduced-motion). --- */
.lyr .note:nth-child(1)  { left: 46%; --delai: 0s;    --duree: 15s; --repos: 4%; }
.lyr .note:nth-child(2)  { left: 58%; --delai: -3s;   --duree: 12s; --repos: 30%; }
.lyr .note:nth-child(3)  { left: 66%; --delai: -7s;   --duree: 17s; --repos: 12%; }
.lyr .note:nth-child(4)  { left: 74%; --delai: -1.5s; --duree: 13s; --repos: 42%; }
.lyr .note:nth-child(5)  { left: 82%; --delai: -9s;   --duree: 14s; --repos: 22%; }
.lyr .note:nth-child(6)  { left: 90%; --delai: -5s;   --duree: 16s; --repos: 50%; }
.lyr .note:nth-child(7)  { left: 52%; --delai: -11s;  --duree: 18s; --repos: 60%; }
.lyr .note:nth-child(8)  { left: 70%; --delai: -13s;  --duree: 12.5s; --repos: 8%; }
.lyr .note:nth-child(9)  { left: 86%; --delai: -2.5s; --duree: 15.5s; --repos: 36%; }
.lyr .note:nth-child(10) { left: 62%; --delai: -6.5s; --duree: 13.5s; --repos: 55%; }
@media (max-width: 860px) {
    /* Sur petit écran le texte occupe toute la largeur : les notes passeraient dessus. On les retire. */
    .lyr .note { display: none; }
}