.season-easter { --bg:#f8f5ed; --primary:#4b6847; --primary-strong:#344b32; --season-wash:#edf1dc; --season-accent:#8a4567; }
.season-autumn { --bg:#f9efe3; --primary:#82502a; --primary-strong:#533019; --season-wash:#f2e2cb; --season-accent:#984125; }
.season-christmas { --bg:#f7f1eb; --primary:#325644; --primary-strong:#213d30; --season-wash:#e5ede5; --season-accent:#923c42; }
.season-carnival { --bg:#faf3f7; --primary:#644972; --primary-strong:#4b3159; --season-wash:#f0e5f0; --season-accent:#944369; }
.season-halloween { --bg:#fbf2e8; --primary:#563c60; --primary-strong:#3b2943; --season-wash:#efe4f0; --season-accent:#95431e; }

body[class^="season-"]:not(.season-classic) .site-header.glass,
body[class^="season-"]:not(.season-classic) .site-footer,
body[class^="season-"]:not(.season-classic) .badge,
body[class^="season-"]:not(.season-classic) .msg.self,
body[class^="season-"]:not(.season-classic) .ingredient-list li,
body[class^="season-"]:not(.season-classic) .planner-day-head,
body[class^="season-"]:not(.season-classic) .cookbook-categories .category-all {
    background: var(--season-wash);
    color: var(--primary-strong);
}
body[class^="season-"]:not(.season-classic) .cookbook-intro h1 em { color: var(--season-accent); }
body[class^="season-"]:not(.season-classic) .site-header.glass { border-top: 4px solid var(--season-accent); }
.season-settings { margin-bottom: 20px; scroll-margin-top: 120px; }
.season-options { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr)); gap:12px; border:0; padding:0; margin:0 0 16px; }
.season-option { display:block; min-width:0; overflow:hidden; border-radius:12px; border:2px solid #d5dbcf; background:var(--surface); cursor:pointer; }
.season-option:has(input:checked), .season-option:focus-within { border-color:var(--primary); }
.season-option img { display:block; width:100%; height:auto; aspect-ratio:5 / 3; object-fit:cover; }
.season-option span { display:flex; gap:8px; align-items:center; padding:9px; }
.season-option input[type="radio"] { width:auto; margin:0; }

.season-christmas { --festive-decoration: url("../img/seasons/christmas-decor.png"); }
.season-halloween { --festive-decoration: url("../img/seasons/halloween-decor.png"); }
.season-easter { --festive-decoration: url("../img/seasons/easter-decor.png"); }
.season-autumn { --festive-decoration: url("../img/seasons/autumn-decor.png"); }
.season-carnival { --festive-decoration: url("../img/seasons/carnival-decor.png"); }

/* Seasonal ornaments sit below the navigation in their own strip. */
.season-christmas .festive-trim { --sway: 2deg; --lift: 2px; --cycle: 6s; --spark: #ffdc92; }
.season-halloween .festive-trim { --sway: 1deg; --lift: 3px; --cycle: 4s; --spark: #ff932c; }
.season-easter .festive-trim { --sway: 2deg; --lift: 3px; --cycle: 5.4s; --spark: #fff5e3; }
.season-autumn .festive-trim { --sway: 3deg; --lift: 4px; --cycle: 6.8s; --spark: #edb064; }
.season-carnival .festive-trim { --sway: 3.5deg; --lift: 4px; --cycle: 3.8s; --spark: #efc05b; }

.festive-trim {
    display: flex;
    justify-content: space-between;
    height: clamp(44px, 7vw, 108px);
    padding-inline: clamp(12px, 5vw, 80px);
    overflow: hidden;
    pointer-events: none;
}
.festive-ornament {
    position: relative;
    width: clamp(78px, 17vw, 244px);
    height: calc(100% - 7px);
    background: var(--festive-decoration) top center / contain no-repeat;
    transform-origin: center top;
    animation: festive-sway var(--cycle) ease-in-out infinite alternate;
}
.festive-ornament:last-child {
    --reflection: -1;
    animation-delay: -1.4s;
}
.festive-ornament::after {
    content: "";
    position: absolute;
    inset: 0 10%;
    background:
        radial-gradient(circle at 25% 36%, var(--spark) 0 1px, transparent 5px),
        radial-gradient(circle at 64% 19%, var(--spark) 0 1px, transparent 4px),
        radial-gradient(circle at 78% 55%, var(--spark) 0 1px, transparent 4px);
    animation: festive-glow calc(var(--cycle) + 1.25s) ease-in-out infinite alternate;
}
@keyframes festive-sway {
    from { transform: scaleX(var(--reflection, 1)) rotate(calc(-1 * var(--sway))); }
    to { transform: translateY(var(--lift)) scaleX(var(--reflection, 1)) rotate(var(--sway)); }
}
@keyframes festive-glow {
    from { opacity: .12; }
    to { opacity: .75; }
}
@media (prefers-reduced-motion: reduce) {
    .festive-ornament, .festive-ornament::after { animation: none; }
    .festive-ornament:last-child { transform: scaleX(-1); }
    .festive-ornament::after { opacity: .28; }
}
@media print {
    .festive-trim { display: none; }
}