/* ============================================================
   NEUTRINO OBSERVATORY — CURSOR & PARTICLE EFFECTS
   ============================================================ */

/* ===== CUSTOM CURSOR ===== */
#cursor-dot {
  position: fixed;
  width: 7px; height: 7px;
  background: var(--plasma);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  box-shadow: var(--glow-plasma);
  transition: transform 0.1s ease, background 0.3s ease;
  mix-blend-mode: screen;
}
#cursor-ring {
  position: fixed;
  width: 36px; height: 36px;
  border: 1px solid rgba(0, 212, 255, 0.45);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99997;
  transform: translate(-50%, -50%);
  transition: width 0.3s var(--ease-spring),
              height 0.3s var(--ease-spring),
              border-color 0.3s ease,
              opacity 0.3s ease;
}
#cursor-ring.hovering {
  width: 56px; height: 56px;
  border-color: var(--plasma);
  box-shadow: var(--glow-plasma);
}
#cursor-ring.clicking {
  width: 24px; height: 24px;
  border-color: var(--solar);
}

/* Crosshair lines from cursor */
#cursor-cross-h,
#cursor-cross-v {
  position: fixed;
  pointer-events: none;
  z-index: 99996;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#cursor-cross-h {
  height: 1px;
  width: 60px;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,0.3), transparent);
  transform: translate(-50%, -50%);
}
#cursor-cross-v {
  width: 1px;
  height: 60px;
  background: linear-gradient(180deg, transparent, rgba(0,212,255,0.3), transparent);
  transform: translate(-50%, -50%);
}
body:hover #cursor-cross-h,
body:hover #cursor-cross-v { opacity: 1; }

/* Trail particles */
.trail {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99994;
  transform: translate(-50%, -50%);
  animation: trailFade 0.9s ease-out forwards;
}
@keyframes trailFade {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.1); }
}

/* Click burst */
.click-burst {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99993;
  transform: translate(-50%, -50%);
  border: 1px solid;
  animation: burstOut 0.5s ease-out forwards;
}
@keyframes burstOut {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}

/* ===== FLOATING AMBIENT PARTICLES ===== */
.ambient-particle {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  animation: ambientFloat linear infinite;
}
@keyframes ambientFloat {
  0%   { transform: translateY(110vh) translateX(0px); opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 0.6; }
  100% { transform: translateY(-5vh) translateX(var(--x-drift)); opacity: 0; }
}

/* ===== NEUTRINO STREAKS ===== */
.neutrino-streak {
  position: fixed;
  height: 1px;
  pointer-events: none;
  z-index: 0;
  animation: streakTraverse linear forwards;
  opacity: 0;
}
@keyframes streakTraverse {
  0%   { transform: translateX(-120vw); opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 0.5; }
  100% { transform: translateX(220vw); opacity: 0; }
}

/* ===== STAR TWINKLE ===== */
@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.4); }
}

/* ===== NEBULA PULSE ===== */
@keyframes nebulaPulse {
  0%   { opacity: 0.5; transform: scale(1) rotate(0deg); }
  50%  { opacity: 0.8; transform: scale(1.06) rotate(0.5deg); }
  100% { opacity: 0.5; transform: scale(1) rotate(0deg); }
}

/* ===== DRONE PARALLAX ===== */
.drone-layer {
  transition: transform 0.1s ease-out;
  will-change: transform;
}

/* ===== ENERGY RING ANIMATION (hero) ===== */
.energy-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid;
  animation: ringExpand linear infinite;
  pointer-events: none;
}
@keyframes ringExpand {
  0%   { transform: translate(-50%, -50%) scale(0.8); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}

/* ===== GRID LINES (hero decoration) ===== */
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,212,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,0.025) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
}

/* ===== SHOOTING STARS ===== */
.shooting-star {
  position: fixed;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent);
  pointer-events: none;
  z-index: 0;
  animation: shoot linear forwards;
}
@keyframes shoot {
  from { transform: translateX(0) translateY(0); opacity: 1; }
  to   { transform: translateX(300px) translateY(120px); opacity: 0; }
}