/* ===========================
   MAGISTRALE MANNEN — ANIMATIONS CSS
   All @keyframes definitions
   =========================== */

/* ---- LOGO ---- */
@keyframes logo-pulse {
  0%, 100% {
    text-shadow:
      0 0 20px rgba(0, 245, 255, 0.8),
      0 0 60px rgba(0, 245, 255, 0.4);
  }
  50% {
    text-shadow:
      0 0 30px rgba(0, 245, 255, 1),
      0 0 80px rgba(0, 245, 255, 0.6),
      0 0 120px rgba(0, 245, 255, 0.2);
  }
}

/* ---- CHARACTER ANIMATIONS ---- */
@keyframes idle-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

@keyframes char-enter {
  0%   { transform: translateY(30px); opacity: 0; }
  100% { transform: translateY(0px); opacity: 1; }
}

@keyframes char-leave {
  0%   { transform: translateY(0px); opacity: 1; }
  100% { transform: translateY(30px); opacity: 0; }
}

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

/* ---- CHOICES ---- */
@keyframes choice-enter {
  0%   { transform: translateX(-20px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

.choice-btn {
  animation: choice-enter 0.3s ease both;
}

.choice-btn:nth-child(1) { animation-delay: 0ms; }
.choice-btn:nth-child(2) { animation-delay: 150ms; }
.choice-btn:nth-child(3) { animation-delay: 300ms; }

/* ---- AFFINITY EFFECTS ---- */
@keyframes affinity-pulse {
  0%   { filter: drop-shadow(0 0 0px transparent); }
  50%  { filter: drop-shadow(0 0 20px rgba(0, 245, 255, 0.9)) drop-shadow(0 0 40px rgba(0, 245, 255, 0.5)); }
  100% { filter: drop-shadow(0 0 0px transparent); }
}

@keyframes heart-float-up {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  60%  { transform: translateY(-80px) scale(1.2) rotate(15deg); opacity: 0.8; }
  100% { transform: translateY(-120px) scale(0.8) rotate(-10deg); opacity: 0; }
}

@keyframes stat-gain-flash {
  0%   { background: rgba(0, 245, 255, 0.5); }
  100% { background: transparent; }
}

/* ---- SCREEN SHAKE ---- */
@keyframes screen-shake {
  0%   { transform: translateX(0); }
  10%  { transform: translateX(-6px); }
  20%  { transform: translateX(6px); }
  30%  { transform: translateX(-4px); }
  40%  { transform: translateX(4px); }
  50%  { transform: translateX(-2px); }
  60%  { transform: translateX(2px); }
  70%  { transform: translateX(-1px); }
  80%  { transform: translateX(1px); }
  100% { transform: translateX(0); }
}

.screen-shake {
  animation: screen-shake 0.5s ease !important;
}

/* ---- TYME GLITCH ---- */
@keyframes tyme-glitch {
  0%   { filter: drop-shadow(0 0 20px rgba(255, 0, 255, 0.3)); }
  2%   { filter: hue-rotate(90deg) drop-shadow(2px 0 0 rgba(255, 0, 255, 0.8)); clip-path: inset(20% 0 70% 0); }
  4%   { filter: hue-rotate(0deg) drop-shadow(0 0 20px rgba(255, 0, 255, 0.3)); clip-path: none; }
  30%  { filter: drop-shadow(0 0 20px rgba(255, 0, 255, 0.3)); }
  32%  { filter: hue-rotate(180deg) drop-shadow(-2px 0 0 rgba(0, 255, 255, 0.8)); }
  34%  { filter: hue-rotate(0deg); }
  100% { filter: drop-shadow(0 0 20px rgba(255, 0, 255, 0.3)); }
}

@keyframes tyme-bg-glitch {
  0%   { background: #000; }
  5%   { background: #0a001a; }
  10%  { background: #00001a; }
  15%  { background: #000; }
  50%  { background: #000; }
  55%  { background: #1a0000; }
  60%  { background: #000; }
  100% { background: #000; }
}

@keyframes tyme-overlay-shift {
  0%   { transform: translateX(0) translateY(0); }
  25%  { transform: translateX(2px) translateY(-1px); }
  50%  { transform: translateX(-1px) translateY(2px); }
  75%  { transform: translateX(1px) translateY(1px); }
  100% { transform: translateX(0) translateY(0); }
}

/* ---- TRANSITIONS ---- */
@keyframes wipe-in-left {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0% 0 0); }
}

@keyframes wipe-out-left {
  0%   { clip-path: inset(0 0% 0 0); }
  100% { clip-path: inset(0 0 0 100%); }
}

@keyframes pixelate-in {
  0%   { filter: blur(20px) brightness(0); opacity: 0; }
  50%  { filter: blur(4px) brightness(0.5); opacity: 0.7; }
  100% { filter: blur(0) brightness(1); opacity: 1; }
}

@keyframes fade-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fade-out {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* ---- NOTIFICATIONS ---- */
@keyframes notification-enter {
  0%   { transform: translateY(-20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes notification-exit {
  0%   { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-20px); opacity: 0; }
}

/* ---- ENDINGS ---- */
@keyframes ending-badge-reveal {
  0%   { transform: scale(0) rotate(-180deg); opacity: 0; }
  60%  { transform: scale(1.2) rotate(10deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes ending-title-reveal {
  0%   { letter-spacing: 20px; opacity: 0; }
  100% { letter-spacing: 3px; opacity: 1; }
}

/* ---- MENU CANVAS RAIN ---- */
@keyframes pixel-fall {
  0%   { transform: translateY(-10px); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.6; }
  100% { transform: translateY(100vh); opacity: 0; }
}

@keyframes pixel-drift {
  0%   { transform: translateY(-10px) translateX(0); opacity: 0; }
  10%  { opacity: 0.8; }
  50%  { transform: translateY(50vh) translateX(20px); }
  90%  { opacity: 0.3; }
  100% { transform: translateY(110vh) translateX(-10px); opacity: 0; }
}

/* ---- HEARTS / AFFINITY ---- */
@keyframes hearts-burst {
  0%   { transform: scale(0); opacity: 1; }
  50%  { transform: scale(1.5); opacity: 0.8; }
  100% { transform: scale(0.8); opacity: 0; }
}

/* ---- SPEAKER NAME ---- */
@keyframes speaker-reveal {
  0%   { width: 0; opacity: 0; }
  100% { width: auto; opacity: 1; }
}

/* ---- HUD ELEMENTS ---- */
@keyframes stat-bar-fill {
  0%   { width: 0%; }
}

/* ---- CHOICE HOVER PULSE ---- */
@keyframes choice-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(0, 245, 255, 0.2); }
  50%       { box-shadow: 0 0 20px rgba(0, 245, 255, 0.5); }
}

/* ---- GLASS INCIDENT EFFECT ---- */
@keyframes glass-break {
  0%   { filter: brightness(1); }
  10%  { filter: brightness(3) saturate(0); }
  20%  { filter: brightness(1) hue-rotate(180deg); }
  30%  { filter: brightness(2); }
  100% { filter: brightness(1); }
}

/* ---- NG+ REVEAL ---- */
@keyframes ngplus-reveal {
  0%   { color: transparent; text-shadow: 0 0 20px rgba(192, 132, 252, 1); }
  100% { color: #c084fc; text-shadow: 0 0 0px transparent; }
}

/* ---- ACHIEVEMENT FANFARE ---- */
@keyframes achievement-pop {
  0%   { transform: translateX(-50%) scale(0.5) translateY(-10px); opacity: 0; }
  40%  { transform: translateX(-50%) scale(1.05) translateY(0); opacity: 1; }
  60%  { transform: translateX(-50%) scale(0.98) translateY(0); }
  100% { transform: translateX(-50%) scale(1) translateY(0); opacity: 1; }
}