/* ============================================
   DAVE'S HUD -- Visual Effects
   Animations, glows, particles, scan-lines, LEDs
   ============================================ */

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

@keyframes gridPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@keyframes ringRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

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

@keyframes blinkSlow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes breathe {
  0%, 100% {
    text-shadow: 0 0 10px var(--cyan-dim);
  }
  50% {
    text-shadow:
      0 0 20px var(--cyan),
      0 0 40px var(--cyan-dim),
      0 0 60px rgba(0, 240, 255, 0.1);
  }
}

@keyframes borderRotate {
  0% { --border-angle: 0deg; }
  100% { --border-angle: 360deg; }
}

@keyframes neonPulse {
  0%, 100% {
    box-shadow:
      0 0 8px rgba(var(--glow-r, 0), var(--glow-g, 240), var(--glow-b, 255), 0.15),
      inset 0 0 8px rgba(var(--glow-r, 0), var(--glow-g, 240), var(--glow-b, 255), 0.05);
  }
  50% {
    box-shadow:
      0 0 20px rgba(var(--glow-r, 0), var(--glow-g, 240), var(--glow-b, 255), 0.3),
      inset 0 0 20px rgba(var(--glow-r, 0), var(--glow-g, 240), var(--glow-b, 255), 0.08);
  }
}

@keyframes float1 {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(10px, -20px); }
  50% { transform: translate(-5px, -35px); }
  75% { transform: translate(15px, -15px); }
}

@keyframes float2 {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-15px, -10px); }
  50% { transform: translate(10px, -30px); }
  75% { transform: translate(-8px, -20px); }
}

@keyframes float3 {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(20px, -25px); }
  66% { transform: translate(-10px, -40px); }
}

@keyframes scanMove {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

@keyframes glitchIn {
  0% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform: translate(0);
  }
  20% {
    clip-path: polygon(0 20%, 100% 15%, 100% 85%, 0 80%);
    transform: translate(-5px, 2px);
  }
  40% {
    clip-path: polygon(0 40%, 100% 35%, 100% 65%, 0 60%);
    transform: translate(3px, -1px);
  }
  60% {
    clip-path: polygon(0 10%, 100% 5%, 100% 95%, 0 90%);
    transform: translate(-2px, 1px);
  }
  80% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform: translate(1px, 0);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform: translate(0);
  }
}

@keyframes typewriter {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes cursorBlink {
  0%, 100% { border-right-color: var(--cyan); }
  50% { border-right-color: transparent; }
}

@keyframes cornerPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ---- Scan-line Overlay ---- */
.scanlines {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 4px
  );
}

/* Moving scan beam */
.scanlines::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(0, 240, 255, 0.02),
    transparent
  );
  animation: scanMove 8s linear infinite;
}

/* ---- Particle Background ---- */
.particles {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--cyan);
  border-radius: 50%;
  opacity: 0.15;
  box-shadow: 0 0 4px var(--cyan);
}

/* ---- Card Entrance Animations ---- */
.card-animate {
  opacity: 0;
  animation: slideUp 0.6s ease forwards;
  animation-delay: var(--card-delay, 0s);
}

/* ---- Card Neon Glow ---- */
.card-border-glow {
  position: absolute;
  inset: -1px;
  border-radius: var(--card-radius);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    var(--card-glow-color, var(--cyan)) 10%,
    transparent 20%,
    transparent 100%
  );
  animation: borderRotateSmooth 4s linear infinite;
}

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

.hud-card:hover .card-border-glow {
  opacity: 0.5;
}

/* Card glow shadow on hover */
.hud-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--card-radius);
  box-shadow:
    0 0 15px color-mix(in srgb, var(--card-glow-color, var(--cyan)) 20%, transparent),
    inset 0 0 15px color-mix(in srgb, var(--card-glow-color, var(--cyan)) 5%, transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
}

.hud-card:hover::after {
  opacity: 1;
}

/* ---- Corner Bracket Animations ---- */
.card-corner {
  opacity: 0.5;
  transition: opacity 0.3s;
}

.hud-card:hover .card-corner {
  opacity: 1;
  animation: cornerPulse 2s ease-in-out infinite;
}

/* ---- LED Blink Animation ---- */
.led {
  animation: blink 2s ease-in-out infinite;
}

.led.led-green {
  animation: blinkSlow 3s ease-in-out infinite;
}

.led-static-green,
.led-static-red,
.led-static-cyan {
  animation: none;
}

/* ---- Breathing Clock Glow ---- */
.hud-clock {
  animation: breathe 4s ease-in-out infinite;
}

.status-clock {
  animation: breathe 4s ease-in-out infinite;
}

/* ---- Link Card Hover Glow ---- */
.hud-card-link:hover .link-card-icon {
  opacity: 1;
  filter: drop-shadow(0 0 8px var(--card-glow-color, var(--cyan)));
  transition: opacity 0.3s, filter 0.3s;
}

.hud-card-link:hover .link-card-label {
  text-shadow: 0 0 10px color-mix(in srgb, var(--card-glow-color, var(--cyan)) 40%, transparent);
}

/* ---- Auth Gate Effects ---- */
.auth-message.typing {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--cyan);
  animation: typewriter 0.8s steps(20) forwards, cursorBlink 0.7s step-end infinite;
}

.auth-container.glitch-out {
  animation: glitchIn 0.5s ease forwards;
}

/* ---- Header Logo Glow ---- */
.hud-logo-mini {
  animation: blinkSlow 4s ease-in-out infinite;
}

/* ---- Status Bar LED ---- */
.hud-status-bar .led-static-green {
  animation: blinkSlow 3s ease-in-out infinite;
}

/* ---- Reduce Motion for Accessibility ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .scanlines { display: none; }
  .particles { display: none; }
}