/* =========================================================
   Festival themes: only present while <html data-season="..."> is
   set by js/seasons.js. Everything is pointer-events: none.
   ========================================================= */

/* Canvases: effects over the hero, and a few drifting bits over the page */
.season-canvas { pointer-events: none; }
.season-canvas--hero { position: absolute; inset: 0; z-index: 1; }
.season-canvas--page { position: fixed; inset: 0; z-index: 45; }

/* Greeting in the top bar */
.season-greet { font-weight: 700; color: var(--cream); white-space: nowrap; }
html[data-season] .topbar__inner { align-items: center; }
@media (max-width: 1080px) { .season-greet { display: none; } }

/* Festoon: a garland hung in swags across the top of the hero and the footer */
.festoon { position: absolute; left: 0; right: 0; top: 0; height: 90px; z-index: 3; pointer-events: none; }
.festoon__wire { position: absolute; inset: 0 0 auto; width: 100%; height: 60px; overflow: visible; }
.festoon__wire path { fill: none; stroke: rgba(40, 30, 10, .75); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.festoon--thoranam .festoon__wire path { stroke: #7a5a22; stroke-width: 2.2; }
.festoon > i { position: absolute; transform-origin: 50% 0; }

/* string lights: a bulb with a soft glow that twinkles */
.festoon .bulb { width: 9px; height: 13px; margin-left: -4.5px; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; background: var(--c); box-shadow: 0 0 10px 3px var(--c); animation: twinkle 2.6s ease-in-out infinite; }
.festoon .bulb::before { content: ''; position: absolute; left: 2px; right: 2px; top: -4px; height: 5px; border-radius: 2px; background: #3b3322; }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .45; box-shadow: 0 0 4px 1px var(--c); } }

/* Pongal thoranam: mango leaves and marigolds that sway a little */
.festoon .leaf { width: 14px; height: 34px; margin-left: -7px; background: linear-gradient(90deg, #2f7d2a 0 48%, #3f9a34 52% 100%); border-radius: 0 0 50% 50% / 0 0 100% 100%; clip-path: polygon(50% 100%, 0 30%, 8% 0, 92% 0, 100% 30%); rotate: var(--r); animation: sway 4s ease-in-out infinite; }
.festoon .bloom { width: 15px; height: 15px; margin: -3px 0 0 -7.5px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffd24a 0 25%, #f59a12 30% 70%, #e0700c 100%); animation: sway 4s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

/* Every festival: a warm glow at the top of the footer */
html[data-season="christmas"] .footer::before,
html[data-season="diwali"] .footer::before,
html[data-season="pongal"] .footer::before { content: ''; position: absolute; inset: 0 0 auto; height: 240px; pointer-events: none; background: radial-gradient(60% 100% at 50% 0%, rgba(228, 182, 75, .12), transparent 70%); }

/* Preview toggle: TEMPORARY, gone once PREVIEW_TOGGLE is false in js/seasons.js */
.season-toggle { position: fixed; right: 16px; bottom: 84px; z-index: 300; display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 14px; border-radius: 999px; background: rgba(8, 18, 48, .92); color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); backdrop-filter: blur(8px); }
.season-toggle__label { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .55; margin-right: 8px; }
.season-toggle button { padding: 8px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .72); transition: background .3s, color .3s; }
.season-toggle button:hover { color: #fff; }
.season-toggle button.is-active { background: var(--gold); color: var(--ink); }
@media (max-width: 720px) {
  .season-toggle { left: 8px; right: 8px; bottom: 74px; justify-content: center; padding: 4px; }
  .season-toggle button { padding: 7px 9px; font-size: 11px; }
  .season-toggle__label { display: none; }
  .festoon { height: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  .festoon > i { animation: none; }
}

/* 3D festival objects (js/season-decor.js): one fixed layer, under the nav */
.season-canvas--decor { position: fixed; inset: 0; z-index: 44; }
.loader--season { z-index: 400; }