/* ============================================================================
   CAKE MAMA — SEASONAL THEME OVERRIDES  (Phase 3)
   ----------------------------------------------------------------------------
   Each theme repaints the accent palette via [data-theme="..."] selectors on
   <html>. Backgrounds (--cream, --cream-2), text (--ink, --ink-soft) and the
   soft --blush tones stay constant — themes only paint the accent moments on
   the cream canvas. Pairs with themes/themes.js.
   ============================================================================ */

/* ---------- SEASONAL ---------- */
[data-theme="new-years"]     { --coral-deep:#8E7338; --coral:#D9C49E; --sage:#3F4E6F; --mustard:#E8C56C; }
[data-theme="valentines"]    { --coral-deep:#B5375B; --coral:#EBA4B5; --sage:#C9A4B4; --mustard:#F5C8D3; }
[data-theme="easter"]        { --coral-deep:#8E6FAF; --coral:#C4A8D2; --sage:#A6D2B5; --mustard:#F1DD8E; }
[data-theme="mothers-day"]   { --coral-deep:#A05E72; --coral:#E5B5B9; --sage:#A6B896; --mustard:#E8B89B; }
[data-theme="fathers-day"]   { --coral-deep:#8C4F33; --coral:#C97A5A; --sage:#3B4A66; --mustard:#D9A24A; }
[data-theme="halloween"]     { --coral-deep:#B85320; --coral:#EE9650; --sage:#5E3F7E; --mustard:#F5C04A; }
[data-theme="melbourne-cup"] { --coral-deep:#1F6B45; --coral:#5E9275; --sage:#D9C49E; --mustard:#8E3A4A; }
[data-theme="christmas"]     { --coral-deep:#9C2A33; --coral:#D9606A; --sage:#3F6B4A; --mustard:#D4A845; }

/* ---------- NEUTRALS ---------- */
[data-theme="neutral-coral"] { --coral-deep:#C97867; --coral:#E89B8A; --sage:#BFC9B4; --mustard:#E8B652; }
[data-theme="neutral-rose"]  { --coral-deep:#A85C70; --coral:#DA98A4; --sage:#C2BAB5; --mustard:#E5C29D; }
[data-theme="neutral-sage"]  { --coral-deep:#5E7A65; --coral:#9DB39E; --sage:#B8C2A8; --mustard:#D8C685; }
[data-theme="neutral-stone"] { --coral-deep:#7A6A5E; --coral:#B5A99A; --sage:#C2B7A4; --mustard:#D9C19A; }
[data-theme="neutral-slate"] { --coral-deep:#4F5C6A; --coral:#8B98A8; --sage:#B0B8BE; --mustard:#C0B9A8; }

/* ---------- ANNOUNCEMENT BAR ---------- */
/* Injected by themes.js as the first child of <nav class="nav"> on seasonal
   themes only. Inherits the nav's sticky stack so it sticks above content. */
.cm-banner {
  display:flex; align-items:center; justify-content:center;
  position:relative; z-index:1; /* sidestep iOS Safari backdrop-filter compositing bug on parent .nav */
  width:100%;
  min-height:40px;
  padding:10px 16px;
  background:var(--coral-deep);
  color:#fff;
  font-family:"Outfit", system-ui, sans-serif;
  font-size:13px;
  font-weight:500;
  letter-spacing:0.04em;
  text-align:center;
  line-height:1.3;
}
@media (min-width:640px) {
  .cm-banner { font-size:14px; }
}

/* ---------- MOTIFS ---------- */
/* Fixed-position decorative overlay, behind nav (z:30) and chat (z:50/60/70)
   but above section content. Pointer-events disabled so motifs never block
   clicks. Each motif gets `cm-motif-N` for per-slot positioning + rotation.
   Per-slot rotation lives in --rot (instead of `transform: rotate(...)`)
   so animation keyframes can compose translate() + rotate(var(--rot)). */
.cm-motifs {
  position:fixed; inset:0;
  pointer-events:none;
  z-index:5;
  overflow:hidden;
}
.cm-motif {
  position:absolute;
  width:64px; height:64px;
  opacity:0.85;
  filter:drop-shadow(0 4px 12px rgba(43,36,34,0.12));
  transform:rotate(var(--rot, 0deg)); /* base — applies when no animation is running (incl. reduced-motion) */
}
@media (min-width:720px) {
  .cm-motif { width:88px; height:88px; }
}

/* Default 4 slots — extend as more motifs are added per theme. */
.cm-motif-1 { top:12%;    right:4%;   --rot:-8deg; }
.cm-motif-2 { top:44%;    left:3%;    --rot:10deg; }
.cm-motif-3 { bottom:18%; right:6%;   --rot:-4deg; }
.cm-motif-4 { top:22%;    left:38%;   --rot:6deg;  }

/* Animation only for users who haven't asked to reduce motion. By gating the
   animation rules behind `no-preference`, reduced-motion users get static
   motifs at their slot positions with zero further work. */
@media (prefers-reduced-motion: no-preference) {
  .cm-motif {
    animation: cm-drift 9s ease-in-out infinite;
    will-change: transform, opacity;
  }
  /* Stagger so motifs never move in lockstep (negative delay starts mid-cycle). */
  .cm-motif-1 { animation-duration:  9s; animation-delay:    0s; }
  .cm-motif-2 { animation-duration: 11s; animation-delay: -2.5s; }
  .cm-motif-3 { animation-duration:  8s; animation-delay: -4.5s; }
  .cm-motif-4 { animation-duration: 12s; animation-delay: -1.2s; }

  /* Christmas + Valentine's: gentle rain instead of drift. Motifs anchor
     above the viewport so they fall the full height regardless of slot. */
  [data-theme="christmas"]  .cm-motif,
  [data-theme="valentines"] .cm-motif {
    top:-15vh; bottom:auto;
    animation-name: cm-rain;
    animation-timing-function: linear;
  }
  [data-theme="christmas"]  .cm-motif-1,
  [data-theme="valentines"] .cm-motif-1 { animation-duration: 12s; animation-delay:  0s; }
  [data-theme="christmas"]  .cm-motif-2,
  [data-theme="valentines"] .cm-motif-2 { animation-duration: 14s; animation-delay: -3s; }
  [data-theme="christmas"]  .cm-motif-3,
  [data-theme="valentines"] .cm-motif-3 { animation-duration: 11s; animation-delay: -6s; }
  [data-theme="christmas"]  .cm-motif-4,
  [data-theme="valentines"] .cm-motif-4 { animation-duration: 15s; animation-delay: -9s; }
}

/* Default drift — motif traces a gentle upward arc with side-to-side sway and
   an opacity pulse. Distances are deliberately a few times larger than the
   original 5/10px wobble so the motion is actually visible at typical motif
   sizes (64–88px); the ease-in-out timing keeps it smooth, not frantic. */
@keyframes cm-drift {
  0%   { transform: translate(0, 0)         rotate(var(--rot, 0deg)); opacity:0.7; }
  25%  { transform: translate(12px, -16px)  rotate(var(--rot, 0deg)); opacity:0.9; }
  50%  { transform: translate(0, -28px)     rotate(var(--rot, 0deg)); opacity:1;   }
  75%  { transform: translate(-12px, -16px) rotate(var(--rot, 0deg)); opacity:0.9; }
  100% { transform: translate(0, 0)         rotate(var(--rot, 0deg)); opacity:0.7; }
}

/* Rain — fade in from above, fall the full viewport, fade out before loop. */
@keyframes cm-rain {
  0%   { transform: translate(0, 0)        rotate(var(--rot, 0deg)); opacity:0;   }
  8%   { opacity:0.9; }
  92%  { opacity:0.9; }
  100% { transform: translate(-6px, 130vh) rotate(var(--rot, 0deg)); opacity:0;   }
}
