/*
 * Holiday themes (includes/seasons.php). This file is requested only while a holiday can show, so the rest of the year costs nothing.
 *
 * Each ornament set and offer belongs to one holiday (data-season-for). The page's <head> carries a short rule that shows the pieces of
 * the holiday picked for this visitor, using --season-show for the piece's own display value.
 *
 * <html> says what is happening: data-season (which holiday), data-season-stage (lead, unsure, day, after), data-season-power (1 still,
 * 2 a short moment, 3 the full moment), data-season-intro (the moment has just begun), data-season-playing (it is running).
 * The movement itself lives in assets/js/seasons-fx.js; what is here runs once, for under five seconds, and stands still after.
 */
.season-bit { display: none; }

/* the header: a mark on the logo, and a fine gold line under the bar on every decorated page */
.site-header .brand { position: relative; }
.season-mark { --season-show: block; position: absolute; top: 0; right: -9px; width: 14px; height: 14px; pointer-events: none; }
.season-mark svg { display: block; width: 100%; height: 100%; }
@media (min-width: 768px) { .season-mark { top: -2px; right: -11px; width: 16px; height: 16px; } }
html[data-season] .site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, rgba(251, 191, 36, 0), var(--nova-gold-400) 22%, var(--nova-gold-400) 78%, rgba(251, 191, 36, 0)); opacity: 0.7; transform-origin: center; pointer-events: none; }
html[data-season="valentine"] .site-header::after { background: linear-gradient(90deg, rgba(251, 113, 133, 0), #FB7185 22%, #FB7185 78%, rgba(251, 113, 133, 0)); }

/* the small line above the home page's headline: sentence case and tighter, so a longer greeting still fits one phone line */
.season-greet { display: none; }
html[data-season] .season-plain { display: none; }
html[data-season] .season-greet { display: inline; letter-spacing: 0.01em; line-height: 19.2px; /* the small line's own 12px × 1.6: the hero must not change height */ text-transform: none; font-size: 14px; color: var(--ink-900); }
@media (max-width: 389px) { html[data-season] .hero .eyebrow .dot { width: 0; margin-right: -10px; } }   /* the dash folds away but stays in the row: it sets the line's baseline */
@media (max-width: 359px) { html[data-season] .season-greet { letter-spacing: 0; font-size: 13px; } }

/* a gold light passes over the words once as the moment begins */
html[data-season-intro] .season-greet { background: linear-gradient(100deg, var(--ink-900) 42%, var(--nova-gold-500) 50%, var(--ink-900) 58%) 120% 0 / 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sz-sheen 1.5s var(--ease-out) 0.25s 1 both; }
@keyframes sz-sheen { to { background-position: -30% 0; } }

/* pause and replay, beside the greeting. It keeps the line's height, and its tap area reaches 44px */
.season-ctl { position: relative; flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; margin-block: -4px; padding: 0; border: 1px solid var(--ink-200); border-radius: 50%; background: var(--white); color: var(--ink-700); cursor: pointer; transition: color var(--transition), border-color var(--transition); }
.season-ctl[hidden] { display: none; }
.season-ctl::after { content: ""; position: absolute; inset: -9px; }
.season-ctl:hover { color: var(--gold-deep); border-color: var(--nova-gold-400); }
.season-ctl:focus-visible { outline: 2px solid var(--ink-900); outline-offset: 2px; }
.season-ctl .is-play, .season-ctl[data-state="play"] .is-pause { display: none; }
.season-ctl[data-state="play"] .is-play { display: block; }
html:not([data-season]) .season-ctl { display: none; }

/* the optional offer, under the hero's buttons */
.season-offer { --season-show: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font-size: 0.95rem; font-weight: 600; color: var(--ink-900); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.season-offer:hover { color: var(--gold-deep); }

/* the layer behind the hero: the soft light that warms it, and the canvas while the moment plays */
.season-stage { display: none; position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
html[data-season] .season-stage { display: block; }
.season-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.season-glow { position: absolute; top: -12%; right: -4%; width: min(1040px, 84%); height: 124%; background: radial-gradient(closest-side, rgba(251, 191, 36, 0.16), rgba(251, 191, 36, 0.05) 62%, rgba(251, 191, 36, 0)); opacity: 0.55; }
html[data-season-power="2"] .season-glow { opacity: 0.8; }
html[data-season-power="3"] .season-glow { opacity: 1; }
html[data-season="valentine"] .season-glow { background: radial-gradient(closest-side, rgba(251, 113, 133, 0.13), rgba(251, 113, 133, 0.04) 62%, rgba(251, 113, 133, 0)); }
html[data-season-intro] .season-glow { animation: sz-light 1.8s ease-out 1 both; }
@keyframes sz-light { from { opacity: 0; transform: scale(0.9); } }

/* the ornaments */
.season-art { --season-show: block; position: absolute; pointer-events: none; clip-path: inset(0 -60px -400px -60px); /* they come down from under the line, and never cross it */ }
.season-hang { display: block; width: 100%; height: auto; overflow: visible; color: var(--ink-900); }
.hero-copy { position: relative; }
/* They hang from the fine gold line under the header, which sits 80px down the page at every width: the empty column beside the headline
   takes the whole set; on a phone two small ones hang beside the greeting. */
.season-art-hero { --season-show: none; top: calc(80px - clamp(100px, 9vw, 116px)); right: -4px; width: 132px; }
@media (min-width: 640px) { .season-art-hero { --season-show: block; } }
@media (min-width: 1200px) { .season-art-hero { width: 158px; right: -6px; } }
.season-art-mini { top: calc(80px - clamp(100px, 9vw, 116px)); right: -2px; width: 72px; }
@media (min-width: 640px) { .season-art-mini { --season-show: none; } }
html[data-season-long] .season-art-mini { --season-show: none; }
.season-art .sz-swing { pointer-events: auto; cursor: pointer; }

.site-footer { position: relative; }
.season-art-footer { top: 0; right: max(16px, calc((100% - 1200px) / 2)); width: 64px; }
.season-art-footer .sz-thread { stroke: rgba(255, 255, 255, 0.32); }
.season-art-footer .sz-ink, .season-art-footer .sz-leg { fill: rgba(255, 255, 255, 0.82); stroke: none; }
.season-art-footer .sz-leg { fill: none; stroke: rgba(255, 255, 255, 0.82); }
.season-art-footer .sz-swing { pointer-events: none; cursor: default; }

.sz-thread { stroke: var(--ink-300); stroke-width: 1; }
.sz-cap, .sz-roof { fill: var(--gold-deep); }
.sz-trim { stroke: var(--gold-deep); stroke-width: 1.15; fill: none; opacity: 0.72; stroke-linecap: round; stroke-linejoin: round; }
.sz-trim-fill { fill: var(--gold-deep); opacity: 0.8; }
.sz-trim-light { stroke: #FDE68A; stroke-width: 1.4; stroke-linecap: round; }
.sz-shine { stroke: #fff; stroke-width: 2.2; stroke-linecap: round; fill: none; opacity: 0.75; }
.sz-tassel { stroke: var(--gold-deep); stroke-width: 1.2; stroke-linecap: round; opacity: 0.85; }
.sz-digit { font-family: var(--font-display); font-weight: 600; font-size: 21px; fill: var(--ink-900); }
.sz-rose-line { stroke: #FB7185; stroke-width: 2.4; stroke-linejoin: round; fill: none; }
.sz-ink { fill: var(--ink-900); }
.sz-leg { stroke: var(--ink-900); stroke-width: 1.4; stroke-linecap: round; fill: none; }
.sz-eye { fill: var(--nova-gold-400); }
.sz-stem { stroke: var(--gold-deep); stroke-width: 3; stroke-linecap: round; fill: none; }
.sz-moon-dark { fill: none; stroke: var(--ink-200); stroke-width: 1; }
.sz-craters { fill: var(--nova-gold-500); opacity: 0.32; }
.sz-flame-core { fill: #fff; opacity: 0.75; }

/* the once-only movement: every ornament drops into place, a flame breathes, the line under the header draws itself */
html[data-season-intro] .sz-h { animation: sz-drop 0.9s var(--ease-out) calc(var(--i) * 70ms) 1 both; }
html[data-season-intro] .season-mark { animation: sz-twinkle 1.2s var(--ease-out) 1 both; }
html[data-season-intro] .site-header::after { animation: sz-rule 1.4s var(--ease-out) 1 both; }
html[data-season-playing] .sz-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: sz-flame 0.7s ease-in-out 6 alternate; }
@keyframes sz-drop { from { transform: translateY(-46px); opacity: 0; } }
@keyframes sz-twinkle { from { transform: scale(0.2) rotate(-60deg); opacity: 0; } 60% { transform: scale(1.25); opacity: 1; } }
@keyframes sz-rule { from { transform: scaleX(0); opacity: 0; } }
@keyframes sz-flame { to { transform: scaleY(0.86) scaleX(1.08) rotate(2deg); } }

@media (prefers-reduced-motion: reduce) {
  html[data-season-intro] .sz-h, html[data-season-intro] .season-mark, html[data-season-intro] .site-header::after, html[data-season-intro] .season-glow, html[data-season-intro] .season-greet { animation: none; }
  html[data-season-intro] .season-greet { background: none; color: var(--ink-900); }
}

/* the footer's own switches */
.season-hide, .season-show { display: none; }
html[data-season] .season-hide, html.season-hidden .season-show { display: inline-block; }

/* an admin's preview */
.season-preview-bar { position: fixed; left: 16px; bottom: 16px; z-index: 900; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; max-width: calc(100vw - 32px); padding: 10px 14px; border-radius: var(--radius-lg); background: var(--ink-900); color: var(--white); font-size: 0.875rem; box-shadow: var(--card-shadow); }
.season-preview-bar button { padding: 6px 12px; border: 0; border-radius: var(--radius-pill); background: var(--nova-gold-400); color: var(--ink-900); font: inherit; font-weight: 600; cursor: pointer; }

@media print { .season-bit, .season-preview-bar, .season-stage, .season-ctl { display: none !important; } }