/* ============================================================
   PARTICLES.CSS — Bubble Container & CSS Particle Styling
   ============================================================ */

/* ── Bubbles Container ── */
.bubbles-container {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  overflow: hidden;
}

/* ── Individual Bubble Element (created by JS) ── */
.aero-bubble {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: drop-shadow(0 0 8px var(--glow-cyan)) drop-shadow(0 0 16px var(--glow-blue));
}

.aero-bubble::before {
  content: '';
  position: absolute;
  top: 18%; left: 22%;
  width: 30%;
  height: 25%;
  border-radius: 50%;
  background: rgba(255,255,255,0.7);
  transform: rotate(-30deg);
}

.aero-bubble::after {
  content: '';
  position: absolute;
  bottom: 12%; right: 15%;
  width: 12%;
  height: 12%;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
}

/* ── Ripple Element ── */
.ripple-container {
  position: fixed;
  inset: 0;
  z-index: 10001;
  pointer-events: none;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.5);
  background: var(--grad-rainbow);
  background-size: 400% 400%;
  animation: ripple-expand 1s ease-out forwards;
  filter: drop-shadow(0 0 10px var(--glow-cyan)) drop-shadow(0 0 30px var(--glow-purple));
}

@keyframes ripple-expand {
  0%   { width: 0; height: 0; opacity: 0.8; }
  100% { width: 500px; height: 500px; opacity: 0; transform: translate(-250px, -250px); }
}

/* ── Sparkle Trail (cursor trail segments) ── */
.sparkle-segment {
  position: fixed;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  background: var(--grad-rainbow);
  animation: sparkle-fade 1.2s ease-out forwards;
  filter: drop-shadow(0 0 6px var(--glow-pink)) drop-shadow(0 0 12px var(--glow-purple));
}

@keyframes sparkle-fade {
  0%   { opacity: 1; transform: scale(1.5); }
  100% { opacity: 0; transform: scale(0); }
}

/* ── Particle Burst Effect ── */
.particle-burst {
  position: fixed;
  pointer-events: none;
  z-index: 10002;
  animation: burst-explode 0.8s ease-out forwards;
}

.particle-burst-segment {
  position: absolute;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  background: var(--grad-electric);
  background-size: 200% 200%;
  filter: drop-shadow(0 0 6px var(--glow-orange)) drop-shadow(0 0 12px var(--glow-pink));
  animation: burst-fly 0.8s ease-out forwards;
}

@keyframes burst-explode {
  0%   { opacity: 0; transform: scale(0); }
  20%  { opacity: 1; transform: scale(1.5); }
  100% { opacity: 0; transform: scale(0); }
}

@keyframes burst-fly {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx, 60px), var(--dy, -60px)) scale(0.3); }
}

/* ── Noise Canvas Layer ── */
.canvas-noise { z-index: 3; opacity: 0.04; mix-blend-mode: overlay; }

/* ── Matrix Canvas Layer ── */
.canvas-matrix { z-index: 2; opacity: 0.15; }

/* ── Lens Flare Container ── */
.lens-flare-container {
  position: fixed;
  inset: 0;
  z-index: 9994;
  pointer-events: none;
}

/* ── Chromatic Aberration ── */
.chromatic-aberration {
  text-shadow:
    -2px 0 1px rgba(255,0,0,0.5),
    2px 0 1px rgba(0,255,255,0.5),
    0 -2px 1px rgba(0,0,255,0.5),
    0 0 20px rgba(255,255,255,0.3);
}

/* ── Strobe Flash ── */
@keyframes strobe-flash {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

.strobe {
  animation: strobe-flash 0.3s linear infinite;
}

/* ── Glitch Text ── */
@keyframes glitch-text {
  0%, 100% { transform: translate(0); }
  20%  { transform: translate(-3px, 2px); }
  40%  { transform: translate(3px, -2px); }
  60%  { transform: translate(-2px, -1px); }
  80%  { transform: translate(2px, 1px); }
}

.glitch-text {
  animation: glitch-text 0.3s linear infinite;
}