/* ============================================================
   PARTYPUNT DESIGN TOKENS
   Merk: energiek en strak. Nacht als basis, neon als accent,
   veel wit in de content. De punt is overal: bullet, pin, confetti.
   Font: Nunito (Google Fonts, laden in de pagina zelf).
   ============================================================ */

:root {

  /* ---------- Kleur: basis (feest = avond) ---------- */
  --pp-nacht:        #171040;   /* diep nachtblauw/paars, primaire donkere basis */
  --pp-nacht-diep:   #0d0930;   /* nog dieper, voor footers en hero-verloop */
  --pp-paars:        #33206e;   /* warm paars, tweede laag in verlopen */
  --pp-paars-licht:  #4d35a0;   /* accentpaars voor borders/hover op donker */

  /* ---------- Kleur: neon-accenten ---------- */
  --pp-roze:         #ff3d8f;   /* neon-roze, primaire actie-kleur */
  --pp-roze-diep:    #e02277;   /* hover/active van roze */
  --pp-roze-gloed:   rgba(255, 61, 143, 0.35);
  --pp-geel:         #ffd93b;   /* neon-geel, tweede accent en highlights */
  --pp-geel-diep:    #f5c400;
  --pp-groen:        #2fd67b;   /* alleen voor "beschikbaar" en succes */

  /* ---------- Kleur: content op wit ---------- */
  --pp-wit:          #ffffff;
  --pp-creme:        #f7f6fc;   /* zachte sectie-achtergrond */
  --pp-inkt:         #1d1836;   /* bodytekst op wit */
  --pp-grijs:        #5f5a78;   /* secundaire tekst */
  --pp-lijn:         #e9e6f4;   /* hairlines, card-borders */

  /* ---------- Kleur: tekst op donker ---------- */
  --pp-wit-zacht:    rgba(255, 255, 255, 0.82);
  --pp-wit-dim:      rgba(255, 255, 255, 0.6);

  /* ---------- Verlopen ---------- */
  --pp-gradient-nacht:  linear-gradient(160deg, var(--pp-nacht) 0%, var(--pp-paars) 55%, #1c1250 100%);
  --pp-gradient-neon:   linear-gradient(120deg, var(--pp-roze) 0%, #ff7ab5 100%);
  --pp-gradient-geel:   linear-gradient(120deg, var(--pp-geel) 0%, #ffe98a 100%);
  /* Feestelijk regenboog-verloop voor koppen en accenten (roze -> geel) */
  --pp-gradient-feest:  linear-gradient(100deg, var(--pp-roze) 0%, #ff6fae 30%, var(--pp-geel) 100%);
  --pp-gradient-punt:   linear-gradient(180deg, var(--pp-roze) 0%, var(--pp-roze-diep) 100%);

  /* ---------- Typografie ---------- */
  --pp-font: "Nunito", "Segoe UI", system-ui, sans-serif;

  --pp-tekst-xs:   0.8rem;                          /* labels, chips */
  --pp-tekst-s:    0.9rem;                          /* bijschriften */
  --pp-tekst-m:    1rem;                            /* body */
  --pp-tekst-l:    clamp(1.1rem, 1.5vw, 1.25rem);   /* intro's */
  --pp-kop-s:      clamp(1.15rem, 2vw, 1.4rem);     /* kaart-koppen */
  --pp-kop-m:      clamp(1.6rem, 3vw, 2.2rem);      /* sectie-koppen */
  --pp-kop-l:      clamp(2.2rem, 5vw, 3.6rem);      /* hero */

  --pp-lijnhoogte-body: 1.6;
  --pp-lijnhoogte-kop:  1.12;
  --pp-gewicht-body:    500;
  --pp-gewicht-vet:     800;
  --pp-gewicht-zwart:   900;

  /* ---------- Spacing (8pt-basis) ---------- */
  --pp-ruimte-1: 0.25rem;
  --pp-ruimte-2: 0.5rem;
  --pp-ruimte-3: 0.75rem;
  --pp-ruimte-4: 1rem;
  --pp-ruimte-5: 1.5rem;
  --pp-ruimte-6: 2rem;
  --pp-ruimte-7: 3rem;
  --pp-ruimte-8: 4.5rem;
  --pp-sectie:   clamp(3.5rem, 8vw, 6.5rem);   /* verticale sectie-padding */

  /* ---------- Vormen: vet afgerond ---------- */
  --pp-radius-s:    12px;
  --pp-radius-m:    20px;
  --pp-radius-l:    28px;
  --pp-radius-pill: 999px;

  /* ---------- Schaduwen ---------- */
  --pp-schaduw-s:    0 2px 10px rgba(23, 16, 64, 0.08);
  --pp-schaduw-m:    0 10px 30px rgba(23, 16, 64, 0.12);
  --pp-schaduw-l:    0 24px 60px rgba(23, 16, 64, 0.18);
  --pp-schaduw-roze: 0 8px 28px var(--pp-roze-gloed);
  /* Neon-gloed: dubbele laag voor diepte + kleurgloed op donkere secties */
  --pp-gloed-roze:   0 10px 30px rgba(23, 16, 64, 0.14), 0 0 0 1px rgba(255, 61, 143, 0.08), 0 12px 40px rgba(255, 61, 143, 0.22);
  --pp-gloed-geel:   0 10px 30px rgba(23, 16, 64, 0.14), 0 12px 40px rgba(255, 217, 59, 0.28);

  /* ---------- Beweging ---------- */
  --pp-vlot:   180ms cubic-bezier(0.4, 0, 0.2, 1);
  --pp-zwier:  320ms cubic-bezier(0.34, 1.56, 0.64, 1);  /* kleine overshoot, feestelijk */
  --pp-traag:  600ms cubic-bezier(0.16, 1, 0.3, 1);      /* rustige reveal-curve, cinematic */

  /* ---------- Layout ---------- */
  --pp-container: 1160px;
  --pp-container-smal: 820px;

  /* ============================================================
     WAUW-LAAG (toegevoegd v2 — alleen aanvullend, niets vervangen)
     Rijkere display-schaal, neon-gloed, sfeer-gradients, beweging.
     ============================================================ */

  /* ---------- Display-schaal: groter, cinematic, voor hero's ---------- */
  --pp-display-xl: clamp(2rem, 8vw, 5.5rem);     /* mega hero-kop (mobiel-veilige ondergrens) */
  --pp-display-l:  clamp(1.9rem, 6vw, 4.4rem);   /* grote hero-kop */
  --pp-display-m:  clamp(2rem, 4.5vw, 3.2rem);   /* zware sectie-opener */
  --pp-kop-xl:     clamp(2.6rem, 6vw, 4rem);     /* extra-grote sectie-kop */
  --pp-tekst-xl:   clamp(1.25rem, 2vw, 1.5rem);  /* dikke lead-intro onder een hero */
  --pp-letter-strak: -0.02em;                    /* strakke tracking voor grote koppen */
  --pp-letter-mega:  -0.03em;                    /* nog strakker voor display-XL */

  /* ---------- Premium schaduw + neon-gloed ---------- */
  --pp-schaduw-xl:    0 40px 90px rgba(13, 9, 48, 0.28);            /* zwevende hero-kaart */
  --pp-gloed-roze-l:  0 20px 60px rgba(255, 61, 143, 0.35), 0 0 0 1px rgba(255, 61, 143, 0.10);
  --pp-gloed-geel-l:  0 20px 60px rgba(255, 217, 59, 0.38), 0 0 0 1px rgba(255, 217, 59, 0.12);
  --pp-gloed-tekst-roze: 0 0 22px rgba(255, 61, 143, 0.55);        /* neon-halo achter tekst */
  --pp-gloed-tekst-geel: 0 0 22px rgba(255, 217, 59, 0.55);
  --pp-ring-roze:     0 0 0 4px rgba(255, 61, 143, 0.16);          /* focus/accent-ring */

  /* ---------- Extra radius ---------- */
  --pp-radius-xl:  40px;   /* grote hero-panelen en showcase-kaarten */

  /* ---------- Sfeer-gradients (aanvullend op de bestaande) ---------- */
  /* Diepe nacht met paarse gloed, voor grote donkere secties/hero-achtergrond */
  --pp-gradient-diep:   radial-gradient(120% 120% at 20% 0%, #2a1a63 0%, var(--pp-nacht) 42%, var(--pp-nacht-diep) 100%);
  /* Aurora: zachte roze/gele/paarse gloed-vegen over de nacht, cinematic */
  --pp-gradient-aurora: radial-gradient(90% 70% at 12% 8%, rgba(255, 61, 143, 0.32) 0%, transparent 55%),
                        radial-gradient(80% 60% at 88% 18%, rgba(255, 217, 59, 0.22) 0%, transparent 55%),
                        radial-gradient(90% 90% at 60% 100%, rgba(77, 53, 160, 0.45) 0%, transparent 60%),
                        var(--pp-nacht);
  /* Feest-vegen op wit: heel zachte roze/gele hint als sectie-achtergrond */
  --pp-gradient-sluier: radial-gradient(60% 50% at 90% 0%, rgba(255, 61, 143, 0.06) 0%, transparent 60%),
                        radial-gradient(50% 50% at 0% 100%, rgba(255, 217, 59, 0.07) 0%, transparent 60%),
                        var(--pp-wit);
  /* Bewegende regenboog-veeg: brede versie van feest, voor de ademende utility */
  --pp-gradient-beweeg: linear-gradient(100deg, var(--pp-roze) 0%, #ff6fae 22%, var(--pp-geel) 48%, #ff6fae 74%, var(--pp-roze) 100%);
}

/* ============================================================
   BASIS-RESET + BODY
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--pp-font);
  font-size: var(--pp-tekst-m);
  font-weight: var(--pp-gewicht-body);
  line-height: var(--pp-lijnhoogte-body);
  color: var(--pp-inkt);
  background: var(--pp-wit);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  line-height: var(--pp-lijnhoogte-kop);
  font-weight: var(--pp-gewicht-zwart);
  margin: 0 0 var(--pp-ruimte-4);
  letter-spacing: -0.01em;
}

p { margin: 0 0 var(--pp-ruimte-4); }
img { max-width: 100%; display: block; }
a { color: var(--pp-roze-diep); }

.pp-container {
  max-width: var(--pp-container);
  margin: 0 auto;
  padding: 0 clamp(1.1rem, 4vw, 2rem);
}

/* ============================================================
   HET PUNT-MOTIEF
   De punt als bullet, als kop-afsluiter, als confetti.
   ============================================================ */

/* Kop die eindigt op een neon-roze punt: <h2 class="pp-punt-kop">Tekst</h2>
   De punt is nu een tikje groter en gloeit mee, als merk-signatuur. */
.pp-punt-kop::after {
  content: ".";
  color: var(--pp-roze);
  text-shadow: 0 0 18px var(--pp-roze-gloed);
}

/* Eyebrow: klein label boven een sectie-kop. Zet de sectie meteen in het
   merk, met een punt ervoor. <span class="pp-eyebrow">Ons vlaggenschip</span> */
.pp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--pp-tekst-xs);
  font-weight: var(--pp-gewicht-zwart);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--pp-roze-diep);
  margin-bottom: var(--pp-ruimte-3);
}
.pp-eyebrow::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--pp-gradient-punt);
  box-shadow: 0 0 12px var(--pp-roze-gloed);
}
.pp-eyebrow--op-donker { color: var(--pp-geel); }
.pp-eyebrow--op-donker::before { background: var(--pp-geel); box-shadow: 0 0 12px rgba(255,217,59,0.5); }

/* Losse punt als grafisch element */
.pp-dot {
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--pp-roze);
  vertical-align: baseline;
}
.pp-dot--geel  { background: var(--pp-geel); }
.pp-dot--groen { background: var(--pp-groen); }

/* Punt-bullets in lijsten: <ul class="pp-puntlijst"> */
.pp-puntlijst {
  list-style: none;
  margin: 0 0 var(--pp-ruimte-4);
  padding: 0;
}
.pp-puntlijst li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: var(--pp-ruimte-2);
}
.pp-puntlijst li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--pp-gradient-punt);
  box-shadow: 0 0 0 3px rgba(255, 61, 143, 0.12);
}
.pp-puntlijst--geel li::before { background: var(--pp-geel); box-shadow: 0 0 0 3px rgba(255, 217, 59, 0.18); }

/* ============================================================
   KNOPPEN
   Pill-vorm, dik, met feestelijke hover.
   ============================================================ */
.pp-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.9rem;
  border-radius: var(--pp-radius-pill);
  font-family: var(--pp-font);
  font-size: var(--pp-tekst-m);
  font-weight: var(--pp-gewicht-vet);
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: transform var(--pp-zwier), box-shadow var(--pp-vlot), background var(--pp-vlot);
  will-change: transform;
}
.pp-btn:hover  { transform: translateY(-2px) scale(1.02); }
.pp-btn:active { transform: translateY(0) scale(0.99); }
.pp-btn > * { position: relative; z-index: 1; }
/* Glans-veeg die bij hover over de vollere knoppen glijdt */
.pp-btn--primair::after, .pp-btn--geel::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-18deg);
  transition: left 620ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  pointer-events: none;
}
.pp-btn--primair:hover::after, .pp-btn--geel:hover::after { left: 130%; }

/* Primair: neon-roze met gloed */
.pp-btn--primair {
  background: var(--pp-roze);
  color: var(--pp-wit);
  box-shadow: var(--pp-schaduw-roze);
}
.pp-btn--primair:hover { background: var(--pp-roze-diep); box-shadow: 0 12px 36px var(--pp-roze-gloed); }

/* Secundair: geel, voor tweede acties op donker */
.pp-btn--geel {
  background: var(--pp-geel);
  color: var(--pp-nacht);
  box-shadow: 0 8px 28px rgba(255, 217, 59, 0.3);
}
.pp-btn--geel:hover { background: var(--pp-geel-diep); box-shadow: 0 12px 36px rgba(255, 217, 59, 0.42); }

/* Ghost op donker */
.pp-btn--ghost {
  background: transparent;
  color: var(--pp-wit);
  border: 2px solid rgba(255, 255, 255, 0.35);
}
.pp-btn--ghost:hover { border-color: var(--pp-wit); background: rgba(255,255,255,0.06); }

/* Ghost op wit */
.pp-btn--lijn {
  background: var(--pp-wit);
  color: var(--pp-nacht);
  border: 2px solid var(--pp-lijn);
}
.pp-btn--lijn:hover { border-color: var(--pp-roze); color: var(--pp-roze-diep); }

.pp-btn--groot { padding: 1.15rem 2.4rem; font-size: 1.1rem; }
.pp-btn--breed { width: 100%; }

/* ============================================================
   CHIPS EN LABELS
   ============================================================ */
.pp-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.9rem;
  border-radius: var(--pp-radius-pill);
  font-size: var(--pp-tekst-xs);
  font-weight: var(--pp-gewicht-vet);
  background: var(--pp-creme);
  color: var(--pp-inkt);
  border: 1px solid var(--pp-lijn);
}
.pp-chip--donker { background: rgba(255,255,255,0.1); color: var(--pp-wit); border-color: rgba(255,255,255,0.18); }
.pp-chip--geel   { background: var(--pp-geel); color: var(--pp-nacht); border-color: var(--pp-geel); }
.pp-chip--groen  { background: rgba(47, 214, 123, 0.14); color: #157a45; border-color: rgba(47, 214, 123, 0.4); }

/* ============================================================
   BEELD-PLACEHOLDERS
   Elk beeld-slot: <div class="pp-beeld" data-beeld="hero-ibiza"></div>
   Het label komt automatisch uit data-beeld, zodat Higgsfield-beeld
   er straks 1-op-1 in geschoven wordt (label verdwijnt met de div).
   ============================================================ */
.pp-beeld {
  position: relative;
  overflow: hidden;
  border-radius: var(--pp-radius-l);
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 61, 143, 0.4) 0 4px, transparent 5px),
    radial-gradient(circle at 72% 14%, rgba(255, 217, 59, 0.45) 0 3px, transparent 4px),
    radial-gradient(circle at 38% 68%, rgba(255, 217, 59, 0.3) 0 3px, transparent 4px),
    radial-gradient(circle at 86% 62%, rgba(255, 61, 143, 0.35) 0 4px, transparent 5px),
    radial-gradient(circle at 55% 38%, rgba(255, 255, 255, 0.18) 0 2px, transparent 3px),
    var(--pp-gradient-nacht);
  min-height: 200px;
}
/* Lege beeld-slots tonen alleen de sfeer-gradient, nooit de interne slotnaam. */
.pp-beeld::after { content: none; }

/* Verhoudingen voor slots */
.pp-beeld--hero    { aspect-ratio: 16 / 9; min-height: 0; width: 100%; }
.pp-beeld--kaart   { aspect-ratio: 4 / 3; min-height: 0; }
.pp-beeld--staand  { aspect-ratio: 3 / 4; min-height: 0; }
.pp-beeld--vierkant{ aspect-ratio: 1 / 1; min-height: 0; }

/* Echte foto in een beeld-slot: <div class="pp-beeld pp-beeld--foto" data-beeld="...">
   <img class="pp-beeld__foto" src="..." alt="..."></div>
   De foto vult het slot volledig; het placeholder-label verdwijnt. */
.pp-beeld__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Iets hoger uitsnijden: bij staande foto's in een liggend slot blijft het onderwerp beter in beeld. */
  object-position: center 38%;
}
.pp-beeld--foto::after { content: none; }

/* ============================================================
   GASTEN-SLIDERS (feestbouwer, thema-wijzer, BBQ- en catering-teller)
   Eigen premium look: dikke track met roze-gele vulling, grote grijpbare knop.
   JS zet --pp-range-pct voor de vulling (zie fill-script in de footer).
   ============================================================ */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2.6rem;
  background: transparent;
  cursor: pointer;
  margin: 0;
}
input[type="range"]:focus-visible { outline: 3px solid var(--pp-roze); outline-offset: 4px; border-radius: 999px; }
/* Track (WebKit): gevulde roze-gele balk tot aan de knop, daarna grijs */
input[type="range"]::-webkit-slider-runnable-track {
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pp-roze) 0%, var(--pp-geel) var(--pp-range-pct, 30%), var(--pp-lijn) var(--pp-range-pct, 30%), var(--pp-lijn) 100%);
}
/* Track (Firefox) */
input[type="range"]::-moz-range-track { height: 12px; border-radius: 999px; background: var(--pp-lijn); }
input[type="range"]::-moz-range-progress { height: 12px; border-radius: 999px; background: linear-gradient(90deg, var(--pp-roze), var(--pp-geel)); }
/* Knop (WebKit) */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
  margin-top: -9px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--pp-roze);
  box-shadow: 0 3px 12px rgba(255, 61, 143, 0.55);
  transition: transform var(--pp-vlot);
}
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.14); }
/* Knop (Firefox) */
input[type="range"]::-moz-range-thumb {
  width: 30px;
  height: 30px;
  border: 4px solid var(--pp-roze);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 12px rgba(255, 61, 143, 0.55);
}

/* ============================================================
   KAARTEN
   ============================================================ */
.pp-kaart {
  background: var(--pp-wit);
  border: 1px solid var(--pp-lijn);
  border-radius: var(--pp-radius-l);
  box-shadow: var(--pp-schaduw-s);
  transition: transform var(--pp-zwier), box-shadow var(--pp-vlot), border-color var(--pp-vlot);
}
.pp-kaart--klik { cursor: pointer; }
.pp-kaart--klik:hover {
  transform: translateY(-6px);
  box-shadow: var(--pp-gloed-roze);
  border-color: rgba(255, 61, 143, 0.45);
}

/* ============================================================
   CONFETTI (subtiel, puur CSS)
   <span class="pp-confetti" style="--x:12%; --y:30%; --d:9s"></span>
   ============================================================ */
@keyframes pp-zweef {
  0%   { transform: translateY(0) scale(1) rotate(0deg); opacity: 0.9; }
  50%  { transform: translateY(-16px) scale(1.18) rotate(160deg); opacity: 1; }
  100% { transform: translateY(0) scale(1) rotate(360deg); opacity: 0.9; }
}
.pp-confetti {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pp-roze);
  box-shadow: 0 0 10px rgba(255, 61, 143, 0.55);
  animation: pp-zweef var(--d, 7s) ease-in-out infinite;
  pointer-events: none;
}
.pp-confetti--geel  { background: var(--pp-geel); width: 7px; height: 7px; box-shadow: 0 0 10px rgba(255, 217, 59, 0.55); }
.pp-confetti--wit   { background: rgba(255,255,255,0.6); width: 5px; height: 5px; box-shadow: 0 0 8px rgba(255,255,255,0.4); }
/* Vormvariatie: een vierkantje en een streepje tussen de rondjes door */
.pp-confetti--vierkant { border-radius: 2px; }
.pp-confetti--reep     { border-radius: 2px; width: 5px; height: 12px; }

@media (prefers-reduced-motion: reduce) {
  .pp-confetti { animation: none; }
  .pp-btn, .pp-kaart { transition: none; }
  .pp-btn--primair::after, .pp-btn--geel::after { display: none; }
}

/* ============================================================
   ============================================================
   WAUW-LAAG — UTILITIES (v2, alleen toegevoegd)
   Gedeelde bouwstenen voor cinematic hero's, scroll-reveal,
   gloed, shimmer en kaart-magie. Alles via transform/opacity,
   en volledig uitgezet bij prefers-reduced-motion (onderaan).
   ============================================================
   ============================================================ */

/* ------------------------------------------------------------
   1. SCROLL-REVEAL — de gedeelde bouwsteen.
   Zet .pp-reveal op een sectie/kaart; de IntersectionObserver
   (JS-snippet in wow-brief.md) voegt .pp-in toe zodra hij in
   beeld komt. Varianten voor richting en schaal.
   Standaard komt hij van onder omhoog.
   ------------------------------------------------------------ */
.pp-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--pp-zwier), transform .6s var(--pp-zwier);
  will-change: opacity, transform;
}
.pp-reveal.pp-in {
  opacity: 1;
  transform: none;
}
/* Richting-varianten */
.pp-reveal--links  { transform: translateX(-32px); }
.pp-reveal--rechts { transform: translateX(32px); }
.pp-reveal--schaal { transform: scale(0.94); }
.pp-reveal--zwier  { transform: translateY(30px) scale(0.96); }
.pp-reveal--links.pp-in,
.pp-reveal--rechts.pp-in,
.pp-reveal--schaal.pp-in,
.pp-reveal--zwier.pp-in { transform: none; }

/* Gestapelde vertraging: zet .pp-reveal--traps op een grid/rij,
   dan komen de kinderen na elkaar binnen (ritme). */
.pp-reveal--traps.pp-in > *          { animation: pp-instap .6s var(--pp-zwier) both; }
.pp-reveal--traps.pp-in > *:nth-child(2) { animation-delay: .08s; }
.pp-reveal--traps.pp-in > *:nth-child(3) { animation-delay: .16s; }
.pp-reveal--traps.pp-in > *:nth-child(4) { animation-delay: .24s; }
.pp-reveal--traps.pp-in > *:nth-child(5) { animation-delay: .32s; }
.pp-reveal--traps.pp-in > *:nth-child(6) { animation-delay: .40s; }
@keyframes pp-instap {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------
   2. ADEMENDE / BEWEGENDE GRADIENT
   Langzaam schuivende neon-veeg. Op tekst (met -clip) of als
   achtergrond-vlak. Puur background-position, dus goedkoop.
   <h1 class="pp-tekst-beweeg">Punt. Geregeld.</h1>
   <div class="pp-vlak-beweeg"> ... donkere sfeer ... </div>
   ------------------------------------------------------------ */
@keyframes pp-schuif {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.pp-tekst-beweeg {
  background: var(--pp-gradient-beweeg);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: pp-schuif 7s linear infinite;
}
.pp-vlak-beweeg {
  background: var(--pp-gradient-aurora);
  background-size: 160% 160%;
  animation: pp-adem 16s ease-in-out infinite;
}
@keyframes pp-adem {
  0%, 100% { background-position: 0% 0%; }
  50%      { background-position: 100% 100%; }
}

/* Zachte pulserende gloed-halo (achter een badge, cijfer of icoon).
   <span class="pp-puls">...</span> */
@keyframes pp-puls {
  0%, 100% { box-shadow: 0 0 0 0 var(--pp-roze-gloed); }
  50%      { box-shadow: 0 0 0 10px rgba(255, 61, 143, 0); }
}
.pp-puls { animation: pp-puls 2.6s ease-out infinite; border-radius: inherit; }

/* ------------------------------------------------------------
   3. SHIMMER — een glans die traag over een accent glijdt.
   <span class="pp-shimmer">nieuw</span>  (op donker het mooist)
   ------------------------------------------------------------ */
@keyframes pp-shimmer {
  0%   { background-position: -150% 0; }
  100% { background-position: 250% 0; }
}
.pp-shimmer {
  background-image: linear-gradient(100deg,
    transparent 20%, rgba(255,255,255,0.55) 50%, transparent 80%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: pp-shimmer 3.4s ease-in-out infinite;
  -webkit-background-clip: text;
  background-clip: text;
}

/* ------------------------------------------------------------
   4. NEON-TEKST-GLOED (statisch, geen animatie).
   Voor losse woorden in een hero op donker.
   <em class="pp-gloei-roze">gratis</em>
   ------------------------------------------------------------ */
.pp-gloei-roze { color: var(--pp-roze); text-shadow: var(--pp-gloed-tekst-roze); }
.pp-gloei-geel { color: var(--pp-geel); text-shadow: var(--pp-gloed-tekst-geel); }

/* ------------------------------------------------------------
   5. HOVER-LIFT MET GLOED — generieke utility.
   Zet naast een bestaande kaart/link voor lift + zachte gloed
   zonder de bestaande component te wijzigen.
   <a class="... pp-lift"> ... </a>
   ------------------------------------------------------------ */
.pp-lift {
  transition: transform var(--pp-zwier), box-shadow var(--pp-vlot), border-color var(--pp-vlot);
  will-change: transform;
}
.pp-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--pp-gloed-roze-l);
}
.pp-lift--geel:hover { box-shadow: var(--pp-gloed-geel-l); }

/* ------------------------------------------------------------
   6. SHOWCASE-KAART — premium zwevende kaart met glans-rand.
   Een rijkere kaart voor uitgelichte blokken (thema-hero,
   featured pakket). Bestaande .pp-kaart blijft ongemoeid.
   ------------------------------------------------------------ */
.pp-kaart--showcase {
  position: relative;
  border-radius: var(--pp-radius-xl);
  box-shadow: var(--pp-schaduw-l);
  transition: transform var(--pp-zwier), box-shadow var(--pp-vlot);
  will-change: transform;
}
.pp-kaart--showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,61,143,0.6), rgba(255,217,59,0.5), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.9;
}
.pp-kaart--showcase:hover {
  transform: translateY(-8px);
  box-shadow: var(--pp-gloed-roze-l), var(--pp-schaduw-xl);
}

/* ------------------------------------------------------------
   7. CTA-MAGIE — extra gloed + pulserende ademhaling op de
   primaire knop. Combineer met bestaande .pp-btn--primair:
   <a class="pp-btn pp-btn--primair pp-btn--magie">Boek nu</a>
   De glans-veeg zit al op .pp-btn--primair; dit voegt een
   zachte, ademende gloed-ring toe die de blik trekt.
   ------------------------------------------------------------ */
@keyframes pp-cta-adem {
  0%, 100% { box-shadow: var(--pp-schaduw-roze), 0 0 0 0 rgba(255, 61, 143, 0.45); }
  50%      { box-shadow: var(--pp-schaduw-roze), 0 0 0 12px rgba(255, 61, 143, 0); }
}
.pp-btn--magie { animation: pp-cta-adem 2.8s ease-out infinite; }
.pp-btn--magie:hover { animation-play-state: paused; box-shadow: 0 14px 40px var(--pp-roze-gloed); }

/* ------------------------------------------------------------
   8. GLOEIENDE PUNT-CONFETTI — rijkere confetti met neon-gloed
   die zweeft én langzaam ronddraait. Aanvulling op .pp-confetti;
   zet er extra klasse bij: <span class="pp-confetti pp-confetti--gloed">
   ------------------------------------------------------------ */
@keyframes pp-drijf {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 0.85; }
  50%  { transform: translate(6px, -22px) rotate(180deg); opacity: 1; }
  100% { transform: translate(0, 0) rotate(360deg); opacity: 0.85; }
}
.pp-confetti--gloed {
  animation: pp-drijf var(--d, 9s) ease-in-out infinite;
  box-shadow: 0 0 14px 2px rgba(255, 61, 143, 0.6);
}
.pp-confetti--gloed.pp-confetti--geel { box-shadow: 0 0 14px 2px rgba(255, 217, 59, 0.6); }

/* ------------------------------------------------------------
   9. DISPLAY-KOP UTILITIES — grote, zware cinematic koppen.
   <h1 class="pp-display">...</h1>  /  .pp-display--l / --m
   ------------------------------------------------------------ */
.pp-display {
  font-size: var(--pp-display-l);
  font-weight: var(--pp-gewicht-zwart);
  line-height: 1.04;
  letter-spacing: var(--pp-letter-strak);
  overflow-wrap: break-word;
  word-break: break-word;
}
.pp-display--xl { font-size: var(--pp-display-xl); letter-spacing: var(--pp-letter-mega); line-height: 1.0; }
.pp-display--m  { font-size: var(--pp-display-m); }

/* Neon-onderstreep-veeg onder een woord: <span class="pp-onderstreep">feest</span> */
.pp-onderstreep {
  position: relative;
  white-space: nowrap;
}
.pp-onderstreep::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -0.12em;
  height: 0.28em;
  border-radius: 999px;
  background: var(--pp-gradient-feest);
  opacity: 0.55;
  z-index: -1;
}

/* ------------------------------------------------------------
   10. SFEER-VLAK — donkere sectie met aurora-gloed als achtergrond.
   Handig als sectie-wrapper op de themapagina's/hero's.
   <section class="pp-sfeer"> ... witte tekst ... </section>
   ------------------------------------------------------------ */
.pp-sfeer {
  background: var(--pp-gradient-aurora);
  color: var(--pp-wit);
  position: relative;
  overflow: hidden;
}
.pp-sfeer--diep  { background: var(--pp-gradient-diep); }
.pp-sfeer--sluier { background: var(--pp-gradient-sluier); color: var(--pp-inkt); }

/* ============================================================
   REDUCED-MOTION — zet ALLE wauw-beweging uit, houd de
   eindstaat zichtbaar (nooit onzichtbare content).
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .pp-reveal,
  .pp-reveal--links,
  .pp-reveal--rechts,
  .pp-reveal--schaal,
  .pp-reveal--zwier {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .pp-reveal--traps.pp-in > * { animation: none !important; }
  .pp-tekst-beweeg {
    animation: none;
    /* val terug op een statisch feest-verloop, blijft leesbaar */
    background: var(--pp-gradient-feest);
    background-size: auto;
  }
  .pp-vlak-beweeg { animation: none; }
  .pp-puls,
  .pp-shimmer,
  .pp-btn--magie,
  .pp-confetti--gloed { animation: none; }
  .pp-lift,
  .pp-kaart--showcase { transition: none; }
}

/* ============================================================
   ALLEEN DE TEKST-SLIDES UIT (Glenn: de slingers/teksten/gloed
   waren juist top; alleen de tekst die inschuift bij scroll weg).
   Content is dus altijd meteen zichtbaar; al het andere blijft vet.
   ============================================================ */
.pp-reveal,
.pp-reveal--links,
.pp-reveal--rechts,
.pp-reveal--schaal,
.pp-reveal--zwier {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.pp-reveal--traps > *,
.pp-reveal--traps.pp-in > * { animation: none !important; opacity: 1 !important; transform: none !important; }