/* ════════════════════════════════════════════════════════════════════
   SymposiON · animations.css   —  motion kit
   Subtle, on-brand CSS animations grouped into four families:
     1. Ambient idle      — flicker / drift / blink / float / sway / twinkle
     2. Loaders           — orbit / laurel-spin / hourglass / meander dots
     3. Hover & reward    — shine sweep / pop / glow-pulse  (use on hover)
     4. Celebration       — ray burst / seal stamp / confetti rise / count-up
   Everything keys off currentColor + the --sym-* tokens, so it tints with
   whatever palette (or season) is active. No JS required.
   Honors prefers-reduced-motion.
   ════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
   1 · AMBIENT IDLE
───────────────────────────────────────────────────────────────────── */
@keyframes sym-flicker {
  0%,100% { opacity: 1;    transform: scaleY(1)    translateY(0); }
  25%     { opacity: .82;  transform: scaleY(1.06) translateY(-0.4px); }
  50%     { opacity: .95;  transform: scaleY(0.97) translateY(0.3px); }
  75%     { opacity: .78;  transform: scaleY(1.04) translateY(-0.2px); }
}
.anim-flicker { transform-origin: 50% 90%; animation: sym-flicker 1.7s ease-in-out infinite; }

@keyframes sym-drift {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(-6px); }
  100% { transform: translateX(0); }
}
.anim-drift { animation: sym-drift 4.5s ease-in-out infinite; }

@keyframes sym-blink {
  0%,92%,100% { transform: scaleY(1); }
  95%         { transform: scaleY(0.08); }
}
/* Apply to the eye <circle>/<ellipse> elements (transform-box keeps the
   pivot at the glyph's own centre). */
.anim-blink { transform-box: fill-box; transform-origin: center; animation: sym-blink 4.2s ease-in-out infinite; }
.anim-blink.delay { animation-delay: .12s; }

@keyframes sym-float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}
.anim-float { animation: sym-float 3.6s ease-in-out infinite; }

@keyframes sym-sway {
  0%,100% { transform: rotate(-2.5deg); }
  50%     { transform: rotate(2.5deg); }
}
.anim-sway { transform-origin: 50% 100%; animation: sym-sway 3.8s ease-in-out infinite; }

@keyframes sym-twinkle {
  0%,100% { opacity: .35; transform: scale(.9); }
  50%     { opacity: 1;   transform: scale(1.08); }
}
.anim-twinkle { transform-box: fill-box; transform-origin: center; animation: sym-twinkle 2.4s ease-in-out infinite; }

/* Slow ornamental rotation for orbit/constellation watermarks */
@keyframes sym-rotate { to { transform: rotate(360deg); } }
.anim-rotate-slow { transform-origin: center; animation: sym-rotate 36s linear infinite; }


/* ─────────────────────────────────────────────────────────────────────
   2 · LOADERS
───────────────────────────────────────────────────────────────────── */
.sym-loader { display: inline-flex; align-items: center; justify-content: center; color: var(--sym-terra, #D97B5C); }
.sym-loader svg, .sym-loader > * { width: 100%; height: 100%; }

/* Orbit — a ring with a planet that spins */
.sym-loader-orbit { width: 44px; height: 44px; position: relative; }
.sym-loader-orbit::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, currentColor 22%, transparent);
}
.sym-loader-orbit::after {
  content: ""; position: absolute; top: -3px; left: 50%; width: 7px; height: 7px;
  margin-left: -3.5px; border-radius: 50%; background: currentColor;
  transform-origin: 3.5px 25px; animation: sym-rotate 1.1s linear infinite;
  box-shadow: 0 0 8px currentColor;
}

/* Laurel spin — drop a laurel/wreath SVG inside and it rotates + breathes */
@keyframes sym-laurel { 0%{transform:rotate(0) scale(1)} 50%{transform:rotate(180deg) scale(1.08)} 100%{transform:rotate(360deg) scale(1)} }
.sym-loader-laurel { width: 48px; height: 48px; }
.sym-loader-laurel svg { animation: sym-laurel 2.2s ease-in-out infinite; transform-origin: center; }

/* Hourglass flip */
@keyframes sym-flip {
  0%,45%   { transform: rotate(0); }
  55%,100% { transform: rotate(180deg); }
}
.sym-loader-hourglass { width: 40px; height: 40px; }
.sym-loader-hourglass svg { animation: sym-flip 2s cubic-bezier(.7,0,.3,1) infinite; transform-origin: center; }

/* Meander dots — three pips fading in sequence */
.sym-loader-dots { display: inline-flex; gap: 6px; }
.sym-loader-dots i {
  width: 7px; height: 7px; border-radius: 1px; background: currentColor;
  animation: sym-dot 1.1s ease-in-out infinite;
}
.sym-loader-dots i:nth-child(2) { animation-delay: .16s; }
.sym-loader-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes sym-dot { 0%,100%{opacity:.25; transform:translateY(0)} 40%{opacity:1; transform:translateY(-4px)} }

/* Sweep bar — a meander-style progress shimmer */
.sym-loader-bar { width: 160px; height: 4px; background: color-mix(in srgb, currentColor 16%, transparent); overflow: hidden; }
.sym-loader-bar::after { content: ""; display: block; width: 40%; height: 100%; background: currentColor; animation: sym-sweep 1.3s ease-in-out infinite; }
@keyframes sym-sweep { 0%{transform:translateX(-110%)} 100%{transform:translateX(360%)} }


/* ─────────────────────────────────────────────────────────────────────
   3 · HOVER & REWARD  (add the class; effect triggers on :hover/.is-*)
───────────────────────────────────────────────────────────────────── */
/* Shine — a diagonal light sweep across a badge/seal on hover */
.sym-shine { position: relative; overflow: hidden; }
.sym-shine::after {
  content: ""; position: absolute; top: -60%; left: -120%; width: 60%; height: 220%;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--sym-gold,#C4A448) 55%, transparent), transparent);
  transform: rotate(8deg); pointer-events: none; transition: left .05s;
}
.sym-shine:hover::after, .sym-shine.is-shine::after { animation: sym-shine-sweep .85s ease; }
@keyframes sym-shine-sweep { from{left:-120%} to{left:160%} }

/* Pop — gentle scale + lift on hover */
.sym-pop { transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.sym-pop:hover { transform: translateY(-3px) scale(1.04); }

/* Glow pulse — a breathing terra/gold halo */
@keyframes sym-glowpulse {
  0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sym-terra,#D97B5C) 40%, transparent); }
  50%     { box-shadow: 0 0 22px 2px color-mix(in srgb, var(--sym-terra,#D97B5C) 30%, transparent); }
}
.sym-glow-pulse { animation: sym-glowpulse 2.4s ease-in-out infinite; }

/* Ring draw — animate a seal's outer ring drawing in (on .is-reveal) */
.sym-ring-draw circle:first-of-type {
  stroke-dasharray: 360; stroke-dashoffset: 360;
}
.sym-ring-draw.is-reveal circle:first-of-type { animation: sym-draw 1s ease forwards; }
@keyframes sym-draw { to { stroke-dashoffset: 0; } }


/* ─────────────────────────────────────────────────────────────────────
   4 · CELEBRATION  (toggle .is-celebrate on the wrapper)
───────────────────────────────────────────────────────────────────── */
/* Ray burst — radiating spokes behind an icon on level-up */
.sym-burst { position: relative; }
.sym-burst .rays {
  position: absolute; inset: -30%; pointer-events: none; opacity: 0;
  background:
    conic-gradient(from 0deg,
      color-mix(in srgb, var(--sym-gold,#C4A448) 60%, transparent) 0 4deg, transparent 4deg 30deg,
      color-mix(in srgb, var(--sym-gold,#C4A448) 60%, transparent) 30deg 34deg, transparent 34deg 60deg,
      color-mix(in srgb, var(--sym-gold,#C4A448) 60%, transparent) 60deg 64deg, transparent 64deg 90deg,
      color-mix(in srgb, var(--sym-gold,#C4A448) 60%, transparent) 90deg 94deg, transparent 94deg 120deg,
      color-mix(in srgb, var(--sym-gold,#C4A448) 60%, transparent) 120deg 124deg, transparent 124deg 180deg,
      color-mix(in srgb, var(--sym-gold,#C4A448) 60%, transparent) 180deg 184deg, transparent 184deg 240deg,
      color-mix(in srgb, var(--sym-gold,#C4A448) 60%, transparent) 240deg 244deg, transparent 244deg 300deg,
      color-mix(in srgb, var(--sym-gold,#C4A448) 60%, transparent) 300deg 304deg, transparent 304deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 40%, #000 70%, transparent 74%);
          mask: radial-gradient(circle, transparent 38%, #000 40%, #000 70%, transparent 74%);
}
.sym-burst.is-celebrate .rays { animation: sym-burst-rays .9s ease-out; }
@keyframes sym-burst-rays {
  0%   { opacity: 0; transform: scale(.4) rotate(0deg); }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.5) rotate(40deg); }
}

/* Seal stamp — icon thumps into place */
.sym-stamp.is-celebrate { animation: sym-stamp .5s cubic-bezier(.2,1.4,.3,1); }
@keyframes sym-stamp {
  0%   { transform: scale(2.2) rotate(-12deg); opacity: 0; }
  60%  { transform: scale(.94) rotate(2deg);   opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

/* Count-up bump — for XP/streak numbers when they tick */
.sym-bump.is-bump { animation: sym-bump .4s ease; }
@keyframes sym-bump { 0%{transform:scale(1)} 40%{transform:scale(1.28); color:var(--sym-gold,#C4A448)} 100%{transform:scale(1)} }

/* Confetti rise — lightweight pseudo-confetti for wins */
.sym-confetti { position: relative; overflow: hidden; }
.sym-confetti .bit {
  position: absolute; bottom: -8px; width: 6px; height: 9px; opacity: 0;
  background: var(--sym-terra,#D97B5C);
}
.sym-confetti.is-celebrate .bit { animation: sym-rise 1.1s ease-out forwards; }
.sym-confetti .bit:nth-child(2){ left:30%; background:var(--sym-gold,#C4A448); animation-delay:.05s; }
.sym-confetti .bit:nth-child(3){ left:50%; background:var(--sym-sage,#6A8752); animation-delay:.12s; }
.sym-confetti .bit:nth-child(4){ left:70%; background:var(--sym-terra,#D97B5C); animation-delay:.08s; }
.sym-confetti .bit:nth-child(5){ left:88%; background:var(--sym-gold,#C4A448); animation-delay:.16s; }
.sym-confetti .bit:nth-child(1){ left:12%; }
@keyframes sym-rise {
  0%   { opacity: 0; transform: translateY(0) rotate(0); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-120px) rotate(220deg); }
}


/* ─────────────────────────────────────────────────────────────────────
   Reduced motion — collapse everything to a static state
───────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .anim-flicker, .anim-drift, .anim-blink, .anim-float, .anim-sway, .anim-twinkle,
  .anim-rotate-slow, .sym-loader-orbit::after, .sym-loader-laurel svg,
  .sym-loader-hourglass svg, .sym-loader-dots i, .sym-loader-bar::after,
  .sym-glow-pulse {
    animation: none !important;
  }
}