/**
 * THÈMES SAISONNIERS — le décor (Octobre Rose, Halloween)
 *
 * Chargé par base.html.twig pendant la période des thèmes seulement
 * (cf. App\Shared\Enum\SeasonalTheme). Les couleurs sont des tokens, dans
 * ds-theme-tokens.css ; ici vivent les bandeaux du sélecteur, le héros de
 * l'accueil, la colonne de navigation et l'effet d'arrivée que joue le
 * contrôleur Stimulus `seasonal-theme`.
 *
 * Images : générées par Vertex (style maison, « flat vector »), dans
 * assets/core/img/seasonal/.
 */

/* =============================================
   SÉLECTEUR — un bandeau à l'image de chaque thème, sous les pastilles
   ============================================= */
.theme-seasonal {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.theme-btn.theme-btn--seasonal {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    border-radius: var(--radius-ui);
    background-size: cover;
    background-position: center 60%;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: left;
    overflow: hidden;
}

.theme-btn.theme-btn--seasonal:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
}

.theme-btn[data-theme="octobre-rose"] {
    background-image:
        linear-gradient(90deg, rgba(252, 231, 243, 0.96) 0%, rgba(252, 231, 243, 0.7) 45%, rgba(252, 231, 243, 0) 75%),
        url("../../core/img/seasonal/octobre-rose-thumb-H9hTeWr.webp");
    color: #9d174d;
}

.theme-btn[data-theme="halloween"] {
    background-image:
        linear-gradient(90deg, rgba(20, 10, 35, 0.92) 0%, rgba(20, 10, 35, 0.5) 50%, rgba(20, 10, 35, 0) 75%),
        url("../../core/img/seasonal/halloween-thumb-pH6YmIZ.webp");
    background-position: center 85%;
    color: #fed7aa;
}

/* =============================================
   HÉROS DE L'ACCUEIL — l'illustration derrière le texte et le panneau
   Le voile de gauche garde le texte blanc lisible ; le motif de droite
   transparaît sous le verre du panneau.
   ============================================= */
[data-theme="octobre-rose"] .hero-section {
    background:
        linear-gradient(90deg, rgba(157, 23, 77, 0.94) 0%, rgba(190, 24, 93, 0.84) 38%, rgba(219, 39, 119, 0.35) 62%, rgba(219, 39, 119, 0.05) 85%),
        url("../../core/img/seasonal/octobre-rose-hero-8wUzuQJ.webp") center / cover no-repeat;
    animation: none;
}

[data-theme="octobre-rose"] .hero-panel {
    background: rgba(131, 24, 67, 0.3);
    backdrop-filter: blur(6px) saturate(140%);
}

/* Thème sombre : le texte du héros, foncé ailleurs, repasse en blanc sur la nuit. */
[data-theme="halloween"] .hero-section {
    --text-inverse: #ffffff;
    background:
        linear-gradient(90deg, rgba(18, 9, 32, 0.7) 0%, rgba(18, 9, 32, 0.35) 45%, rgba(18, 9, 32, 0) 70%),
        url("../../core/img/seasonal/halloween-hero-lAeitn8.webp") center bottom / cover no-repeat;
    animation: none;
    box-shadow: 0 12px 40px -12px rgba(249, 115, 22, 0.5);
}

/* Le texte du héros passe devant l'illustration (la phrase du bas, devant les citrouilles). */
[data-theme="octobre-rose"] .hero-left,
[data-theme="halloween"] .hero-left {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 0 12px rgba(0, 0, 0, 0.35);
}

[data-theme="halloween"] .hero-left {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 14px rgba(10, 5, 16, 0.9);
}

/* La lune transparaît sous le verre, assez voilée pour que le texte reste lisible. */
[data-theme="halloween"] .hero-panel {
    background: rgba(18, 9, 32, 0.55);
    border-color: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(10px) saturate(140%);
}

/* Une chauve-souris traverse le haut du héros de temps en temps… */
[data-theme="halloween"] .hero-pattern::before {
    width: 46px;
    height: 23px;
    top: 7%;
    left: -60px;
    right: auto;
    border-radius: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50'%3E%3Cpath fill='%23120a1f' d='M50 18C48 18 47 16 46 12 45 15 44 17 42 18 36 12 26 8 12 10c6 4 8 10 6 16 6-3 12-2 16 2 2-3 6-4 8-2 2 4 5 8 8 12 3-4 6-8 8-12 2-2 6-1 8 2 4-4 10-5 16-2-2-6 0-12 6-16-14-2-24 2-30 8-2-1-3-3-4-6-1 4-2 6-4 6z'/%3E%3C/svg%3E") center / contain no-repeat;
    animation:
        seasonal-hero-bat 14s linear 2s infinite,
        seasonal-flap 0.18s ease-in-out infinite alternate;
}

/* …et une araignée descend de son fil quand on passe la souris. */
[data-theme="halloween"] .hero-pattern::after {
    width: 24px;
    height: 120px;
    top: -110px;
    bottom: auto;
    left: 56%;
    right: auto;
    border-radius: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 120'%3E%3Cline x1='12' y1='0' x2='12' y2='104' stroke='white' stroke-opacity='.55' stroke-width='.8'/%3E%3Cg stroke='%230a0510' stroke-width='1.3' fill='none' stroke-linecap='round'%3E%3Cpath d='M9 108 4 103 2 106M8 110 2 109 0 113M8 113 3 116 2 120M9 115 6 119M15 108 20 103 22 106M16 110 22 109 24 113M16 113 21 116 22 120M15 115 18 119'/%3E%3C/g%3E%3Ccircle cx='12' cy='106.5' r='4' fill='%230a0510'/%3E%3Ccircle cx='12' cy='113' r='5.5' fill='%230a0510'/%3E%3Ccircle cx='10.5' cy='105.8' r='1' fill='%23f97316'/%3E%3Ccircle cx='13.5' cy='105.8' r='1' fill='%23f97316'/%3E%3C/svg%3E") center / contain no-repeat;
    animation: none;
    transition: transform 1.1s cubic-bezier(0.34, 1.4, 0.64, 1);
}

[data-theme="halloween"] .hero-section:hover .hero-pattern::after {
    transform: translateY(85px);
}

/* `left` et non `translate` : il se mesure sur la largeur du héros, quel que soit l'écran. */
@keyframes seasonal-hero-bat {
    0% {
        left: -60px;
        top: 7%;
    }

    25% {
        top: 14%;
    }

    50%,
    100% {
        left: calc(100% + 60px);
        top: 4%;
    }
}

/* =============================================
   COLONNE DE NAVIGATION — l'illustration posée en bas, fondue vers le haut
   Le fond uni reprend la couleur du ciel de l'image : la jointure ne se voit pas.
   ============================================= */
[data-theme="octobre-rose"] .rail {
    background:
        linear-gradient(to bottom, #faf4f7 calc(100% - 420px), rgba(250, 244, 247, 0) calc(100% - 300px)),
        url("../../core/img/seasonal/octobre-rose-rail-rg0x0Cl.webp") center bottom / 232px auto no-repeat,
        #faf4f7;
}

[data-theme="halloween"] .rail {
    background:
        linear-gradient(to bottom, #201136 calc(100% - 420px), rgba(32, 17, 54, 0) calc(100% - 300px)),
        url("../../core/img/seasonal/halloween-rail-TV6s4IN.webp") center bottom / 232px auto no-repeat,
        #201136;
}

/* =============================================
   LIGNE « HABILLEZ VOTRE INTRANET » DU HÉROS
   ============================================= */
.hero-seasonal-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.85;
}

.hero-seasonal-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.hero-seasonal-btn {
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.2rem 0.7rem;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.12);
    color: inherit;
    cursor: pointer;
    transition: background var(--transition-normal), transform var(--transition-normal);
}

.hero-seasonal-btn:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: translateY(-1px);
}

.hero-seasonal-btn[aria-pressed="true"] {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--primary-600);
}

[data-theme="halloween"] .hero-seasonal-btn[aria-pressed="true"] {
    background: #f97316;
    border-color: #f97316;
    color: #1a0f24;
}

/* =============================================
   EFFET D'ARRIVÉE — joué une fois, quand on adopte le thème
   ============================================= */
.seasonal-fx {
    position: fixed;
    inset: 0;
    z-index: 10000;
    overflow: hidden;
    pointer-events: none;
}

.seasonal-fx svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Octobre Rose : un halo rose, puis la pluie de rubans, pétales et cœurs. */
.seasonal-fx--rose::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 30%, rgba(244, 114, 182, 0.35), rgba(244, 114, 182, 0) 65%);
    animation: seasonal-glow 4.8s ease both;
}

.seasonal-fx-fall {
    position: absolute;
    top: -60px;
    left: var(--x);
    width: var(--size);
    height: var(--size);
    animation: seasonal-fall var(--duration) cubic-bezier(0.3, 0.1, 0.6, 1) var(--delay) both;
}

/* Halloween : la nuit tombe d'un coup, la lune se lève, les chauves-souris la traversent. */
.seasonal-fx--night {
    animation: seasonal-night 4.8s ease both;
}

.seasonal-fx--night::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 72% 28%, #fefce8 0, #fde68a 8.5vh, rgba(253, 230, 138, 0.45) 9vh, rgba(249, 115, 22, 0.14) 15vh, rgba(249, 115, 22, 0) 30vh);
    animation: seasonal-glow 4.8s ease both;
}

.seasonal-fx-fly {
    filter: drop-shadow(0 0 6px rgba(249, 115, 22, 0.75));
    position: absolute;
    top: var(--y);
    left: -12vw;
    width: var(--size);
    height: var(--size);
    animation: seasonal-fly var(--duration) ease-in var(--delay) both;
}

.seasonal-fx-fly svg {
    animation: seasonal-flap var(--flap) ease-in-out infinite alternate;
}

.seasonal-fx-fly--ghost svg {
    animation: seasonal-wobble 0.6s ease-in-out infinite alternate;
}

@keyframes seasonal-glow {
    0% {
        opacity: 0;
    }

    15%,
    65% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes seasonal-fall {
    0% {
        opacity: 0;
        transform: translate(0, 0) rotate(0deg);
    }

    10%,
    85% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(var(--drift), calc(100vh + 80px)) rotate(var(--spin));
    }
}

@keyframes seasonal-night {
    0% {
        background: rgba(8, 3, 15, 0);
    }

    12% {
        background: rgba(8, 3, 15, 0.8);
    }

    60% {
        background: rgba(8, 3, 15, 0.6);
    }

    100% {
        background: rgba(8, 3, 15, 0);
    }
}

@keyframes seasonal-fly {
    0% {
        translate: 0 0;
    }

    100% {
        translate: 125vw var(--rise);
    }
}

@keyframes seasonal-flap {
    from {
        scale: 1 1;
    }

    to {
        scale: 1 0.45;
    }
}

@keyframes seasonal-wobble {
    from {
        rotate: -8deg;
    }

    to {
        rotate: 8deg;
    }
}

/* Réduire les animations : le décor reste, rien ne bouge. */
@media (prefers-reduced-motion: reduce) {
    .seasonal-fx {
        display: none;
    }

    [data-theme="halloween"] .hero-pattern::before {
        display: none;
    }

    [data-theme="halloween"] .hero-pattern::after {
        transition: none;
    }
}