/* Effect: aftelklok met flip (flipklok) — v0.1.0
   Vier cellen (dagen, uren, minuten, seconden); elk cijfer dat wijzigt klapt kort om
   (Web Animations API in flipklok.js). Tabelcijfers: de breedte verspringt nooit.
   Kost: laag (één korte animatie per seconde). */
.flipklok { display: flex; flex-wrap: wrap; gap: 10px; perspective: 400px; }
.flip-cel { display: grid; justify-items: center; gap: 6px; min-width: 64px; }
.flip-getal {
  display: block; min-width: 64px; padding: 10px 8px 8px; border-radius: 12px; text-align: center;
  font: 700 34px/1 var(--sans, sans-serif); font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
  color: var(--groen, #39ff90); text-shadow: 0 0 16px rgba(57, 255, 144, 0.35);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
  border: 1px solid rgba(57, 255, 144, 0.18);
  transform-origin: 50% 50%; backface-visibility: hidden;
}
.flip-naam { font: 600 10px/1 var(--mono, monospace); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted, #a9a2ba); }
@media (max-width: 379px) { .flipklok { gap: 8px; } .flip-cel, .flip-getal { min-width: 58px; } .flip-getal { font-size: 30px; } }