/* ─────────────────────────────────────────────────────────────────────────
   Monthly Celebrations — opt-in seasonal flair
   ---------------------------------------------------------------------------
   The server emits `body.celebrate-<id>` ONLY for viewers who opted in
   (Settings → Privacy → Celebrations) AND only while that month's celebration
   is live — see internal/handler/celebration.go (celebrationClass). The browser
   only paints these styles; nothing here changes server-owned state.

   Add a future month with ZERO new wiring: add a celebrationByMonth entry in
   celebration.go, then add a matching `body.celebrate-<id>` block below.

   Everything animated has a prefers-reduced-motion no-op at the bottom.
   ───────────────────────────────────────────────────────────────────────── */

body.celebrate-pride {
  /* The 6-stripe Pride flag, as a reusable gradient. */
  --pride-gradient: linear-gradient(90deg,#e40303,#ff8c00,#ffed00,#008026,#004dff,#750787);
  --pride-gradient-v: linear-gradient(180deg,#e40303,#ff8c00,#ffed00,#008026,#004dff,#750787);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ★ REUSABLE PATTERN — "multi-color like-heart flash" (KEEP FOREVER) ★
   ---------------------------------------------------------------------------
   The canonical recipe for making the like heart cycle through ANY ordered set
   of exact colors on click. Used by Pride below (full ROYGBIV) and reusable for
   every future holiday (July 4 red/white/blue, Christmas red/green, etc.).

   Why it works:
     • The heart svg is fill="currentColor" stroke="currentColor" when liked
       (_like_btn.html), so animating CSS `color` recolors the WHOLE heart to an
       EXACT hex — far more reliable than `filter: hue-rotate`, which only
       approximates hues and can't hit clean named colors.
     • HTMX re-renders the button with `.is-on` on each like, so a fresh element
       plays the keyframe exactly ONCE (animation iteration count `1`).
     • Land the LAST keyframe stop on the heart's resting liked color; with one
       iteration and no `forwards` fill, it then settles to that color seamlessly.
     • Pair the color steps with a `transform: scale()` pop for life. Duration is
       free — slower = every color is legible (Pride uses 1400ms for 7 colors).
     • The reduced-motion block at the bottom sets `animation:none` on the same
       `.wab-like.is-on svg` selector — keep new themes under that umbrella.

   Template to copy for a new holiday `body.celebrate-<id>`:
     @keyframes <id>-like-flash {
       0%   { transform: scale(1);   color: <colorA>; }   // start = resting color
       ..%  { transform: scale(1.3); color: <colorB>; }   // N evenly-spaced stops
       100% { transform: scale(1);   color: <colorA>; }   // land back on resting
     }
     body.celebrate-<id> .wab-like.is-on svg {
       animation: <id>-like-flash <dur>ms ease-out 1;
     }
   Then add `body.celebrate-<id> .wab-like.is-on svg` to the reduced-motion list.
   No Go change, no JS change — one CSS block + one `celebrations` row.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Surface 1: like-button rainbow sweep ──────────────────────────────────
   The like button is re-rendered by HTMX with `.is-on` when liked, so the
   freshly-swapped element plays this keyframe exactly once. The heart svg is
   fill+stroke `currentColor`, so we step `color` through all seven ROYGBIV
   colors in order — red → orange → yellow → green → blue → indigo → violet —
   then land back on red, at which point the 1-iteration animation ends and the
   heart settles to its normal liked color. Indigo (#4b0082) is the one hue the
   6-stripe Pride flag omits; it's added here so the full rainbow shows. Slower
   than a flash so every color is legible. The server-owned like flow is
   untouched — this is pure presentation. */
@keyframes pride-like-sweep {
  0%   { transform: scale(1);   color: #e40303; } /* red    */
  14%  { transform: scale(1.4); color: #ff8c00; } /* orange */
  28%  { transform: scale(1.3); color: #ffed00; } /* yellow */
  42%  { transform: scale(1.25);color: #008026; } /* green  */
  56%  { transform: scale(1.2); color: #004dff; } /* blue   */
  70%  { transform: scale(1.15);color: #4b0082; } /* indigo */
  84%  { transform: scale(1.1); color: #750787; } /* violet */
  100% { transform: scale(1);   color: #e40303; } /* red    */
}
body.celebrate-pride .wab-like.is-on svg {
  animation: pride-like-sweep 1400ms ease-out 1;
}

/* ── Surface 2: wordmark rainbow ────────────────────────────────────────────
   The F33D3R wordmark in the sidebar gets a quiet rainbow gradient. One surface,
   seen once per session. */
body.celebrate-pride .nav-brand-text {
  background: var(--pride-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ── Surface 3: active nav-tab indicator ────────────────────────────────────
   Recolor the EXISTING active-tab indicator bar (styles.css .nav-item.active::before,
   normally var(--accent)) to the Pride gradient. Only the active tab. */
body.celebrate-pride .nav-item.is-active::before,
body.celebrate-pride .nav-item.active::before {
  background: var(--pride-gradient-v);
}

/* ── Surface 4: avatar ring (viewer's own account chip only) ─────────────────
   Scoped to the sidebar account avatar — the opted-in viewer's OWN avatar —
   NOT every avatar in the feed. Self-expression, never auto-applied to others.
   Mirrors the existing .realm-ring treatment (padding + inner border). */
body.celebrate-pride .nav-account .user-av-wrap {
  padding: 2px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,#e40303,#ff8c00,#ffed00,#008026,#004dff,#750787,#e40303);
}
body.celebrate-pride .nav-account .user-av-wrap .user-av {
  border: 2px solid var(--panel, var(--bg-sunk));
}

/* ═══════════════════════════════════════════════════════════════════════════
   Other scheduled themes. Each rides the SAME like button (fresh .is-on element
   on every like re-fires the keyframe once) plus a light wordmark tint. Add a
   new holiday = one block here + one `celebrations` row; no Go change.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── July 4 — fireworks burst on the like (red / white / blue) ──────────────── */
@keyframes july4-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.5); }
  100% { transform: scale(1); }
}
@keyframes july4-spark {
  0%   { opacity: 1; transform: translate(-50%,-50%) scale(.2); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(2.6); }
}
body.celebrate-july4 .wab-like.is-on svg {
  animation: july4-pop 600ms ease-out 1;
  color: #c8102e; /* festive red heart */
}
body.celebrate-july4 .wab-like.is-on { position: relative; }
body.celebrate-july4 .wab-like.is-on::after {
  content: ""; position: absolute; top: 50%; left: 18px;
  transform: translate(-50%,-50%); /* centered on the heart; keyframe re-applies it */
  width: 22px; height: 22px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle,#fff 0%,#c8102e 35%,#3c3b6e 70%,transparent 72%);
  /* `forwards` holds the final (transparent) frame so no colored dot lingers. */
  animation: july4-spark 600ms ease-out 1 forwards;
}
body.celebrate-july4 .nav-brand-text {
  background: linear-gradient(90deg,#c8102e,#9aa0b5,#3c3b6e);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ── Halloween — pumpkin pop with a purple glow ─────────────────────────────── */
@keyframes halloween-pop {
  0%   { transform: scale(1)    rotate(0); }
  30%  { transform: scale(1.35) rotate(-8deg); }
  60%  { transform: scale(1.15) rotate(8deg); }
  100% { transform: scale(1)    rotate(0); }
}
body.celebrate-halloween .wab-like.is-on svg {
  animation: halloween-pop 650ms ease-in-out 1;
  color: #ff7518; /* pumpkin orange */
  filter: drop-shadow(0 0 4px rgba(124,58,237,.6)); /* purple glow */
}
body.celebrate-halloween .nav-brand-text {
  background: linear-gradient(90deg,#ff7518,#7c3aed);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ── Christmas — pop then a red↔green twinkle ───────────────────────────────── */
@keyframes christmas-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.45); }
  70%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}
@keyframes christmas-twinkle {
  0%, 100% { color: #c8102e; } /* red */
  50%      { color: #0a8a3f; } /* green */
}
body.celebrate-christmas .wab-like.is-on svg {
  animation: christmas-pop 600ms ease-out 1, christmas-twinkle 1.4s ease-in-out 600ms 2;
  color: #c8102e;
}
body.celebrate-christmas .nav-brand-text {
  background: linear-gradient(90deg,#c8102e,#0a8a3f);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ── Accessibility: honor reduced-motion (matches styles.css convention) ──── */
@media (prefers-reduced-motion: reduce) {
  body.celebrate-pride     .wab-like.is-on svg,
  body.celebrate-july4     .wab-like.is-on svg,
  body.celebrate-halloween .wab-like.is-on svg,
  body.celebrate-christmas .wab-like.is-on svg { animation: none; }
  /* No spark dot without motion — hide the burst element entirely. */
  body.celebrate-july4 .wab-like.is-on::after { display: none; }
}