/* ============================================================
   particles.css — Canvas Layer Styles & Hologram Grid
   Digital Ceremony Launcher
   ============================================================ */

/* ── Canvas Base Layers ─────────────────────────────────────── */

canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── Hologram Grid Overlay (CSS background layer) ───────────── */

.hologram-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.5s ease;
  background-image:
    linear-gradient(rgba(0, 255, 220, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 220, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(123, 47, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(123, 47, 255, 0.03) 1px, transparent 1px);
  background-size: 60px 60px, 60px 60px, 20px 20px, 20px 20px;
  animation: gridScroll 3s linear infinite;
}

[data-state="scanning"] .hologram-grid,
[data-state="touch_detecting"] .hologram-grid {
  opacity: 1;
}

@keyframes gridScroll {
  0%   { background-position: 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 0 60px, 0 0, 0 20px, 0 0; }
}

/* ── Scan Ring Glow (augments canvas particles.js) ──────────── */

.scan-target-marker {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid var(--theme-color);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: markerPulse 0.6s ease-in-out infinite alternate;
}

.scan-target-marker::before,
.scan-target-marker::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(0, 255, 220, 0.4);
}

.scan-target-marker::before {
  width: 90px; height: 90px;
  animation: markerRing 1s ease-out infinite;
}

.scan-target-marker::after {
  width: 120px; height: 120px;
  animation: markerRing 1s ease-out 0.3s infinite;
}

@keyframes markerPulse {
  0%   { box-shadow: 0 0 10px var(--theme-color); border-color: var(--theme-color); }
  100% { box-shadow: 0 0 25px var(--theme-color), 0 0 50px rgba(0,255,220,0.3); }
}

@keyframes markerRing {
  0%   { opacity: 0.8; transform: translate(-50%, -50%) scale(0.5); }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(1.8); }
}

/* ── Scanning Phase Vignette ────────────────────────────────── */

[data-state="scanning"]::after {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center,
    transparent 30%,
    rgba(0, 0, 20, 0.6) 100%);
  pointer-events: none;
  z-index: 7;
  animation: vignetteIn 0.3s ease forwards;
}

@keyframes vignetteIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Particle Ambient (idle background dots) ─────────────────── */

.ambient-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: floatParticle linear infinite;
  opacity: 0;
}

@keyframes floatParticle {
  0%   { transform: translateY(100vh) scale(0); opacity: 0; }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.3; }
  100% { transform: translateY(-20px) scale(1.2); opacity: 0; }
}

/* ── Glow Lines (decorative scan lines during scanning) ─────── */

.scan-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    rgba(0, 255, 220, 0.6),
    rgba(0, 255, 220, 0.8),
    rgba(0, 255, 220, 0.6),
    transparent);
  pointer-events: none;
  z-index: 9;
  opacity: 0;
  box-shadow: 0 0 10px rgba(0, 255, 220, 0.4);
}

[data-state="scanning"] .scan-line {
  animation: scanLineAnim 1.5s ease-in-out infinite;
}

@keyframes scanLineAnim {
  0%   { top: -2px; opacity: 0; }
  5%   { opacity: 0.8; }
  95%  { opacity: 0.3; }
  100% { top: 100%; opacity: 0; }
}

/* ── Celebration Canvas Position ────────────────────────────── */

#canvas-confetti {
  mix-blend-mode: normal;
}

#canvas-fireworks {
  mix-blend-mode: screen;
}