/* public/assets/css/animations.css */

@keyframes starPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  50%       { transform: translate(-50%, -50%) scale(1.25) rotate(20deg); }
}

@keyframes sparkleUp {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), -28px) scale(.3); }
}

@keyframes wandCast {
  0%   { transform: rotate(40deg) scale(1); }
  30%  { transform: rotate(40deg) scale(1.18); }
  100% { transform: rotate(40deg) scale(1); }
}

@keyframes sparkleBurst {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.2); }
}

@keyframes clickFlash {
  0%   { opacity: .9; transform: translate(-50%, -50%) scale(0); }
  50%  { opacity: .4; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0;  transform: translate(-50%, -50%) scale(1.4); }
}

@keyframes burstRing {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: .8; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

@keyframes burstSpark {
  0%   { opacity: 1; transform: rotate(var(--angle)) translateY(0) scale(1); }
  100% { opacity: 0; transform: rotate(var(--angle)) translateY(var(--dist)) scale(0); }
}

/* ── Scanline scroll ── */
@keyframes scanline {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

/* ── RPG cursor blink ── */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Shimmer flow (spell stream) ── */
@keyframes shimmerFlow {
  from { stroke-dashoffset: 600; }
  to   { stroke-dashoffset: 0; }
}

/* ── Symbol pulse (spell stream markers) ── */
@keyframes symbolPulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.2); }
}

@keyframes ringPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.4); opacity: .6; }
}

/* ── Face avatar idle ring ── */
@keyframes idlePulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);   opacity: 0; }
  40%       { transform: translate(-50%, -50%) scale(1.4); opacity: .22; }
  65%       { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}

/* ── String draw (Beat 4) ── */
/* stroke-dashoffset transition handled inline */

/* ── Gold underline draw ── */
@keyframes lineGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ── Story: ambient float ── */
@keyframes storyAmbientFloat {
  0%   { opacity: 0;   transform: translateY(0)     translateX(0)          scale(0.7); }
  12%  { opacity: 0.45; }
  88%  { opacity: 0.15; }
  100% { opacity: 0;   transform: translateY(-110px) translateX(var(--dx))  scale(0.4); }
}

/* ── Story: scroll spark ── */
@keyframes storyScrollSpark {
  0%   { opacity: 0.9; transform: translate(0, 0)               scale(1); }
  100% { opacity: 0;   transform: translate(var(--dx), -32px)   scale(0.2); }
}

/* ── Story: beat transition flash ── */
@keyframes storyBeatFlash {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Story particle elements ── */
.story-beat-flash {
  position: fixed; inset: 0;
  background: rgba(255, 202, 40, 0.012);
  pointer-events: none; z-index: 300;
  animation: storyBeatFlash 0.7s ease-out forwards;
}

.story-ambient-float {
  position: fixed;
  font-size: 7px;
  color: rgba(255, 202, 40, 0.35);
  pointer-events: none; user-select: none;
  z-index: 2;
  animation: storyAmbientFloat var(--dur, 4s) ease-out forwards;
}

.story-scroll-spark {
  position: absolute;
  font-size: 9px;
  color: rgba(255, 202, 40, 0.6);
  pointer-events: none; user-select: none;
  z-index: 2;
  animation: storyScrollSpark 0.9s ease-out forwards;
}

/* ── Story: transmutation spark burst (Beat 3 glyph swaps) ── */
.tm-spark {
  position: absolute;
  font-size: 11px;
  color: rgba(255, 202, 40, 0.85);
  pointer-events: none; user-select: none;
  z-index: 5;
  animation: sparkleBurst 0.75s ease-out forwards;
}