/* ==========================================================
   ANIMATIONS & ATMOSPHERIC EFFECTS
   ========================================================== */

/* --- Fade In on Scroll --- */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Violet Glow Pulse --- */
@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.2),
                0 0 40px rgba(168, 85, 247, 0.1);
  }
  50% {
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.4),
                0 0 60px rgba(168, 85, 247, 0.2);
  }
}

.glow-pulse {
  animation: glowPulse 3s ease-in-out infinite;
}

/* --- Ambient Particles (CSS-only) --- */
.particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--color-violet-glow);
  border-radius: 50%;
  box-shadow: 0 0 6px 2px rgba(168, 85, 247, 0.6),
              0 0 12px 4px rgba(168, 85, 247, 0.3);
  animation: particleFloat linear infinite, particlePulse ease-in-out infinite;
}

.particle:nth-child(1)  { left: 5%;  animation-duration: 25s, 2.5s; animation-delay: 0s;   top: -5%; }
.particle:nth-child(2)  { left: 15%; animation-duration: 30s, 3.2s; animation-delay: -5s;  top: -5%; width: 4px; height: 4px; }
.particle:nth-child(3)  { left: 25%; animation-duration: 22s, 2.8s; animation-delay: -10s; top: -5%; }
.particle:nth-child(4)  { left: 35%; animation-duration: 28s, 3.5s; animation-delay: -3s;  top: -5%; width: 2px; height: 2px; }
.particle:nth-child(5)  { left: 45%; animation-duration: 35s, 2.2s; animation-delay: -8s;  top: -5%; width: 4px; height: 4px; }
.particle:nth-child(6)  { left: 55%; animation-duration: 26s, 3.0s; animation-delay: -12s; top: -5%; }
.particle:nth-child(7)  { left: 65%; animation-duration: 32s, 2.6s; animation-delay: -2s;  top: -5%; width: 5px; height: 5px; }
.particle:nth-child(8)  { left: 75%; animation-duration: 24s, 3.8s; animation-delay: -7s;  top: -5%; }
.particle:nth-child(9)  { left: 85%; animation-duration: 29s, 2.4s; animation-delay: -15s; top: -5%; width: 2px; height: 2px; }
.particle:nth-child(10) { left: 95%; animation-duration: 27s, 3.1s; animation-delay: -4s;  top: -5%; }
.particle:nth-child(11) { left: 10%; animation-duration: 33s, 2.9s; animation-delay: -6s;  top: -5%; width: 5px; height: 5px; }
.particle:nth-child(12) { left: 40%; animation-duration: 31s, 3.6s; animation-delay: -11s; top: -5%; width: 2px; height: 2px; }
.particle:nth-child(13) { left: 60%; animation-duration: 23s, 2.7s; animation-delay: -9s;  top: -5%; width: 4px; height: 4px; }
.particle:nth-child(14) { left: 80%; animation-duration: 34s, 3.3s; animation-delay: -14s; top: -5%; width: 5px; height: 5px; }
.particle:nth-child(15) { left: 20%; animation-duration: 28s, 2.1s; animation-delay: -1s;  top: -5%; }

@keyframes particleFloat {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  50% {
    transform: translateY(55vh) translateX(30px);
  }
  90% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(110vh) translateX(-20px);
    opacity: 0;
  }
}

/* Rises from bottom to top */
@keyframes particleRise {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  10% { opacity: 0.8; }
  40% { transform: translateY(-40vh) translateX(40px); }
  70% { transform: translateY(-75vh) translateX(-20px); }
  90% { opacity: 0.8; }
  100% {
    transform: translateY(-115vh) translateX(15px);
    opacity: 0;
  }
}

/* Drifts right across the viewport */
@keyframes particleDriftRight {
  0% {
    transform: translateX(0) translateY(0);
    opacity: 0;
  }
  10% { opacity: 0.8; }
  30% { transform: translateX(30vw) translateY(-30px); }
  60% { transform: translateX(65vw) translateY(25px); }
  90% { opacity: 0.8; }
  100% {
    transform: translateX(110vw) translateY(-15px);
    opacity: 0;
  }
}

/* Diagonal drift, bottom-left to upper-right */
@keyframes particleDiagonal {
  0% {
    transform: translateX(0) translateY(0);
    opacity: 0;
  }
  10% { opacity: 0.8; }
  35% { transform: translateX(25vw) translateY(-30vh); }
  65% { transform: translateX(60vw) translateY(-55vh); }
  90% { opacity: 0.8; }
  100% {
    transform: translateX(110vw) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particlePulse {
  0%, 100% {
    box-shadow: 0 0 4px 1px rgba(168, 85, 247, 0.4),
                0 0 8px 3px rgba(168, 85, 247, 0.2);
    opacity: 0.6;
  }
  50% {
    box-shadow: 0 0 8px 3px rgba(168, 85, 247, 0.8),
                0 0 16px 6px rgba(168, 85, 247, 0.4);
    opacity: 1;
  }
}

/* Gold variant for rare sun-blood particle */
.particle--gold {
  background: var(--color-gold);
  box-shadow: 0 0 6px 2px rgba(200, 150, 46, 0.6),
              0 0 12px 4px rgba(200, 150, 46, 0.3);
}

@keyframes particlePulseGold {
  0%, 100% {
    box-shadow: 0 0 4px 1px rgba(200, 150, 46, 0.4),
                0 0 8px 3px rgba(200, 150, 46, 0.2);
    opacity: 0.6;
  }
  50% {
    box-shadow: 0 0 8px 3px rgba(200, 150, 46, 0.8),
                0 0 16px 6px rgba(200, 150, 46, 0.4);
    opacity: 1;
  }
}

/* Disable particles on mobile */
@media (max-width: 768px) {
  .particles {
    display: none;
  }
}

/* --- Boot Sequence --- */
.boot-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-primary);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.8s ease;
}

.boot-screen.fade-out {
  opacity: 0;
  pointer-events: none;
}

.boot-screen__line {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-violet-glow);
  letter-spacing: 0.15em;
  opacity: 0;
  margin: var(--space-xs) 0;
}

.boot-screen__skip {
  position: absolute;
  bottom: var(--space-2xl);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  letter-spacing: 0.2em;
  opacity: 0.5;
}

/* --- Page Transition Overlay --- */
.page-transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-primary);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.page-transition.is-active {
  opacity: 1;
  pointer-events: all;
}

.page-transition__text {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-violet-glow);
  letter-spacing: 0.2em;
}

/* --- Flicker Effect (for boot sequence) --- */
@keyframes flicker {
  0%   { opacity: 0.1; }
  5%   { opacity: 0.8; }
  10%  { opacity: 0.3; }
  15%  { opacity: 0.9; }
  20%  { opacity: 0.5; }
  50%  { opacity: 1;   }
  100% { opacity: 1;   }
}

.flicker {
  animation: flicker 0.3s ease-in-out;
}

/* --- Scan Line Effect (subtle) --- */
.scanlines::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(10, 10, 15, 0.03) 2px,
    rgba(10, 10, 15, 0.03) 4px
  );
}

/* --- Declassified Stamp --- */
.declassified-stamp {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.6;
}

.declassified-stamp::before {
  content: 'DECLASSIFIED: ';
  color: var(--clearance-green);
}