/* =============================================================================
   css/occasions.css : look of occasion decorations
   =============================================================================
   Templates in index.html are copied into two layers while their occasion is
   active:
     .occ-layer.back    behind the gem (z-order: below the glass canvas)
     .occ-layer.front   above the gem and the facet text; clicks pass through
   While occasion <id> is active, <html> has classes occ-<id> and occ-any,
   so anything on the page can be restyled for it, e.g.
     .occ-halloween .chip { border-color: #ff7518; }

   Particles: the engine fills [data-particles] with <i> elements carrying
   seeded CSS variables:
     --x --y     position (0..100%)     --d      animation duration
     --delay     negative start offset  --s      size scale
     --r         end rotation           data-v   variant 0..3 (colours)
   Motion classes: .fall (top to bottom), .float (bottom to top),
   .twinkle (in place). Shape classes (otherwise the text from data-chars):
   .confetti, .leaves, .dots, .eggs, coloured with --c0..--c3. Text
   particles use --pc.
   Everything moving stops for visitors who prefer reduced motion.
   ========================================================================== */

.occ-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.occ-layer.front{z-index:2}

/* ---------- particles ---------- */
.particles{position:absolute;inset:0}
.particles i{position:absolute;left:var(--x);top:-8%;display:block;font-style:normal;line-height:1;
  font-size:1.15rem;color:var(--pc,#fff);opacity:.85;will-change:transform;
  text-shadow:0 0 3px rgba(0,0,0,.35);   /* keeps light characters visible on the light theme */
  animation:occ-fall var(--d) linear var(--delay) infinite}
.particles.float i{top:auto;bottom:-8%;animation-name:occ-rise;opacity:.6}
.particles.twinkle i{top:var(--y);animation:occ-twinkle var(--d) ease-in-out var(--delay) infinite;font-size:.8rem}
@keyframes occ-fall{from{transform:translateY(0) rotate(0) scale(var(--s))}to{transform:translateY(118vh) rotate(var(--r)) scale(var(--s))}}
@keyframes occ-rise{from{transform:translateY(0) rotate(0) scale(var(--s))}to{transform:translateY(-118vh) rotate(var(--r)) scale(var(--s))}}
@keyframes occ-twinkle{0%,100%{opacity:.12;transform:scale(var(--s))}50%{opacity:.95;transform:scale(calc(var(--s) * 1.3))}}

/* shapes, coloured by variant */
.particles.confetti i,.particles.leaves i,.particles.dots i,.particles.eggs i{background:var(--c0)}
.particles i[data-v="1"]{--c0:var(--c1)}
.particles i[data-v="2"]{--c0:var(--c2)}
.particles i[data-v="3"]{--c0:var(--c3)}
.particles.confetti i{width:.42rem;height:.8rem;border-radius:1px;animation-name:occ-flutter}
.particles.leaves i{width:.95rem;height:.95rem;border-radius:0 70% 0 70%;opacity:.8}
.particles.dots i{width:.55rem;height:.55rem;border-radius:50%}
.particles.eggs i{width:.75rem;height:1rem;border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;opacity:.8}
@keyframes occ-flutter{
  from{transform:translateY(0) rotate(0) rotateX(0) scale(var(--s))}
  to{transform:translateY(118vh) rotate(var(--r)) rotateX(1080deg) scale(var(--s))}}

/* ---------- banner ---------- */
.occ-banner{position:absolute;top:3.4rem;left:50%;transform:translateX(-50%);margin:0;white-space:nowrap;
  font-size:.85rem;letter-spacing:.04em;padding:.35rem .8rem;border-radius:.35rem;
  background:var(--chip);color:var(--fg);border:1px solid var(--line-back);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
@media (max-width:34rem){.occ-banner{top:4.6rem}}   /* below the hint on narrow screens */
@media (max-width:22.5rem){.occ-banner{top:6.6rem}}
.occ-banner.leet{color:#39ff14;background:rgba(0,20,0,.75);border-color:#39ff14}

/* ---------- gimmick: glitch (class fx-glitch on <html> for ~1.3 s) ---------- */
.fx-glitch .stage{animation:occ-glitch 1.3s steps(1) both}
@keyframes occ-glitch{
  0%{transform:none;filter:none}
  10%{transform:translate(-6px,2px) skewX(4deg);filter:hue-rotate(90deg)}
  20%{transform:translate(5px,-3px);filter:invert(.15) hue-rotate(-60deg)}
  35%{transform:translate(-2px,0) skewX(-6deg);filter:saturate(3)}
  50%{transform:translate(3px,2px);filter:hue-rotate(180deg)}
  65%{transform:none;filter:contrast(1.6)}
  80%{transform:translate(-4px,-1px) skewX(2deg);filter:none}
  100%{transform:none;filter:none}}

/* ---------- reduced motion: keep static decorations, drop moving ones ---------- */
@media (prefers-reduced-motion:reduce){
  .particles{display:none}
  .fx-glitch .stage{animation:none}
}

/* ---------- palettes for the templates in index.html ----------
   Inline style="" attributes are blocked by the Content Security Policy, so
   each template's colours live here as a class named pal-<occasion>[-n]. */
.pal-xmas{--pc:#e8f4ff}
.pal-nye{--c0:#ffd166;--c1:#ef476f;--c2:#06d6a0;--c3:#ffffff}
.pal-new-year{--c0:#ffd166;--c1:#ef476f;--c2:#06d6a0;--c3:#ffffff}
.pal-valentine{--pc:#ff4d6d}
.pal-pi-day{--pc:#ffffff}
.pal-kings-day{--c0:#ff7f11;--c1:#ff9f1c;--c2:#ffffff;--c3:#21468b}
.pal-may-the-4th{--pc:#cfefff}
.pal-programmers-day{--pc:#39ff14}
.pal-halloween{--c0:#ff7518;--c1:#a0430a;--c2:#ffb347;--c3:#5c2a00}
.pal-elf-elf{--c0:#e30613;--c1:#ffd500;--c2:#007a3d;--c3:#ffffff}
.pal-sinterklaas{--c0:#8b5a2b;--c1:#a0522d;--c2:#6f4e37;--c3:#c68642}
.pal-easter{--c0:#b8e0d2;--c1:#eac4d5;--c2:#fdf0d5;--c3:#c3b1e1}
.pal-carnival{--c0:#e30613;--c1:#ffd500;--c2:#007a3d;--c3:#ffffff}