/* ══ Trap-animatie ═══════════════════════════════════════════════════
   Een pistache bal stuitert vier aubergine treden af en verdwijnt in het
   gat. Het component komt uit reference/trap-animatie/; hier staan alleen
   de kleuren en maten, afgestemd op tokens.css.

   Valt terug op een stilstaand beeld zonder WebGL, en start stil bij
   prefers-reduced-motion — de bezoeker kan het dan zelf afspelen. */

.bg-steps {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 1.3;          /* hoort bij de camera-instelling, niet wijzigen */
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--bg);
}
/* de pistache ovaal is CSS, geen achtergrond in een afbeelding */
.bg-steps::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 8% 5% 11% 20%;
  border-radius: 49% 51% 45% 55% / 48% 46% 54% 52%;
  background: var(--pistache);
  transform: rotate(-13deg);
}
.bg-steps canvas { display: block; width: 100%; height: 100%; }

/* Geen pauzeknop (bewuste keuze van Brandigator). De animatie pauzeert
   zelf buiten beeld en in een verborgen tabblad, en staat stil bij
   prefers-reduced-motion. */

/* geen WebGL: dan het stilstaande beeld */
.bg-steps__fallback { display: none; }
.bg-steps--fallback .bg-steps__fallback { display: block; width: 100%; height: 100%; object-fit: contain; }