/*
 * Fenêtre « Halloween est là ! » de l'accueil (scripts/halloween.js).
 *
 * Une boîte crème au centre, et autour d'elle cinq décors qui apparaissent
 * l'un après l'autre : la toile accrochée au coin haut droit de l'écran,
 * l'araignée qui descend au bout de son fil, le fantôme qui flotte, la
 * lanterne et la citrouille posées sur le bas de la boîte.
 */
.halloween {
    position: fixed;
    inset: 0;
    width: min(30rem, calc(100% - 2 * var(--marge-mobile)));
    max-width: none;
    max-height: none;
    margin: auto;
    height: fit-content;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
    color: var(--texte);
}

.halloween::backdrop {
    background: rgba(30, 14, 12, 0.62);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    animation: halloween-fondu 400ms ease-out both;
}

.halloween__boite {
    position: relative;
    z-index: 1;
    padding: var(--espace-5) var(--espace-4) var(--espace-6);
    border: 1px solid var(--bordeaux-clair);
    border-radius: var(--rayon-l);
    background: var(--creme);
    animation: halloween-ouverture 400ms ease-out both;
    box-shadow: 0 18px 50px rgba(30, 14, 12, 0.35), 0 0 60px rgba(240, 140, 40, 0.18);
    text-align: center;
    /* Téléphone en paysage, texte agrandi : la boîte défile plutôt que de
       sortir de l'écran. Les décors sont hors de la boîte, jamais rognés. */
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
}

.halloween__fermer {
    position: absolute;
    top: var(--espace-1);
    right: var(--espace-1);
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: var(--rayon-rond);
    background: transparent;
    color: var(--texte-doux);
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}

.halloween__fermer:hover,
.halloween__fermer:focus-visible { background: var(--creme-sombre); color: var(--texte); }

.halloween__surtitre {
    margin: 0;
    font-family: var(--police-manuscrite);
    font-size: var(--taille-l);
    color: var(--bordeaux-clair);
}

.halloween__titre {
    margin: 0 0 var(--espace-2);
    font-family: var(--police-titre);
    font-size: clamp(var(--taille-xl), 7vw, var(--taille-xxl));
    font-weight: 700;
    color: var(--bordeaux);
}

.halloween__insecable { white-space: nowrap; }

.halloween__actions .bouton { white-space: nowrap; }

.halloween__texte {
    max-width: 24rem;
    margin: 0 auto var(--espace-3);
    color: var(--texte-doux);
    line-height: 1.6;
}

.halloween__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espace-1);
}

.halloween__plus-tard {
    min-height: 2.75rem;
    padding: 0 var(--espace-2);
    border: 0;
    background: transparent;
    color: var(--texte-doux);
    font: inherit;
    font-size: var(--taille-s);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.halloween__plus-tard:hover { color: var(--texte); }

/* — Les décors — */

.halloween__decor {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    animation: halloween-apparition 700ms cubic-bezier(0.2, 0.8, 0.3, 1.2) both;
}

.halloween__decor img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.3));
}

/* Les deux toiles, accrochées aux coins hauts de l'écran. Fixées par rapport
   à l'écran : la fenêtre elle-même n'est jamais transformée, sans quoi les
   toiles seraient prises dans son cadre. L'image est dessinée pour le coin
   gauche ; retournée, elle sert au coin droit. */
.halloween__decor--toile,
.halloween__decor--toile-gauche {
    position: fixed;
    z-index: 0;
    top: 0;
    width: clamp(12rem, 26vw, 24rem);
    animation-name: halloween-toile;
    animation-duration: 900ms;
}

.halloween__decor--toile { right: 0; transform-origin: top right; animation-delay: 300ms; }
.halloween__decor--toile-gauche { left: 0; transform-origin: top left; animation-delay: 150ms; }

.halloween__decor--toile img,
.halloween__decor--toile-gauche img { filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5)); }

.halloween__decor--toile img { transform: scaleX(-1); }

/* L'araignée arrive la dernière : elle descend du haut de l'écran au bout de
   son fil, avec un petit rebond, puis remonte et redescend sans fin. Le fil
   s'arrête sous son corps, caché par lui : il bouge avec elle et reste
   attaché. */
.halloween__decor--araignee {
    --yoyo: 2rem;
    top: -7.5rem;
    left: 0.5rem;
    width: 9.5rem;
    animation:
        halloween-descente 2200ms cubic-bezier(0.25, 1.15, 0.5, 1) 1800ms both,
        halloween-yoyo 2.6s ease-in-out 4s infinite alternate;
}

.halloween__decor--araignee::before {
    content: "";
    position: absolute;
    bottom: 55%;
    left: calc(50% - 0.5px);
    width: 1px;
    height: 100vh;
    background: rgba(255, 255, 255, 0.75);
}

.halloween__decor--araignee img { position: relative; }

/* Le fantôme, à moitié hors de la boîte, à droite. Placé par la gauche et
   par le haut, pour pouvoir glisser derrière la boîte au départ. */
.halloween__decor--fantome {
    --fantome: 12rem;
    top: calc(50% - var(--fantome) * 0.75);
    left: calc(100% - 2.5rem);
    width: var(--fantome);
    animation-name: halloween-fantome;
    animation-delay: 1100ms;
    animation-duration: 900ms;
}

.halloween__decor--fantome img { animation: halloween-flotter 4s ease-in-out 2s infinite; }

/* « Découvrir les produits » : le fantôme passe derrière la boîte, puis en
   surgit en grossissant, comme s'il fonçait vers la visiteuse. La page de la
   collection s'ouvre à la fin (scripts/halloween.js). */
.halloween--depart .halloween__decor--fantome {
    animation: halloween-surgir 1400ms ease-in both;
}

.halloween--depart .halloween__decor--fantome img { animation: none; }

/* La lanterne et la citrouille, posées sur le bas de la boîte. */
.halloween__decor--lanterne {
    bottom: -3.5rem;
    left: -3.5rem;
    width: 8.5rem;
    transform-origin: bottom center;
    animation-name: halloween-pousse;
    animation-delay: 500ms;
}

.halloween__decor--citrouille-chapeau {
    bottom: -3.5rem;
    right: -2.5rem;
    width: 9rem;
    transform-origin: bottom center;
    animation-name: halloween-pousse;
    animation-delay: 900ms;
}

/* Lueur de bougie dans la lanterne et la citrouille : une copie de l'image,
   illuminée une fois pour toutes, apparaît et s'efface (seule sa
   transparence s'anime, sans redessiner l'image). */
.halloween__decor .halloween__lueur {
    position: absolute;
    inset: 0;
    filter: drop-shadow(0 0 14px rgba(255, 150, 40, 0.55)) brightness(1.06);
    opacity: 0;
    animation: halloween-lueur 2.8s ease-in-out 1.6s infinite;
}

/* — Téléphones : les cinq décors, plus petits, serrés contre la boîte. Le
   fantôme flotte au-dessus, entre l'araignée et la toile ; la lanterne et
   la citrouille encadrent « Plus tard ». — */

@media (max-width: 600px) {
    .halloween__boite { padding: var(--espace-5) var(--espace-3) var(--espace-8); }
    .halloween__actions .bouton { padding-inline: var(--espace-3); }
    .halloween__decor--araignee { --yoyo: 1.5rem; top: -5.5rem; left: 0; width: 7rem; }
    .halloween__decor--fantome { --fantome: 8rem; top: calc(var(--fantome) * -0.8); left: calc(50% - var(--fantome) / 2); }
    .halloween__decor--lanterne { bottom: -2.5rem; left: -0.75rem; width: 5.75rem; }
    .halloween__decor--citrouille-chapeau { bottom: -2.75rem; right: -0.75rem; width: 6.5rem; }
}

/* Petits téléphones : la boîte remplit presque l'écran, le fantôme et
   l'araignée rapetissent pour rester visibles au-dessus d'elle. */
@media (max-width: 600px) and (max-height: 700px) {
    .halloween__decor--fantome { --fantome: 5.5rem; }
    .halloween__decor--araignee { --yoyo: 1rem; top: -4.25rem; width: 5.5rem; }
}

/* — Animations — */

@keyframes halloween-ouverture {
    from { opacity: 0; transform: translateY(12px) scale(0.96); }
    to { opacity: 1; transform: none; }
}

@keyframes halloween-fondu {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes halloween-apparition {
    from { opacity: 0; transform: scale(0.6); }
    to { opacity: 1; transform: none; }
}

@keyframes halloween-toile {
    from { opacity: 0; transform: scale(0.4) rotate(8deg); }
    to { opacity: 1; transform: none; }
}

@keyframes halloween-descente {
    from { transform: translateY(-100vh); }
    to { transform: none; }
}

@keyframes halloween-yoyo {
    from { transform: none; }
    to { transform: translateY(calc(-1 * var(--yoyo))); }
}

@keyframes halloween-fantome {
    from { opacity: 0; transform: translateX(-2rem) scale(0.8); filter: blur(4px); }
    to { opacity: 1; transform: none; filter: none; }
}

@keyframes halloween-surgir {
    0% { z-index: 2; }
    10% { z-index: 0; }
    45% {
        z-index: 0;
        top: calc(50% - var(--fantome) / 2);
        left: calc(50% - var(--fantome) / 2);
        transform: scale(0.85);
        opacity: 1;
    }
    50% { z-index: 3; }
    85% { opacity: 1; }
    100% {
        z-index: 3;
        top: calc(50% - var(--fantome) / 2);
        left: calc(50% - var(--fantome) / 2);
        transform: scale(6);
        opacity: 0;
    }
}

@keyframes halloween-flotter {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes halloween-pousse {
    from { opacity: 0; transform: translateY(2rem) scale(0.7); }
    to { opacity: 1; transform: none; }
}

@keyframes halloween-lueur {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

/* Mouvements réduits : tout est là d'emblée, rien ne bouge. */
@media (prefers-reduced-motion: reduce) {
    .halloween,
    .halloween::backdrop,
    .halloween__decor,
    .halloween__decor img { animation: none; }
    /* Pas de lueur : sa copie reste transparente. */
    .halloween__decor .halloween__lueur { animation: none; }
}