/* ==========================================================================
   Star Letter — Animations
   All keyframes (base four-act set + expansion set). Keyframes are global;
   keeping them together does not affect the style cascade.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Animations
   -------------------------------------------------------------------------- */

@keyframes nebulaDrift {
  0% { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  100% { transform: translate3d(1.5%, 1.5%, 0) scale(1.06); }
}

@keyframes auroraOne {
  0% { transform: rotate(-13deg) translate3d(-3%, 0, 0) scale(1); }
  100% { transform: rotate(-8deg) translate3d(4%, -2%, 0) scale(1.08); }
}

@keyframes auroraTwo {
  0% { transform: rotate(9deg) translate3d(2%, 1%, 0) scale(1.02); opacity: 0.42; }
  100% { transform: rotate(3deg) translate3d(-4%, -2%, 0) scale(1.1); opacity: 0.7; }
}

@keyframes auroraThree {
  0% { transform: rotate(-4deg) translate3d(-2%, 0, 0); opacity: 0.4; }
  100% { transform: rotate(4deg) translate3d(3%, 2%, 0); opacity: 0.66; }
}

@keyframes moonFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

@keyframes moonDot {
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

@keyframes caretBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes loaderStar {
  0%, 100% { opacity: 0.55; transform: scale(0.9) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.12) rotate(45deg); }
}

@keyframes loaderGather {
  0% { transform: translate(var(--dx), var(--dy)) scale(0.4); opacity: 0; }
  22% { opacity: 0.9; }
  68% { transform: translate(0, 0) scale(1); opacity: 0.85; }
  100% { transform: translate(0, 0) scale(0.15); opacity: 0; }
}

@keyframes lineSweep {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes heartSub {
  0%, 100% { opacity: 0.4; }
  40% { opacity: 0.9; }
  55% { opacity: 0.55; }
  70% { opacity: 0.95; }
}

@keyframes heartGlow {
  0%, 100% { transform: translate(-50%, -50%) scale(0.97); opacity: 0.8; }
  12% { transform: translate(-50%, -50%) scale(1.015); opacity: 1; }
  26% { transform: translate(-50%, -50%) scale(0.995); opacity: 0.9; }
  40% { transform: translate(-50%, -50%) scale(1.008); opacity: 0.97; }
  60% { transform: translate(-50%, -50%) scale(0.97); opacity: 0.8; }
}

@keyframes btnBreathe {
  0%, 100% {
    box-shadow:
      0 8px 30px rgba(255, 111, 159, 0.26),
      0 0 40px rgba(255, 143, 184, 0.17),
      inset 0 1px 0 rgba(255, 255, 255, 0.55);
  }
  50% {
    box-shadow:
      0 10px 38px rgba(255, 111, 159, 0.34),
      0 0 68px rgba(255, 143, 184, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.62);
  }
}

@keyframes titleShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes haloBreathe {
  0%, 100% { transform: translate(-50%, -50%) scale(0.96); opacity: 0.8; }
  50% { transform: translate(-50%, -50%) scale(1.05); opacity: 1; }
}

@keyframes sceneRise {
  0% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes dawnRise {
  0% { opacity: 0; transform: translateY(22px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes letterRise {
  0% { opacity: 0; transform: translateY(76px) rotate(0.25deg); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) rotate(0deg); }
}

@keyframes equalizer {
  0%, 100% { transform: scaleY(0.45); }
  50% { transform: scaleY(1.15); }
}



/* ---------- Expansion keyframes ---------- */

/* ---------- New keyframes ---------- */
@keyframes bpmPulse {
  0%, 100% { opacity: 0.45; transform: scale(0.75); }
  40% { opacity: 1; transform: scale(1.1); }
  55% { opacity: 0.55; transform: scale(0.9); }
  70% { opacity: 0.95; transform: scale(1.05); }
}

@keyframes coverSealPulse {
  0%, 100% { box-shadow: inset 0 3px 6px rgba(255, 190, 180, 0.35), inset 0 -6px 12px rgba(55, 8, 18, 0.5), 0 8px 18px rgba(40, 8, 12, 0.35), 0 0 0 0 rgba(255, 180, 150, 0); }
  52% { box-shadow: inset 0 3px 6px rgba(255, 190, 180, 0.35), inset 0 -6px 12px rgba(55, 8, 18, 0.5), 0 8px 18px rgba(40, 8, 12, 0.35), 0 0 30px 4px rgba(255, 170, 140, 0.12); }
}

@keyframes sealShake {
  0%, 100% { transform: translate(-50%, -50%) rotate(-5deg); }
  20% { transform: translate(-52%, -50%) rotate(-8deg); }
  40% { transform: translate(-48%, -50%) rotate(-2deg); }
  60% { transform: translate(-51%, -50%) rotate(-7deg); }
  80% { transform: translate(-49%, -50%) rotate(-3deg); }
}

@keyframes hintPulse {
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.16); }
}

@keyframes chronicleLineIn {
  0% { opacity: 0; transform: translateY(12px); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes starLit {
  0% { transform: scale(0.5); }
  45% { transform: scale(1.5); }
  100% { transform: scale(1); }
}

@keyframes wishFlash {
  0% { filter: brightness(1); }
  30% { filter: brightness(1.8); }
  100% { filter: brightness(1); }
}

@keyframes wishTextIn {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes cueBob {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50% { transform: translateY(4px); opacity: 1; }
}

@keyframes dockIn {
  0% { opacity: 0; transform: translate(-50%, 14px); }
  100% { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes binarySpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes dustDrift {
  0% { transform: translate3d(-1%, 0, 0); opacity: 0.6; }
  100% { transform: translate3d(1.5%, 1%, 0); opacity: 0.95; }
}

@keyframes certificateRise {
  0% { opacity: 0; transform: translateY(64px) rotate(0.3deg); }
  65% { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) rotate(0); }
}