/* Seasonal theme layer — shared by every theme (includes/site-theme.php).
   Per-theme looks live in assets/themes/<key>/theme.css. */
.season-root { --season-accent: #FF2D9B; }

/* Banner: in normal flow above the sticky nav, server-rendered (no layout shift). */
.season-banner {
    position: relative; z-index: 1001;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px;
    padding: 9px 16px 9px 48px;
    background: #0f0f1a; color: #fff;
    border-bottom: 2px solid var(--season-accent);
    font-size: 14px; line-height: 1.35; text-align: center;
}
.season-banner::before {           /* theme icon, set by theme.css via --season-icon */
    content: ""; position: absolute; left: 14px; top: 50%; width: 24px; height: 24px; margin-top: -12px;
    background: var(--season-icon, none) center / contain no-repeat;
}
.season-banner-cta {
    color: var(--season-accent); font-weight: 600; text-decoration: none; white-space: nowrap;
}
.season-banner-cta:hover, .season-banner-cta:focus-visible { text-decoration: underline; }

/* Decorations. The layer is fixed to the viewport and never takes clicks.
   Scattered pieces and ground/hanging fixtures need the side gutters, so they
   are wide-screen only; corner webs and flying bats also show on phones (where
   most traffic is), smaller and translucent. */
.season-decor {
    position: fixed; inset: 0; z-index: 2;
    pointer-events: none; overflow: hidden;
}
.season-decor > img, .season-fx--hang, .season-fx--ground { display: none; }
.season-decor img { height: auto; }

/* Corner: a web tucked into the top corner, just under the nav. Wide screens
   only: on phones the banner wraps and pushes the nav over it, so the theme
   puts its phone cobweb in the banner instead (theme.css). */
.season-fx--corner { display: none; position: absolute; top: 62px; width: var(--fx-size); opacity: .8; }
.season-fx--corner img { width: 100%; }
.season-fx--corner.season-fx--left { left: 0; }
.season-fx--corner.season-fx--right { right: 0; transform: scaleX(-1); }

/* Fly: crosses the screen every so often, flapping. */
.season-fx--fly { position: absolute; top: var(--fx-top); left: 0; width: calc(var(--fx-size) * .7); }
.season-fx--fly img {
    width: 100%; translate: -20vw 0;
    animation: season-fly var(--fx-dur, 34s) linear infinite, season-flap .28s ease-in-out infinite alternate;
    animation-fill-mode: backwards, none;
}
.season-fx--fly.season-fx--right img { animation-direction: reverse, alternate; }
/* One crossing (about a fifth of the cycle), then off-screen until the next. */
@keyframes season-fly {
    0%        { translate: -20vw 0; }
    6%        { translate: 20vw -4vh; }
    12%       { translate: 55vw 3vh; }
    18%       { translate: 90vw -3vh; }
    22%, 100% { translate: 120vw 0; }
}
@keyframes season-flap { from { scale: 1 1; } to { scale: 1 .55; } }

@media (min-width: 1280px) {
    .season-fx--corner { display: block; }
    .season-fx--fly { width: var(--fx-size); }

    /* Scattered pieces in the gutters. */
    .season-decor > img {
        display: block; position: absolute; opacity: .9;
        transform: rotate(var(--season-rot, 0deg));
        animation: season-bob 6s ease-in-out infinite;
        filter: drop-shadow(0 0 8px rgba(0, 0, 0, .45));
    }

    /* Hang: a spider on a silk thread from the nav, swaying. */
    .season-fx--hang {
        display: block; position: absolute; top: 60px; width: var(--fx-size);
        transform-origin: top center; animation: season-sway 5s ease-in-out infinite;
    }
    .season-fx--hang.season-fx--left { left: calc(2% + var(--fx-offset)); }
    .season-fx--hang.season-fx--right { right: calc(2% + var(--fx-offset)); }
    .season-fx--hang::before {
        content: ""; display: block; width: 1px; height: var(--fx-len); margin: 0 auto;
        background: linear-gradient(rgba(226, 232, 240, .1), rgba(226, 232, 240, .7));
    }
    .season-fx--hang img { display: block; width: 100%; margin-top: -4px; }

    /* Ground: sits on the bottom edge of a gutter, glowing. */
    .season-fx--ground { display: block; position: absolute; bottom: 8px; width: var(--fx-size); }
    .season-fx--ground.season-fx--left { left: calc(1% + var(--fx-offset)); }
    .season-fx--ground.season-fx--right { right: calc(1% + var(--fx-offset)); }
    .season-fx--ground img { width: 100%; animation: season-flicker 3.2s ease-in-out infinite; }
}
@media (min-width: 1280px) and (max-width: 1500px) {
    .season-decor > img { max-width: 40px; }
    .season-fx--hang, .season-fx--ground { max-width: 56px; }
}
@keyframes season-bob {
    0%, 100% { transform: translateY(0) rotate(var(--season-rot, 0deg)); }
    50%      { transform: translateY(-10px) rotate(calc(var(--season-rot, 0deg) * -1)); }
}
@keyframes season-sway {
    0%, 100% { transform: rotate(-4deg); }
    50%      { transform: rotate(4deg); }
}
@keyframes season-flicker {
    0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 140, 30, .55)) brightness(1); }
    40%      { filter: drop-shadow(0 0 16px rgba(255, 160, 40, .8)) brightness(1.08); }
    60%      { filter: drop-shadow(0 0 7px rgba(255, 120, 20, .45)) brightness(.95); }
}
@media (prefers-reduced-motion: reduce) {
    .season-decor img, .season-fx--hang { animation: none !important; }
    .season-fx--fly { display: none; }
}
@media print {
    .season-banner, .season-decor { display: none !important; }
}

/* Themed content block: same card grid as the Fever strip, accent heading. */
.season-picks .fever-picks-title { color: var(--season-accent, inherit); }
.season-picks .fever-pick-image:empty { background: linear-gradient(135deg, #1a1a2e, #2a1f3d); }

/* On the homepage the block sits between full-width sections: give it the same
   1200px content column as .whats-on-inner, so it lines up and stays clear of
   the gutter decorations. */
.season-home { max-width: 1200px; margin: 40px auto; padding: 0 20px; }