/* =============================================
   KEYFRAME ANIMATIONS
   ============================================= */

/* Blink — simple on/off toggle */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.blink-cursor {
  animation: blink 1s step-end infinite;
}

/* Jitter — subtle random-feeling shake */
@keyframes jitter {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-0.2px, 0.2px); }
  20%  { transform: translate(0.2px, -0.2px); }
  30%  { transform: translate(-0.2px, 0); }
  40%  { transform: translate(0.2px, 0.2px); }
  50%  { transform: translate(-0.2px, -0.2px); }
  60%  { transform: translate(0, 0.2px); }
  70%  { transform: translate(0.2px, 0); }
  80%  { transform: translate(-0.2px, 0.2px); }
  90%  { transform: translate(0.2px, -0.2px); }
  100% { transform: translate(0, 0); }
}

/* PhosphorIn — CRT phosphor warm-up glow */
@keyframes phosphorIn {
  0% {
    opacity: 0;
    filter: brightness(0) blur(8px);
    transform: scale(0.98);
  }
  30% {
    opacity: 0.3;
    filter: brightness(0.5) blur(4px);
    transform: scale(0.99);
  }
  70% {
    opacity: 0.7;
    filter: brightness(1.2) blur(1px);
    transform: scale(1);
  }
  100% {
    opacity: 1;
    filter: brightness(1) blur(0);
    transform: scale(1);
  }
}

/* FlashTear — horizontal tear/glitch flash */
@keyframes flashTear {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  15% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
  30% {
    opacity: 0.6;
    clip-path: inset(10% 0 85% 0);
    transform: translateX(5px);
  }
  50% {
    opacity: 0.9;
    clip-path: inset(0 0 0 0);
    transform: translateX(0);
  }
  70% {
    opacity: 0.4;
    clip-path: inset(50% 0 40% 0);
    transform: translateX(-3px);
  }
  100% {
    opacity: 0;
    clip-path: inset(0 0 0 0);
    transform: translateX(0);
  }
}

/* FadeIn — simple opacity fade */
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* SnapVisible — instant snap to visible */
@keyframes snapVisible {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* WakeBlink — blink pattern for wake button */
@keyframes wakeBlink {
  0%, 100% { opacity: 1; }
  40% { opacity: 0.3; }
  60% { opacity: 0.3; }
}

/* FlashScreen — full-screen flash effect */
@keyframes flashScreen {
  0% {
    background: #00bfff;
    opacity: 1;
  }
  10% {
    background: #fff;
    opacity: 0.8;
  }
  30% {
    background: #00bfff;
    opacity: 0.4;
  }
  100% {
    background: transparent;
    opacity: 0;
  }
}

.win-flash {
  animation: flashScreen 0.6s ease-out forwards;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9998;
}

/* ScrollUp — text scroll reveal */
@keyframes scrollUp {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* BundleFeaturedFlash — pulsing glow for featured bundle */
@keyframes bundleFeaturedFlash {
  0%, 49.9% {
    background: transparent;
    color: #00bfff;
  }
  50%, 100% {
    background: #00bfff;
    color: #000;
  }
}

/* FunkyFlash — multi-color flash effect */
@keyframes funkyFlash {
  0%   { color: #00bfff; }
  15%  { color: #ff4444; }
  30%  { color: #44ff44; }
  45%  { color: #4488ff; }
  60%  { color: #ff44ff; }
  75%  { color: #ffff44; }
  90%  { color: #44ffff; }
  100% { color: #00bfff; }
}

/* FunkyBorderFlash — multi-color border flash */
@keyframes funkyBorderFlash {
  0%   { border-color: #00bfff; box-shadow: 0 0 8px #00bfff; }
  15%  { border-color: #ff4444; box-shadow: 0 0 8px #ff4444; }
  30%  { border-color: #44ff44; box-shadow: 0 0 8px #44ff44; }
  45%  { border-color: #4488ff; box-shadow: 0 0 8px #4488ff; }
  60%  { border-color: #ff44ff; box-shadow: 0 0 8px #ff44ff; }
  75%  { border-color: #ffff44; box-shadow: 0 0 8px #ffff44; }
  90%  { border-color: #44ffff; box-shadow: 0 0 8px #44ffff; }
  100% { border-color: #00bfff; box-shadow: 0 0 8px #00bfff; }
}

/* =============================================
   NEW ANIMATIONS
   ============================================= */

/* ScreenFlicker — simulates CRT power flicker */
@keyframes screenFlicker {
  0%   { opacity: 1; }
  3%   { opacity: 0.4; }
  6%   { opacity: 1; }
  8%   { opacity: 0.7; }
  10%  { opacity: 1; }
  50%  { opacity: 1; }
  52%  { opacity: 0.85; }
  54%  { opacity: 1; }
  100% { opacity: 1; }
}

/* ScanlineDrift — slow vertical drift of scanline band */
@keyframes scanlineDrift {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100vh;
  }
}

/* ModalSlideIn — modal entrance from bottom */
@keyframes modalSlideIn {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  60% {
    opacity: 1;
    transform: translateY(-5px) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modalSlideIn {
  animation: modalSlideIn 0.35s ease-out forwards;
}

/* DenyShake — access denied / error shake */
@keyframes denyShake {
  0%, 100% { transform: translateX(0); }
  10%      { transform: translateX(-8px); }
  20%      { transform: translateX(8px); }
  30%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  50%      { transform: translateX(-4px); }
  60%      { transform: translateX(4px); }
  70%      { transform: translateX(-2px); }
  80%      { transform: translateX(2px); }
  90%      { transform: translateX(-1px); }
}

/* TypewriterPulse — caret pulse for typing effect */
@keyframes typewriterPulse {
  0%, 100% {
    border-right-color: #00bfff;
    text-shadow: 0 0 4px rgba(0, 191, 255, 0.6);
  }
  50% {
    border-right-color: transparent;
    text-shadow: 0 0 2px rgba(0, 191, 255, 0.3);
  }
}

/* PhosphorPing — brief brightness flash for message arrival */
@keyframes phosphorPing {
  0%   { filter: brightness(1.6); }
  100% { filter: brightness(1); }
}

/* =============================================
   ANIMATION UTILITY CLASSES
   ============================================= */

/* Phosphor fade overlay */
.phosphor-fade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: phosphorIn 2.5s ease-out forwards;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    rgba(6, 5, 3, 0.4) 70%,
    rgba(6, 5, 3, 0.9) 100%
  );
}

/* Tear glitch strips */
.tear-fast-1,
.tear-fast-2,
.tear-fast-3 {
  position: absolute;
  width: 100%;
  pointer-events: none;
  z-index: 2;
  background: rgba(0, 191, 255, 0.06);
}

.tear-fast-1 {
  top: 15%;
  height: 2px;
  animation: flashTear 4s ease-in-out infinite;
  animation-delay: 0.5s;
}

.tear-fast-2 {
  top: 45%;
  height: 1px;
  animation: flashTear 3s ease-in-out infinite;
  animation-delay: 1.2s;
}

.tear-fast-3 {
  top: 78%;
  height: 2px;
  animation: flashTear 5s ease-in-out infinite;
  animation-delay: 2s;
}

/* =============================================
   DATALINK ANIMATIONS
   ============================================= */
@keyframes radarPulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.3; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes eqBounce {
  0% { height: 2px; }
  100% { height: 25px; }
}

@keyframes scanlineSweep {
  0% { top: 0%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

@keyframes confettiFall {
  0% { transform: translateY(-50px) rotate3d(1, 1, 0, 0deg); opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(100vh) rotate3d(1, 1, 0, 1080deg); opacity: 0; }
}
