/* ==========================================================================
   Seasonal themes (Manage → Seasonal themes; catalog in SeasonalThemes).
   A third, decoration-only layer over data-theme (style) × data-mode (palette).
   It lives in the frame of the app — the logo, the foot of the menu, avatars,
   a once-a-day hello — and never in the page's content, except the dashboard
   greeting. It never redefines --bg, --text, --border or the primary buttons,
   so every style and mode keeps the contrast it was tuned for.
   The live theme's colours arrive as --sa-l/--sb-l (light) and --sa-d/--sb-d
   (dark; cosmic reuses them), from an inline <style> for the page and inline
   on each greeting / badge. Everything page-wide keys off #season-layer via
   :has — never <html> attributes, which Turbo keeps across visits.
   Artwork: Fluent Emoji (app/assets/images/season, MIT).
   Loaded by stylesheet_link_tag :app (outside the Tailwind build).
   ========================================================================== */

:root, .season-scope {
  --season-a: var(--sa-l, var(--accent));
  --season-b: var(--sb-l, var(--accent));
}
html[data-mode="dark"], html[data-mode="cosmic"],
html[data-mode="dark"] .season-scope, html[data-mode="cosmic"] .season-scope {
  --season-a: var(--sa-d, var(--accent));
  --season-b: var(--sb-d, var(--accent));
}

@keyframes season-pop {
  0%   { transform: scale(.4) rotate(-12deg); opacity: 0; }
  60%  { transform: scale(1.12) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
@keyframes season-sway {
  from { transform: rotate(-4deg) translateY(0); }
  to   { transform: rotate(4deg) translateY(-2px); }
}
@keyframes season-wiggle {
  0%, 100% { transform: rotate(0) scale(1); }
  30%      { transform: rotate(-14deg) scale(1.15); }
  60%      { transform: rotate(10deg) scale(1.1); }
}
@keyframes season-drift {
  from { transform: translate(0, 0) rotate(-6deg); }
  to   { transform: translate(6px, -5px) rotate(6deg); }
}

/* ---- The logo's mark (every intensity) ----------------------------------
   Sits still; a small wiggle when you point at the logo. */
.season-logo { position: relative; display: inline-flex; flex-shrink: 0; }
.season-garnish {
  position: absolute; right: -9px; bottom: -8px; line-height: 0; pointer-events: none;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .3));
}
.season-garnish img { animation: season-pop .7s cubic-bezier(.34, 1.56, .64, 1) both; }
a:hover .season-garnish img, a:focus-visible .season-garnish img { animation: season-wiggle .7s ease-in-out; }

/* ---- Current menu item picks up the theme colour (standard + festive) --- */
html:not([data-theme="a11y"]):has(#season-layer[data-intensity="standard"]) .nav-active,
html:not([data-theme="a11y"]):has(#season-layer[data-intensity="festive"]) .nav-active {
  box-shadow: var(--field-inset), inset 3px 0 0 var(--season-a);
}

/* ---- Avatar badge for the person being celebrated ----------------------- */
.season-avatar {
  position: relative; display: inline-flex; flex-shrink: 0; border-radius: 9999px;
  box-shadow: 0 0 0 2px var(--surface, #fff), 0 0 0 3.5px var(--season-a);
}
.season-avatar-badge {
  position: absolute; right: -6px; bottom: -6px; line-height: 0;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3));
}
.season-avatar-years {
  position: absolute; top: -6px; right: -10px; padding: 0 4px; border-radius: 9999px;
  font-size: 9px; font-weight: 700; line-height: 14px; color: var(--text);
  background: var(--surface, #fff); box-shadow: 0 0 0 1.5px var(--season-a);
}

/* ---- Dashboard greeting ---------------------------------------------------- */
.season-greeting-art { display: inline-flex; line-height: 0; }
.season-greeting-art img {
  animation: season-pop .7s cubic-bezier(.34, 1.56, .64, 1) both, season-sway 3.5s ease-in-out .7s infinite alternate;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .18));
}
.season-greeting-link {
  margin-left: .25rem; color: var(--text); text-decoration: underline;
  text-decoration-color: var(--season-a); text-decoration-thickness: 2px; text-underline-offset: 3px;
}

/* ---- The once-a-day hello ------------------------------------------------
   Grows out of the logo (desktop) or drops from the top (phones / sign-in). */
.season-hello {
  position: fixed; z-index: 65; top: 4.25rem; left: 1rem; width: min(20rem, calc(100vw - 2rem));
  padding: .875rem 2.25rem .875rem .875rem; border-radius: 16px; color: var(--text);
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--season-a) 14%, transparent), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, color-mix(in srgb, var(--season-b) 10%, transparent), transparent 60%),
    var(--surface, #fff);
  border: 1px solid color-mix(in srgb, var(--season-a) 28%, var(--border, #e5e7eb));
  box-shadow: 0 18px 40px -12px rgba(15, 23, 42, .28), 0 4px 10px -4px rgba(15, 23, 42, .12);
  transform-origin: 1.25rem -1.5rem;
  opacity: 0; transform: translate(-6px, -18px) scale(.55);
  transition: opacity .32s ease, transform .5s cubic-bezier(.34, 1.4, .64, 1);
}
.season-hello.is-open { opacity: 1; transform: none; }
.season-hello.is-closing { opacity: 0; transform: translate(-6px, -18px) scale(.6); transition-duration: .3s; }
@media (max-width: 1023px) {
  .season-hello { top: 4rem; left: 50%; margin-left: calc(min(20rem, calc(100vw - 2rem)) / -2); transform-origin: 50% -1rem; }
}
.season-hello-list { display: flex; flex-direction: column; gap: .625rem; }
.season-hello-item { display: flex; align-items: flex-start; gap: .75rem; }
.season-hello-art { flex-shrink: 0; line-height: 0; font-size: 28px; }
.season-hello.is-open .season-hello-art img {
  animation: season-pop .7s cubic-bezier(.34, 1.56, .64, 1) .15s both, season-sway 3s ease-in-out .9s infinite alternate;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .2));
}
.season-hello-head { display: block; font-size: .9375rem; font-weight: 600; line-height: 1.3; }
.season-hello-sub { display: block; margin-top: .125rem; font-size: .8125rem; line-height: 1.35; color: color-mix(in srgb, var(--text) 78%, transparent); }
.season-hello-link {
  display: inline-block; margin-top: .25rem; font-size: .8125rem; font-weight: 500; color: var(--text);
  text-decoration: underline; text-decoration-color: var(--season-a); text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.season-hello-close {
  position: absolute; top: .5rem; right: .5rem; padding: .25rem; border-radius: 9999px; color: var(--muted);
}
.season-hello-close:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
.season-hello-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---- Scene at the foot of the sidebar (standard + festive) ---------------- */
.season-scene {
  position: relative; flex-shrink: 0; height: 64px; margin: 0 .75rem .375rem; border-radius: 12px; overflow: hidden;
  pointer-events: none;
}
.season-scene-hill {
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 60% at 28% 118%, color-mix(in srgb, var(--season-a) 32%, transparent), transparent 72%),
    radial-gradient(60% 55% at 80% 122%, color-mix(in srgb, var(--season-b) 28%, transparent), transparent 72%),
    linear-gradient(to top, color-mix(in srgb, var(--season-a) 9%, transparent), transparent 75%);
}
.season-scene img { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .18)); }
.season-scene-row { position: absolute; left: 0; right: 0; display: flex; justify-content: center; }
.season-scene-ground-row { bottom: 4px; align-items: flex-end; gap: 1.25rem; }
.season-scene-sky-row { top: 5px; justify-content: space-around; padding: 0 1.5rem; }
.season-scene-ground-1 { transform: rotate(-6deg); }
.season-scene-ground-3 { transform: rotate(5deg); }
.season-scene-sky { animation: season-drift 7s ease-in-out infinite alternate; }
.season-scene-sky-2 { margin-top: 8px; animation-duration: 9s; animation-delay: -3s; }
.season-scene-sky-3 { animation-duration: 8s; animation-delay: -5s; }
@media (max-height: 700px) { .season-scene { display: none; } }

/* ---- A VP's private preview: a small pill, not a bar ---------------------- */
.season-preview-pill {
  position: fixed; z-index: 66; bottom: 1rem; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: .5rem; max-width: calc(100vw - 2rem);
  padding: .375rem .5rem .375rem .75rem; border-radius: 9999px; font-size: .75rem; color: var(--text);
  background: var(--surface, #fff); box-shadow: 0 0 0 2px var(--season-a), 0 8px 24px -8px rgba(15, 23, 42, .35);
}
.season-preview-stop {
  padding: .125rem .5rem; border-radius: 9999px; font-weight: 600; text-decoration: underline; cursor: pointer;
}

/* ---- Burst canvas (festive; season_controller.js) ------------------------ */
.season-fx { position: fixed; inset: 0; z-index: 70; pointer-events: none; }

/* ---- Accessibility -------------------------------------------------------
   High contrast keeps the words and the marks, drops tints, the scene and
   all motion. The burst controller checks the same conditions. */
html[data-theme="a11y"] .season-scene { display: none; }
html[data-theme="a11y"] .season-hello {
  background: var(--surface); border: 2px solid var(--text); box-shadow: none;
}
html[data-theme="a11y"] .season-hello-sub { color: var(--text); }
html[data-theme="a11y"] .season-avatar { box-shadow: 0 0 0 2px var(--text); }
html[data-theme="a11y"] .season-preview-pill { box-shadow: 0 0 0 2px var(--text); }
html[data-theme="a11y"] :is(.season-garnish img, .season-greeting-art img, .season-hello-art img, .season-scene img) { animation: none; }
html[data-theme="a11y"] .season-hello { transition: opacity .2s ease; transform: none; }

@media (prefers-contrast: more) {
  .season-scene { display: none; }
  .season-hello { background: var(--surface); border: 2px solid var(--text); }
  .season-hello-sub { color: var(--text); }
}
@media (forced-colors: active) {
  .season-scene, .season-fx { display: none; }
  .season-hello { border: 2px solid CanvasText; }
  .season-avatar { box-shadow: none; outline: 2px solid CanvasText; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.season-garnish img, .season-greeting-art img, .season-hello-art img, .season-scene img) { animation: none !important; }
  .season-hello, .season-hello.is-closing { transform: none; transition: opacity .2s ease; }
  .season-fx { display: none; }
}