/*
|--------------------------------------------------------------------------
|   public/css/habillage-saisonnier.css
|--------------------------------------------------------------------------
|
|   Habillage saisonnier (08/10), repris de villeneau-platform : le calque
|   animé « écran de veille », le ruban d'Octobre Rose et le bonnet de
|   Noël posés sur le logo. Tout réagit à l'attribut data-saison posé sur
|   <html> par public/js/habillage-saisonnier.js.
*/

:root {
    --octobre-rose: #f48fb1;
    --octobre-rose-fonce: #d81b60;
}

/* --- Calque animé --- */

/* Couvre tout l'écran, mais :
   - pointer-events: none → les clics passent au travers ;
   - z-index 90 → au-dessus des pages, SOUS la visionneuse (100). */
.habillage-calque {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 90;
}

/* Un élément : il part du haut (ou du bas) et traverse l'écran, en
   boucle tant que dure la veille. Durée et délai posés par le script. */
.habillage-particule {
    position: absolute;
    top: 0;
    line-height: 1;
    opacity: 0;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    user-select: none;
}
.habillage-particule.tombe { animation-name: habillage-tomber; }
.habillage-particule.monte { animation-name: habillage-monter; }

.habillage-balancement {
    display: inline-block;
    animation: habillage-balancer 3s ease-in-out infinite alternate;
}

@keyframes habillage-tomber {
    0%   { transform: translateY(-10vh); opacity: 0; }
    10%  { opacity: .85; }
    90%  { opacity: .85; }
    100% { transform: translateY(105vh); opacity: 0; }
}

@keyframes habillage-monter {
    0%   { transform: translateY(105vh); opacity: 0; }
    10%  { opacity: .85; }
    90%  { opacity: .85; }
    100% { transform: translateY(-10vh); opacity: 0; }
}

@keyframes habillage-balancer {
    from { transform: translateX(-15px) rotate(-20deg); }
    to   { transform: translateX(15px) rotate(20deg); }
}

/* Le script ne crée pas le calque dans ce cas ; cette règle couvre un
   réglage changé pendant que la page est ouverte. */
@media (prefers-reduced-motion: reduce) {
    .habillage-calque { display: none; }
}

/* --- Ruban et bonnet sur le logo --- */

/* La boîte autour du logo : c'est sur son coin que se calent le ruban
   et le bonnet, quelle que soit la largeur de l'image. */
.habillage-logo {
    position: relative;
    display: inline-flex;
}

/* Cachés par défaut. pointer-events: none : un clic dessus tombe sur
   le lien du logo. */
.habillage-ruban,
.habillage-bonnet {
    display: none;
    position: absolute;
    pointer-events: none;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25));
    z-index: 1;
}

/* Ruban : coin haut droit du logo. */
.habillage-ruban {
    top: -10px; right: -12px;
    width: 26px; height: 26px;
    transform: rotate(8deg);
}
.habillage-ruban .clair { fill: var(--octobre-rose); }
.habillage-ruban .fonce { fill: var(--octobre-rose-fonce); }

/* Bonnet : coin haut gauche, penché. */
.habillage-bonnet {
    top: -14px; left: -10px;
    width: 30px; height: 30px;
    transform: rotate(-18deg);
}

[data-saison='octobre-rose'] .habillage-ruban,
[data-saison='noel'] .habillage-bonnet {
    display: block;
}