/* D&D Tech — gedeelde effecten (hoort bij assets/js/fx.js).
   - .reveal / [data-stagger]  : verschijn-animatie (basis-stijl staat in base.css; hier alleen de stagger-hulp)
   - .card cursor-gloed        : fx.js zet --mx/--my op de kaart; alleen op hover-apparaten
   - [data-count]              : tel-animatie (geen CSS nodig, alleen tabular cijfers)
   - .brand                    : logo-gloed bij hover
   - .scanline / .glow-orb     : decoratieve sfeerelementen voor hero's */

/* Stagger: fx.js geeft kinderen van [data-stagger] een oplopende transition-delay. Tot die tijd blijven ze onzichtbaar via .reveal. */
[data-stagger] > * { min-width: 0; }

/* Cursor-gloed op kaarten */
.card { isolation: isolate; }
.card::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(0,224,255,.14), rgba(123,92,255,.06) 40%, transparent 70%);
  opacity: 0; transition: opacity .4s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover::before { opacity: 1; }
}

/* Tel-animatie: cijfers mogen niet "springen" in breedte */
[data-count] { font-variant-numeric: tabular-nums; }

/* Logo: zachte gloed bij hover (lens) */
.brand img, .brand svg { transition: filter .3s var(--ease), transform .3s var(--ease); }
.brand:hover img, .brand:hover svg { filter: drop-shadow(0 0 10px rgba(0,224,255,.45)); }

/* Sfeer: lichtbol en scanlijn (optioneel te gebruiken in hero's; parent heeft position:relative en overflow:hidden) */
.glow-orb {
  position: absolute; border-radius: 50%; pointer-events: none; filter: blur(40px);
  width: 520px; height: 520px; max-width: 120vw;
  background: radial-gradient(circle, rgba(0,224,255,.22), transparent 60%);
  animation: orb-drift 14s ease-in-out infinite alternate;
}
.glow-orb--violet { background: radial-gradient(circle, rgba(123,92,255,.26), transparent 60%); animation-duration: 18s; }
@keyframes orb-drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(6%, 8%, 0) scale(1.12); } }

.scanline {
  position: absolute; left: 0; right: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(0,224,255,.55), transparent);
  box-shadow: 0 0 18px rgba(0,224,255,.35);
  animation: scan 7s linear infinite;
}
@keyframes scan { from { top: -2px; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } to { top: 100%; opacity: 0; } }

/* Flikkerende statuspunt-tekst (bijv. "online") */
.blink { animation: blink 1.6s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  .card::before { transition: none; }
  .glow-orb, .scanline, .blink { animation: none; }
  .scanline { display: none; }
}