/* effects — ambient glows, dot grid, scroll-reveal (decorative) */

.bg-dots::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--dot-grid);
  background-size: 22px 22px;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

.glow-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.glow { position: absolute; border-radius: 50%; filter: blur(18px); opacity: 0.55; will-change: transform; }
.glow--a { top: -18rem; left: 10%; width: 40rem; height: 40rem;
  background: radial-gradient(circle, rgba(13,27,255,0.32) 0%, rgba(13,27,255,0.06) 46%, transparent 70%);
  animation: drift-a 22s var(--ease) infinite alternate; }
.glow--b { top: -12rem; right: 8%; width: 32rem; height: 32rem;
  background: radial-gradient(circle, rgba(72,145,249,0.24) 0%, rgba(72,145,249,0.06) 50%, transparent 72%);
  animation: drift-b 26s var(--ease) infinite alternate; }
.glow--c { top: 8%; left: 34%; width: 26rem; height: 26rem;
  background: radial-gradient(circle, rgba(0,224,199,0.15) 0%, rgba(0,224,199,0.04) 52%, transparent 74%);
  animation: drift-c 30s var(--ease) infinite alternate; }

[data-theme="light"] .glow { opacity: 0.5; }

@keyframes drift-a { from { transform: translate(0,0) scale(1); } to { transform: translate(4rem, 3rem) scale(1.1); } }
@keyframes drift-b { from { transform: translate(0,0) scale(1); } to { transform: translate(-3rem, 2rem) scale(1.08); } }
@keyframes drift-c { from { transform: translate(0,0) scale(1); } to { transform: translate(2rem, -3rem) scale(1.12); } }

.above { position: relative; z-index: 1; }

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }
.reveal[data-delay="4"] { transition-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  .glow { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}