/* ══════════════════════════════════════
   Global Effects & Animations
   ══════════════════════════════════════ */

/* CRT Scanline Overlay (full page) */
.crt-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.015) 2px,
    rgba(0, 0, 0, 0.015) 4px
  );
}

/* Scroll Car (fixed, drives across screen) */
.scroll-car {
  position: fixed;
  bottom: 25px;
  left: 0;
  z-index: 998;
  pointer-events: none;
  will-change: transform;
  transition: none;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

.scroll-car__body {
  position: relative;
  font-size: 2rem;
  line-height: 1;
}

.scroll-car__exhaust {
  position: absolute;
  left: -15px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 10px;
}

/* Custom Cursor */
.custom-cursor {
  position: fixed;
  width: 32px;
  height: 32px;
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
  transition: transform 0.1s ease;
  font-size: 1.5rem;
  line-height: 1;
}

.custom-cursor--flag {
  transform: translate(-50%, -50%) scale(1.3);
}

body.custom-cursor-active,
body.custom-cursor-active * {
  cursor: none !important;
}

/* Neon glow divider between sections */
.section-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 240, 255, 0.3) 20%,
    rgba(0, 240, 255, 0.5) 50%,
    rgba(0, 240, 255, 0.3) 80%,
    transparent 100%
  );
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.15);
}

/* Glitch effect for gallery transitions */
@keyframes glitch {
  0% { transform: translate(0); filter: none; }
  20% { transform: translate(-2px, 2px); filter: hue-rotate(90deg); }
  40% { transform: translate(2px, -1px); filter: hue-rotate(180deg); }
  60% { transform: translate(-1px, -2px); filter: hue-rotate(270deg); }
  80% { transform: translate(1px, 1px); filter: hue-rotate(360deg); }
  100% { transform: translate(0); filter: none; }
}

.glitch-active {
  animation: glitch 0.15s ease-in-out;
}

/* Floating ambient particles (CSS only, for decoration) */
.ambient-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.ambient-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: rgba(0, 240, 255, 0.3);
  animation: ambientFloat linear infinite;
}

@keyframes ambientFloat {
  0% {
    transform: translateY(100vh) translateX(0);
    opacity: 0;
  }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% {
    transform: translateY(-20px) translateX(50px);
    opacity: 0;
  }
}

/* Generate multiple particles with different positions/speeds */
.ambient-particle:nth-child(1) { left: 10%; animation-duration: 15s; animation-delay: 0s; }
.ambient-particle:nth-child(2) { left: 25%; animation-duration: 12s; animation-delay: 2s; width: 2px; height: 2px; }
.ambient-particle:nth-child(3) { left: 40%; animation-duration: 18s; animation-delay: 4s; }
.ambient-particle:nth-child(4) { left: 55%; animation-duration: 14s; animation-delay: 1s; width: 4px; height: 4px; background: rgba(168, 85, 247, 0.2); }
.ambient-particle:nth-child(5) { left: 70%; animation-duration: 16s; animation-delay: 3s; }
.ambient-particle:nth-child(6) { left: 85%; animation-duration: 13s; animation-delay: 5s; width: 2px; height: 2px; }
.ambient-particle:nth-child(7) { left: 15%; animation-duration: 20s; animation-delay: 7s; background: rgba(255, 62, 62, 0.15); }
.ambient-particle:nth-child(8) { left: 60%; animation-duration: 17s; animation-delay: 6s; }
.ambient-particle:nth-child(9) { left: 35%; animation-duration: 11s; animation-delay: 8s; width: 2px; height: 2px; }
.ambient-particle:nth-child(10) { left: 90%; animation-duration: 19s; animation-delay: 2s; }

/* Loading screen */
.loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loader.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.loader__text {
  font-family: var(--font-pixel);
  font-size: 1rem;
  color: var(--neon-cyan);
  text-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
}

.loader__bar {
  width: 200px;
  height: 4px;
  background: var(--bg-card);
  border-radius: 2px;
  overflow: hidden;
}

.loader__progress {
  height: 100%;
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-blue));
  border-radius: 2px;
  animation: loadProgress 1.5s ease-in-out forwards;
}

@keyframes loadProgress {
  0% { width: 0%; }
  100% { width: 100%; }
}

/* Reduced motion overrides */
@media (prefers-reduced-motion: reduce) {
  .scroll-car,
  .custom-cursor,
  .ambient-particles,
  .crt-overlay {
    display: none !important;
  }
}