/**
 * Animation Components
 * All keyframe animations and animation utilities
 * Using design system tokens
 */

/* ============================================
   SCREEN TRANSITIONS
   ============================================ */

@keyframes breach-entry {
  0% {
    transform: scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  100% {
    transform: scale(3);
    opacity: 0;
    filter: blur(10px);
  }
}

@keyframes system-boot {
  0% {
    opacity: 0;
    transform: scaleY(0.01) scaleX(0);
    filter: brightness(5);
  }
  50% {
    opacity: 1;
    transform: scaleY(0.01) scaleX(1);
    filter: brightness(2);
  }
  100% {
    opacity: 1;
    transform: scaleY(1) scaleX(1);
    filter: brightness(1);
  }
}

.screen-exit-anim {
  animation: breach-entry 0.8s cubic-bezier(0.7, 0, 0.3, 1) forwards;
  pointer-events: none;
}

.screen-enter-anim {
  animation: system-boot 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* ============================================
   CARD ANIMATIONS
   ============================================ */

@keyframes deal-in {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes stamp-slam {
  0% {
    transform: scale(3) rotate(0deg);
    opacity: 0;
  }
  100% {
    transform: scale(1) rotate(-5deg);
    opacity: 0.9;
  }
}

@keyframes breathe {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

/* ============================================
   TEXT ANIMATIONS
   ============================================ */

@keyframes blink-text {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

/* ============================================
   DICE ROLL ANIMATIONS
   ============================================ */

@keyframes diceSpin {
  0%,
  100% {
    transform: rotate(0deg) scale(1);
  }
  25% {
    transform: rotate(5deg) scale(1.1);
  }
  50% {
    transform: rotate(0deg) scale(1);
  }
  75% {
    transform: rotate(-5deg) scale(1.1);
  }
}

@keyframes diceSuccess {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes diceFailure {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes diceCriticalFailure {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  10% {
    transform: translate(-5px, -5px) rotate(-2deg);
  }
  20% {
    transform: translate(5px, 5px) rotate(2deg);
  }
  30% {
    transform: translate(-5px, 5px) rotate(-2deg);
  }
  40% {
    transform: translate(5px, -5px) rotate(2deg);
  }
  50% {
    transform: translate(-5px, -5px) rotate(-2deg);
  }
  60% {
    transform: translate(5px, 5px) rotate(2deg);
  }
  70% {
    transform: translate(-5px, 5px) rotate(-2deg);
  }
  80% {
    transform: translate(5px, -5px) rotate(2deg);
  }
  90% {
    transform: translate(-5px, -5px) rotate(-2deg);
  }
}

@keyframes glitch-red {
  0%,
  100% {
    transform: translate(-2px, -2px);
  }
  25% {
    transform: translate(2px, 2px);
  }
  50% {
    transform: translate(-2px, 2px);
  }
  75% {
    transform: translate(2px, -2px);
  }
}

@keyframes glitch-blue {
  0%,
  100% {
    transform: translate(2px, 2px);
  }
  25% {
    transform: translate(-2px, -2px);
  }
  50% {
    transform: translate(2px, -2px);
  }
  75% {
    transform: translate(-2px, 2px);
  }
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-3px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(3px);
  }
}

/* ============================================
   STATE ANIMATIONS
   ============================================ */

@keyframes pulse-warning {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

@keyframes pulse-critical {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

@keyframes pulse-ready {
  0% {
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.5);
  }
  50% {
    box-shadow: 0 0 25px rgba(57, 255, 20, 0.8);
  }
  100% {
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.5);
  }
}

@keyframes pulseStatus {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes flicker {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

/* ============================================
   MODAL/TOOLTIP ANIMATIONS
   ============================================ */

@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes scrollTicker {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.limit-hit {
  animation: shake 0.1s ease-in-out;
}

.blink {
  animation: blink 1s infinite;
}