/* ==========================================================================
   SEASONAL THEMES v2 (ANTEPRIMA PRIVATA, 2026-10-26)
   Parte comune a tutte le feste. Ogni festa ha il suo file in
   assets/css/season/{slug}.css che imposta SOLO variabili e disegni.
   Caricato solo quando inc/seasonal-v2.php dice che una stagione e attiva,
   cioe oggi solo per gli amministratori su ?mp=preview (&season=... per
   scegliere la festa).
   Solo addobbi, nessun testo: fondo pagina velato nel colore della festa,
   scena disegnata nell'header, qualcosa che passa sullo schermo, una
   striscia in fondo al footer. Tutto sotto il logo e il menu.

   Variabili che ogni festa DEVE impostare su body.season-{slug}
   (se ne manca una, il background intero non vale e torna grigio):
   --season-base-a/-b, --season-dark-a/-b, --season-veil, --season-top,
   --season-br, --season-bl, --season-glass, --season-glass-hover,
   --season-glow-1/-2, --season-bg-1/-2/-3, --season-hang,
   --season-hang-anim, --season-hang-anim-sm, --season-footer.
   Gli url() nelle variabili sono assoluti dalla radice: un url relativo
   dentro una variabile si risolve contro il foglio che la usa, non quello
   che la definisce.
   ========================================================================== */

/* --- Page ground: the theme colours over the same dark --------------------
   Extra dark mode swaps in each theme's darker base. The glass boxes take a
   tint through the shared --glass-rgb token in base.css. The Prompt Center
   keeps its own slate (prompt-center.css sets it with !important). */
body.season-v2.brightness-dark {
    --season-base-a: var(--season-dark-a);
    --season-base-b: var(--season-dark-b);
}

body.season-v2:not(.brightness-light) {
    --glass-rgb: var(--season-glass);
    --glass-hover-rgb: var(--season-glass-hover);
    background:
        var(--season-bg-1) left bottom / 300px 300px no-repeat,
        var(--season-bg-2) right bottom / 200px 200px no-repeat,
        var(--season-bg-3) right 38% / 120px 240px no-repeat,
        linear-gradient(to top, var(--season-veil), transparent 55%),
        radial-gradient(1200px 560px at 50% -180px, var(--season-top), transparent 70%),
        radial-gradient(900px 680px at 100% 100%, var(--season-br), transparent 70%),
        radial-gradient(700px 520px at 0% 90%, var(--season-bl), transparent 70%),
        linear-gradient(135deg, var(--season-base-a) 0%, var(--season-base-b) 50%, var(--season-base-a) 100%);
    background-attachment: fixed;
}

/* --- The glow behind the logo -------------------------------------------- */
body.season-v2 .header-gradient-background {
    background:
        radial-gradient(45% 70% at 50% 55%, var(--season-glow-1), transparent 70%),
        radial-gradient(35% 55% at 50% 100%, var(--season-glow-2), transparent 70%);
}

/* --- Header scene ----------------------------------------------------------
   Drawn on pseudo-elements INSIDE the header: they sit under the logo and the
   menu button (.header-container is z-index 2) and the header's overflow
   clips them. Each theme file fills ::before (corners and the bottom pieces)
   and ::after (the big motif right of the logo). Positions are offsets from
   the centre, where the logo is: logo text spans about +-152px, the menu
   button sits on the left. Theme files are served immutable for a year, so
   bump ?v= in the theme file when a drawing changes. */
body.season-v2 .header-gradient-background::before,
body.season-v2 .header-gradient-background::after {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* Something hanging on a thread left of the logo: bobs or swings. */
body.season-v2 .site-header::after {
    content: "";
    position: absolute;
    top: -40px;
    left: calc(50% - 260px);
    z-index: 1;
    width: 30px;
    height: 130px;
    background: var(--season-hang) no-repeat center top / 100% 100%;
    pointer-events: none;
    transform-origin: 50% 0;
    animation: var(--season-hang-anim) 3.8s ease-in-out infinite alternate;
}

@keyframes season-bob {
    from { transform: translateY(0); }
    to { transform: translateY(10px); }
}

@keyframes season-bob-sm {
    from { transform: translateY(0); }
    to { transform: translateY(7px); }
}

@keyframes season-swing {
    from { transform: rotate(-5deg); }
    to { transform: rotate(5deg); }
}

/* --- Things on the screen: two that fly across, or a light fall/rise ------- */
.season-sky {
    position: fixed;
    inset: 0;
    z-index: 150;
    overflow: hidden;
    pointer-events: none;
}

.season-sky-defs {
    position: absolute;
}

/* Crossing: Halloween bats, Easter butterflies. */
.season-fly {
    position: absolute;
    top: 15%;
    left: 0;
    width: 38px;
    transform: translate3d(-80px, 0, 0);
    animation: season-fly-a 27s linear infinite;
}

.season-fly svg {
    display: block;
    width: 100%;
    height: auto;
}

.season-fly-2 {
    top: 34%;
    width: 28px;
    animation-name: season-fly-b;
    animation-duration: 34s;
    animation-delay: -14s;
}

.season-bat svg {
    fill: #120b07;
    stroke: rgba(255, 154, 82, 0.6);
    stroke-width: 1;
    animation: season-flap 0.22s ease-in-out infinite alternate;
}

.season-wing {
    transform-origin: 20px 15px;
    animation: season-wingflap 0.3s ease-in-out infinite alternate;
}

@keyframes season-flap {
    to { transform: scaleY(0.45); }
}

@keyframes season-wingflap {
    to { transform: scaleX(0.3); }
}

@keyframes season-fly-a {
    0%       { transform: translate3d(-80px, 0, 0); }
    6%       { transform: translate3d(25vw, -28px, 0); }
    12%      { transform: translate3d(50vw, 6px, 0); }
    18%      { transform: translate3d(75vw, -22px, 0); }
    24%, 100% { transform: translate3d(calc(100vw + 80px), 0, 0); }
}

@keyframes season-fly-b {
    0%       { transform: translate3d(calc(100vw + 80px), 0, 0); }
    7%       { transform: translate3d(75vw, 18px, 0); }
    14%      { transform: translate3d(50vw, -10px, 0); }
    21%      { transform: translate3d(25vw, 14px, 0); }
    28%, 100% { transform: translate3d(-80px, 0, 0); }
}

/* Falling or rising: Christmas snow, New Year confetti, Valentine hearts.
   Each piece gets --x (left), --s (size), --t (duration), --d (delay) inline. */
.season-p {
    position: absolute;
    top: -24px;
    left: var(--x);
    width: var(--s);
    height: var(--s);
    animation: season-fall var(--t) linear var(--d) infinite;
}

.season-sky-snow .season-p {
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 35%, rgba(255, 255, 255, 0) 72%);
    opacity: 0.75;
}

.season-sky-confetti .season-p {
    height: calc(var(--s) * 0.45);
    border-radius: 1px;
    background: #ffd27a;
    opacity: 0.8;
    animation-name: season-confetti;
}

.season-sky-confetti .season-p:nth-child(3n) {
    background: #e6e9f2;
}

.season-sky-confetti .season-p:nth-child(3n + 1) {
    background: #f6b39a;
}

.season-sky-hearts .season-p {
    top: auto;
    bottom: -24px;
    animation-name: season-rise;
}

.season-sky-hearts .season-p svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: #ff8fab;
}

.season-sky-hearts .season-p:nth-child(2n) svg {
    fill: #ff4f7b;
}

@keyframes season-fall {
    0%   { transform: translate3d(0, 0, 0); }
    50%  { transform: translate3d(22px, 52vh, 0); }
    100% { transform: translate3d(-8px, 108vh, 0); }
}

@keyframes season-confetti {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
    50%  { transform: translate3d(26px, 52vh, 0) rotate(220deg); }
    100% { transform: translate3d(-10px, 108vh, 0) rotate(460deg); }
}

@keyframes season-rise {
    0%   { transform: translate3d(0, 0, 0); opacity: 0; }
    10%  { opacity: 0.75; }
    80%  { opacity: 0.6; }
    100% { transform: translate3d(18px, -92vh, 0); opacity: 0; }
}

/* --- Footer: the theme's skyline under the last links ---------------------- */
body.season-v2 .site-footer {
    padding-bottom: calc(1.25rem + 92px);
    background: var(--season-footer) no-repeat center bottom / 1440px 110px;
}

/* --- Phones and small tablets (the logo drops to 130px) ------------------- */
@media (max-width: 768px) {
    /* Smaller motifs on the page ground (the other five layers fill the screen). */
    body.season-v2:not(.brightness-light) {
        background-size: 170px 170px, 120px 120px, 80px 160px, auto, auto, auto, auto, auto;
    }

    body.season-v2 .site-header::after {
        top: -44px;
        left: calc(50% - 64px);
        width: 22px;
        height: 95px;
        animation-name: var(--season-hang-anim-sm);
    }

    .season-fly {
        width: 30px;
    }

    .season-fly-2 {
        width: 22px;
    }

    body.season-v2 .site-footer {
        padding-bottom: calc(1rem + 62px);
        background-size: 900px 69px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .season-sky {
        display: none;
    }

    body.season-v2 .site-header::after {
        animation: none;
    }
}