/* ─── REVEAL ────────────────────────────────────────── */
.reveal {
  opacity: 1;
  transform: none;
  transition:
    opacity 1s ease,
    transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal.pre {
  opacity: 0;
  transform: translateY(24px);
}
.reveal.d1 {
  transition-delay: 0.08s;
}
.reveal.d2 {
  transition-delay: 0.16s;
}
.reveal.d3 {
  transition-delay: 0.24s;
}
.reveal.d4 {
  transition-delay: 0.32s;
}

/* ─── PARTICLES ─────────────────────────────────────── */
.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold-hi);
  box-shadow: 0 0 8px 2px var(--gold-hi);
  opacity: 0;
  animation: drift 14s linear infinite;
}

/* ─── KEYFRAMES ─────────────────────────────────────── */
@keyframes scrollDot {
  0% {
    top: -20px;
  }
  60% {
    top: 100%;
  }
  100% {
    top: 100%;
  }
}

@keyframes drift {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  10% {
    opacity: 0.7;
  }
  90% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
    transform: translate(40px, -80px);
  }
}

@keyframes orbitFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes dotGlow {
  0%,
  100% {
    box-shadow: 0 0 3px 1px currentColor;
    opacity: 0.75;
  }
  50% {
    box-shadow: 0 0 9px 3px currentColor;
    opacity: 1;
  }
}

@keyframes haloBreath {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(var(--halo-rgb), 0.08),
      0 0 24px rgba(var(--halo-rgb), 0.12),
      0 0 64px rgba(var(--halo-rgb), 0.07),
      0 0 120px rgba(var(--halo-rgb), 0.03);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(var(--halo-rgb), 0.18),
      0 0 36px rgba(var(--halo-rgb), 0.26),
      0 0 92px rgba(var(--halo-rgb), 0.12),
      0 0 160px rgba(var(--halo-rgb), 0.05);
  }
}