/* ===== style.css ===== */
/* ===== Cyberpunk Fonts ===== */
.font-cyber {
  font-family: 'Orbitron', sans-serif;
}
.font-terminal {
  font-family: 'Share Tech Mono', monospace;
}

/* ===== Scanlines Effect ===== */
.scanlines::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.05) 1px,
    transparent 1px,
    transparent 4px
  );
  pointer-events: none;
  z-index: 1;
}

/* ===== Fade In Animation ===== */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in {
  animation: fadeIn 1.5s ease-out forwards;
}

/* ===== Gradient Background Animation ===== */
.bg-animated {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(-45deg, #0f0c29, #302b63, #24243e, #ff005e, #00fff7);
  background-size: 600% 600%;
  animation: gradientShift 20s ease infinite;
  filter: brightness(0.5) blur(8px);
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ===== Camera Shake ===== */
@keyframes cameraShake {
  0% { transform: translate(0px, 0px) rotate(0deg); }
  20% { transform: translate(-1px, 2px) rotate(-0.5deg); }
  40% { transform: translate(-2px, -1px) rotate(0.5deg); }
  60% { transform: translate(1px, 2px) rotate(0deg); }
  80% { transform: translate(2px, -1px) rotate(0.5deg); }
  100% { transform: translate(0px, 0px) rotate(-0.5deg); }
}
.shake {
  animation: cameraShake 1s infinite;
}

/* ===== Glow + Color Cycle for Title ===== */
@keyframes colorCycleGlow {
  0%   { color: #00ffff; text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff; }
  25%  { color: #ff00ff; text-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff; }
  50%  { color: #ffff00; text-shadow: 0 0 10px #ffff00, 0 0 20px #ffff00; }
  75%  { color: #00ff00; text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00; }
  100% { color: #00ffff; text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff; }
}
.glow-cycle {
  animation: colorCycleGlow 8s infinite;
  display: inline-block;
  font-size: inherit;
  font-weight: inherit;
  color: #00ffff !important;
}

/* ===== Subtitles Color Cycle ===== */
@keyframes colorCycle {
  0% { color: #00ffff; }
  25% { color: #ff00ff; }
  50% { color: #ffff00; }
  75% { color: #00ff00; }
  100% { color: #00ffff; }
}
.text-cycle {
  animation: colorCycle 8s infinite;
}