/* =========================================================================
 * Seasonal themes — the structure every season shares (Seasons).
 * Loaded only while a season is on and never on admin pages; each
 * seasons/<key>/season.css then sets the colours and the artwork through
 * these custom properties:
 *
 *   --season-ribbon-bg / --season-ribbon-fg   ribbon above the header
 *   --season-glow                            soft light behind the top of public pages
 *   --season-hero                            hero artwork (light / dark variants)
 *   --season-band                            footer band
 *   --season-sticker                         the accessory on the logo mark
 *   --season-deco                            corner decoration on tool heroes and sign-in
 *   --season-sticker-x / -y / -rotate / -size   where the accessory sits
 *   --season-btn                             primary button background (gradient allowed)
 * ========================================================================= */

:root[data-season] {
    --season-band-h: clamp(52px, 7.5vw, 104px);
    --season-sticker-size: 20px;
    --season-sticker-x: 9px;
    --season-sticker-y: -12px;
    --season-sticker-rotate: 12deg;
}

/* -- Ribbon --------------------------------------------------------------- */

.season-ribbon { position: relative; z-index: 41; background: var(--season-ribbon-bg); color: var(--season-ribbon-fg); font-size: .88rem; line-height: 1.4; overflow: hidden; }
.season-ribbon::after { content: ""; position: absolute; inset: 0; background: var(--season-band) left 40% / auto 260% repeat-x; opacity: .12; pointer-events: none; mix-blend-mode: luminosity; }
.season-ribbon__inner { position: relative; z-index: 1; display: flex; align-items: center; gap: .75rem; min-height: 44px; padding-top: .45rem; padding-bottom: .45rem; }
.season-ribbon__icon { flex: none; width: 28px; height: 28px; object-fit: contain; animation: season-bob 3.4s var(--ease) infinite; }
.season-ribbon__text { margin: 0; flex: 1 1 auto; min-width: 0; }
.season-ribbon__link { flex: none; font-weight: 600; color: inherit; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; white-space: nowrap; }
.season-ribbon__link:hover { color: inherit; text-decoration-thickness: 2.5px; }
.season-ribbon__close { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; opacity: .75; }
.season-ribbon__close:hover, .season-ribbon__close:focus-visible { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); }
.season-ribbon__close svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.season-ribbon.is-closing { animation: season-close .28s var(--ease) forwards; }
@media (max-width: 720px) {
    .season-ribbon__inner { flex-wrap: wrap; gap: .25rem .6rem; font-size: .84rem; padding-right: 2.6rem; }
    .season-ribbon__icon { width: 22px; height: 22px; }
    .season-ribbon__text { flex: 1 1 calc(100% - 40px); }
    .season-ribbon__link { margin-left: calc(22px + .6rem); }
    .season-ribbon__close { position: absolute; top: .4rem; right: 1rem; }
}

/* -- Logo accessory (header, footer, sidebar, sign-in) --------------------- */

:root[data-season] .logo { position: relative; }
:root[data-season] .logo::before {
    content: ""; position: absolute; z-index: 1; pointer-events: none;
    left: var(--season-sticker-x); top: var(--season-sticker-y);
    width: var(--season-sticker-size); height: var(--season-sticker-size);
    background: var(--season-sticker) center / contain no-repeat;
    transform: rotate(var(--season-sticker-rotate));
    transition: transform .3s var(--ease);
}
:root[data-season] .logo:hover::before { transform: rotate(var(--season-sticker-rotate)) translateY(-2px); }

/* -- Primary buttons ------------------------------------------------------- */

:root[data-season] .btn--primary { background: var(--season-btn, var(--primary)); border-color: transparent; }
:root[data-season] .btn--primary:hover { background: var(--season-btn, var(--primary-hover)); border-color: transparent; filter: brightness(1.08) saturate(1.05); }

/* -- Public pages: glow, hero artwork, footer band ------------------------- */

:root[data-season] .layout--default { background-image: radial-gradient(1100px 520px at 88% -8%, var(--season-glow), transparent 70%); background-repeat: no-repeat; }

:root[data-season] .hero { position: relative; isolation: isolate; overflow: hidden; }
:root[data-season] .hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 92%, transparent) 30%, color-mix(in srgb, var(--bg) 55%, transparent) 52%, color-mix(in srgb, var(--bg) 8%, transparent) 78%),
        linear-gradient(0deg, var(--bg) 0%, transparent 26%),
        linear-gradient(180deg, var(--bg) 0%, transparent 14%),
        var(--season-hero) 78% 55% / cover no-repeat;
}
@media (max-width: 900px) {
    :root[data-season] .hero::before {
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--bg) 84%, transparent) 0%, color-mix(in srgb, var(--bg) 92%, transparent) 55%, var(--bg) 100%),
            var(--season-hero) 70% 40% / cover no-repeat;
    }
}

:root[data-season] .tool-hero::before {
    content: ""; position: absolute; z-index: 2; pointer-events: none;
    top: 14px; right: 16px; width: 58px; height: 58px;
    background: var(--season-deco) center / contain no-repeat;
    transform: rotate(9deg);
    animation: season-bob 4s var(--ease) infinite;
}
@media (max-width: 620px) { :root[data-season] .tool-hero::before { width: 40px; height: 40px; top: 10px; right: 10px; } }

:root[data-season] .site-footer { position: relative; margin-top: calc(4rem + var(--season-band-h)); }
:root[data-season] .site-footer::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% + 1px); height: var(--season-band-h); pointer-events: none;
    background: var(--season-band) center bottom / auto 100% repeat-x;
}

/* -- Sign-in pages --------------------------------------------------------- */

:root[data-season] .layout--auth { background-image: radial-gradient(900px 480px at 50% -10%, var(--season-glow), transparent 70%), linear-gradient(var(--bg-subtle), var(--bg-subtle)); }
:root[data-season] .card--auth { position: relative; }
:root[data-season] .card--auth::after {
    content: ""; position: absolute; bottom: -24px; right: -20px; width: 60px; height: 60px; pointer-events: none;
    background: var(--season-deco) center / contain no-repeat; transform: rotate(10deg);
}

/* -- Drifting decorations (app.js [data-season-fx]) ------------------------ */

.season-fx { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
:root[data-season] .layout--default .layout__main,
:root[data-season] .layout--default .site-footer { position: relative; z-index: 1; }
.season-fx__item {
    position: absolute; top: 0; left: 0; width: var(--size, 24px); height: auto;
    opacity: var(--alpha, .8); will-change: transform;
    animation: var(--anim, season-fall) var(--dur, 18s) linear var(--delay, 0s) infinite;
}
.season-fx__item--flap { animation-name: season-drift; }
.season-fx__item--flap img, .season-fx__item img { display: block; width: 100%; height: auto; }
.season-fx__item--flap img { animation: season-flap var(--flap, .5s) ease-in-out infinite alternate; transform-origin: 50% 40%; }
.season-fx__item--bob img { animation: season-bob 2.6s ease-in-out infinite; }

@keyframes season-fall {
    0%   { transform: translate3d(var(--x), -12vh, 0) rotate(0deg); }
    50%  { transform: translate3d(calc(var(--x) + var(--sway)), 50vh, 0) rotate(calc(var(--spin) / 2)); }
    100% { transform: translate3d(var(--x), 112vh, 0) rotate(var(--spin)); }
}
@keyframes season-drift {
    0%   { transform: translate3d(-14vw, var(--y), 0); }
    25%  { transform: translate3d(18vw, calc(var(--y) - 4vh), 0); }
    50%  { transform: translate3d(48vw, calc(var(--y) + 2vh), 0); }
    75%  { transform: translate3d(80vw, calc(var(--y) - 3vh), 0); }
    100% { transform: translate3d(114vw, var(--y), 0); }
}
@keyframes season-flap { from { transform: scaleY(1); } to { transform: scaleY(.62); } }
@keyframes season-bob { 0%, 100% { transform: translateY(0) rotate(var(--bob-rot, 0deg)); } 50% { transform: translateY(-3px) rotate(var(--bob-rot, 0deg)); } }
@keyframes season-close { to { opacity: 0; transform: translateY(-100%); margin-bottom: -44px; } }

@media (prefers-reduced-motion: reduce) {
    .season-fx { display: none; }
    .season-ribbon__icon, :root[data-season] .tool-hero::before { animation: none; }
    .season-ribbon.is-closing { animation: none; display: none; }
}
@media print { .season-ribbon, .season-fx { display: none; } }