/* css/style.css - Miskolci László UFO Archívum Stíluslap */

/* Kozmikus háttér + Katonai HUD raszter rács */
body {
  background-color: #010704;
  background-image: 
    linear-gradient(to right, rgba(0, 255, 102, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 255, 102, 0.03) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 0%, rgba(0, 255, 102, 0.15) 0%, transparent 70%),
    radial-gradient(circle at 85% 30%, rgba(16, 185, 129, 0.1) 0%, transparent 40%),
    radial-gradient(circle at 10% 70%, rgba(5, 150, 105, 0.08) 0%, transparent 50%);
  background-size: 40px 40px, 40px 40px, 100% 100%, 100% 100%, 100% 100%;
  background-attachment: fixed;
}

/* Sci-Fi Glass HUD Panelek sarokcsíkokkal */
.hud-panel {
  background: rgba(2, 18, 9, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 255, 102, 0.2);
  position: relative;
  transition: all 0.3s ease;
}
.hud-panel::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 10px; height: 10px;
  border-top: 2px solid #00ff66;
  border-left: 2px solid #00ff66;
}
.hud-panel::after {
  content: '';
  position: absolute;
  bottom: -1px; right: -1px;
  width: 10px; height: 10px;
  border-bottom: 2px solid #00ff66;
  border-right: 2px solid #00ff66;
}
.hud-panel:hover {
  border-color: rgba(0, 255, 102, 0.6);
  box-shadow: 0 0 30px rgba(0, 255, 102, 0.25);
}

/* ========================================================= */
/* HERO: ÉLETHŰ HÁTTÉR, CSILLAGOK & UFO FÉNYCSÍK ANIMÁCIÓ    */
/* ========================================================= */

@keyframes heroSlowDrift {
  0% { transform: scale(1.0) translate(0%, 0%); }
  50% { transform: scale(1.04) translate(-0.8%, -0.5%); }
  100% { transform: scale(1.0) translate(0%, 0%); }
}
.hero-bg-crisp {
  animation: heroSlowDrift 35s ease-in-out infinite;
  will-change: transform;
}

/* 🛸 GYORS UFO FÉNYCSÍK AZ ÉGEN */
@keyframes ufoDashStreak {
  0%, 75% {
    opacity: 0;
    transform: translate(-300px, 0px) rotate(-14deg) scaleX(0.1);
  }
  77% {
    opacity: 1;
  }
  82% {
    opacity: 1;
    transform: translate(calc(100vw + 400px), 180px) rotate(-14deg) scaleX(2.5);
  }
  84%, 100% {
    opacity: 0;
    transform: translate(calc(100vw + 400px), 180px) rotate(-14deg) scaleX(1);
  }
}
.ufo-streak-line {
  position: absolute;
  top: 18%;
  left: 0;
  width: 220px;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(0, 255, 102, 0.2) 30%, #00ff66 75%, #ffffff 100%);
  box-shadow: 0 0 16px 2px #00ff66, 0 0 4px #ffffff;
  border-radius: 9999px;
  pointer-events: none;
  animation: ufoDashStreak 12s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

@keyframes ufoSecondaryStreak {
  0%, 40% {
    opacity: 0;
    transform: translate(calc(100vw + 200px), 40px) rotate(162deg) scaleX(0.1);
  }
  42% {
    opacity: 0.9;
  }
  46% {
    opacity: 0.9;
    transform: translate(-300px, 240px) rotate(162deg) scaleX(2);
  }
  48%, 100% {
    opacity: 0;
    transform: translate(-300px, 240px) rotate(162deg) scaleX(1);
  }
}
.ufo-streak-secondary {
  position: absolute;
  top: 28%;
  left: 0;
  width: 140px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent 0%, #00ff66 70%, #ffffff 100%);
  box-shadow: 0 0 12px 1px #00ff66;
  border-radius: 9999px;
  pointer-events: none;
  animation: ufoSecondaryStreak 17s cubic-bezier(0.25, 0.9, 0.25, 1) infinite;
  animation-delay: 5s;
}

/* Pislogó csillagok */
@keyframes starTwinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.3); filter: drop-shadow(0 0 4px #00ff66); }
}
.twinkle-1 { animation: starTwinkle 3s ease-in-out infinite; }
.twinkle-2 { animation: starTwinkle 4.5s ease-in-out infinite 1.5s; }
.twinkle-3 { animation: starTwinkle 3.8s ease-in-out infinite 0.7s; }

/* Anomália pulzálása */
@keyframes cloudAnomalyPulse {
  0%, 100% { opacity: 0.25; transform: scale(0.95); }
  50% { opacity: 0.65; transform: scale(1.08); filter: blur(20px); }
}
.anomaly-cloud-glow {
  animation: cloudAnomalyPulse 5s ease-in-out infinite;
}

/* Radar forgás */
@keyframes scanCircle {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.radar-sweep {
  animation: scanCircle 5s linear infinite;
  transform-origin: bottom right;
}