/*
 * Clé de sol du héros de la homepage (public/assets/css/hero.css).
 *
 * Nouveau fichier volontairement séparé de style.css : ne pas emporter les
 * modifications en cours du porteur du projet sur ce fichier. 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. L'image est un
 * enfant direct de .hero (déjà position: relative dans style.css), en absolu
 * pleine hauteur côté droit ; le .container repasse au-dessus par z-index —
 * même montage que le masthead de ContreAttHack. L'ordre d'empilement est
 * naturel : ::before (halos du fond) < .clef < .container.
 *
 * Sélecteurs à la même spécificité que style.css : ce fichier étant chargé
 * après, il l'emporte sans !important ; le drop-shadow continue de venir de
 * style.css (.lyr .clef).
 */
.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: 0;
}

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

@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;
    }
}

/* --- Arrivée de la clé de sol, façon « chevrons ContreAttHack » (03/09) ----
   L'animation est portée par la classe is-playing, posée et REJOUÉE toutes
   les 20 s par home-hero.js (retrait + relecture + repose). Sans JavaScript,
   la classe n'arrive jamais : la clé s'affiche d'emblée à sa place. */
.lyr .hero .clef.is-playing {
    animation: clef-drop 900ms cubic-bezier(.22, .61, .36, 1) both;
}

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

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

/* --- Stabilité de la 2e ligne du titre (03/09) ------------------------------
   Typed.js vide entièrement le <span> entre deux variantes : sans contenu, la
   ligne disparaissait un instant et tout le héros sautait. L'espace sans
   chasse (U+200B) posé en ::after survit aux réécritures de Typed et garde la
   boîte de ligne en place — la 2e ligne du h1 est ainsi TOUJOURS présente. */
.lyr .hero .hero-typed::after {
    content: "\200B";
}