/* ===== FLOATING ENOCHIAN GLYPH PARTICLES ===== */

#enochian-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.enochian-particle {
  position: absolute;
  bottom: -40px;
  color: var(--color-gold);
  opacity: 0;
  will-change: transform, opacity;
  animation: floatUp var(--duration, 12s) var(--delay, 0s) linear infinite;
  filter: drop-shadow(0 0 4px rgba(254, 231, 67, 0.3));
}

@keyframes floatUp {
  0% {
    transform: translateX(0) translateY(0) rotate(0deg) scale(var(--scale, 0.6));
    opacity: 0;
  }
  10% {
    opacity: var(--max-opacity, 0.25);
  }
  50% {
    transform:
      translateX(calc(var(--drift, 30px)))
      translateY(calc(-50vh))
      rotate(calc(var(--spin, 45deg)))
      scale(var(--scale, 0.6));
    opacity: var(--max-opacity, 0.25);
  }
  90% {
    opacity: var(--max-opacity, 0.25);
  }
  100% {
    transform:
      translateX(calc(var(--drift, 30px) * 1.5))
      translateY(calc(-110vh))
      rotate(calc(var(--spin, 45deg) * 2))
      scale(var(--scale, 0.6));
    opacity: 0;
  }
}

/* Burst particles (page turn / seal break) */
.enochian-burst {
  position: absolute;
  color: var(--color-accent);
  opacity: 0;
  will-change: transform, opacity;
  animation: burstOut 1.2s ease-out forwards;
  filter: drop-shadow(0 0 8px rgba(254, 231, 67, 0.6));
}

@keyframes burstOut {
  0% {
    transform: translate(0, 0) scale(0.3) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform:
      translate(var(--bx, 50px), var(--by, -50px))
      scale(1.2)
      rotate(var(--br, 120deg));
    opacity: 0;
  }
}