/* ==========================================================================
   DevOps Portfolio - Keyframe Animations & Transitions
   Author: Sumith K Sam
   ========================================================================== */

/* Terminal Cursor Blink */
@keyframes cursorBlink {
  0%, 49% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}

.cursor-blink {
  display: inline-block;
  width: 9px;
  height: 1.15em;
  background-color: var(--accent-green, #00ff66);
  vertical-align: text-bottom;
  animation: cursorBlink 1s infinite;
  box-shadow: 0 0 8px var(--accent-green, #00ff66);
}

/* Status Indicator Pulses */
@keyframes pulseGreen {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 255, 102, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(0, 255, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 255, 102, 0);
  }
}

.pulse-green {
  animation: pulseGreen 2s infinite;
}

@keyframes pulseCyan {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(0, 212, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 212, 255, 0);
  }
}

.pulse-cyan {
  animation: pulseCyan 2s infinite;
}

@keyframes pulseAmber {
  0% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(245, 158, 11, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
  }
}

.pulse-amber {
  animation: pulseAmber 2s infinite;
}

@keyframes pulseRed {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.8);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(239, 68, 68, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

.pulse-red {
  animation: pulseRed 1.5s infinite;
}

/* Subtle CRT Scanline Animation */
@keyframes scanline {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}

.scanline-effect {
  position: relative;
  overflow: hidden;
}

.scanline-effect::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.04), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.04));
  z-index: 2;
  background-size: 100% 3px, 3px 100%;
  pointer-events: none;
  opacity: 0.6;
}

/* Section Reveal Fade in Up */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.fade-in-up.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Shimmer Loading Bar */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.shimmer-active {
  background: linear-gradient(90deg, rgba(0,255,102,0.1) 0%, rgba(0,255,102,0.4) 50%, rgba(0,255,102,0.1) 100%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

/* Radar Sweep for Network Topology */
@keyframes radarSweep {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.radar-sweep {
  animation: radarSweep 6s linear infinite;
  transform-origin: center center;
}

/* Data Flow / Packet Dash Animation */
@keyframes dashFlow {
  to {
    stroke-dashoffset: -40;
  }
}

.animated-wire {
  stroke-dasharray: 6, 4;
  animation: dashFlow 1.2s linear infinite;
}

/* Floating Elements */
@keyframes floatY {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

.float-slow {
  animation: floatY 4s ease-in-out infinite;
}

/* Boot Progress Bar Loading Animation */
@keyframes bootProgressPulse {
  0% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 10px var(--accent-green, #00ff66));
  }
  100% {
    opacity: 0.8;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .cursor-blink {
    animation: none;
    opacity: 1;
  }
}