/* =========================================================================
   HulkHoneyPack — levende laag (aderen, bliksem, hartslag)
   Alles hangt aan één ritme: --beat. Eén hibernating hartslag, lub-dub met
   een lange rust ertussen, waar de gloed, de aderen en het logo op meelopen.
   Uitsluitend transform en opacity worden geanimeerd, zodat de compositor
   het werk doet en er niets herberekend hoeft te worden.
   ========================================================================= */

:root {
  --beat: 4.4s;          /* trage, sluimerende hartslag */
  --vein: rgba(53, 224, 106, .52);
  --vein-hot: #6BFF9C;
}

/* ---------- Decoratieve laag ---------- */
.fx {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.fx svg { position: absolute; display: block; }

/* Aderennetwerk: twee lagen over elkaar. De onderste staat er altijd,
   de bovenste licht op in de hartslag alsof er iets doorheen wordt gepompt. */
.fx-veins {
  inset: 0; width: 100%; height: 100%;
  opacity: .85;
}
.fx-veins .vein {
  fill: none;
  stroke: var(--vein);
  stroke-width: 1.8;
  stroke-linecap: round;
}
.fx-veins .vein--thick { stroke-width: 3.2; }

.fx-veins .vein-hot {
  fill: none;
  stroke: var(--vein-hot);
  stroke-width: 2.2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(107, 255, 156, .9));
  opacity: 0;
  animation: vein-pulse var(--beat) cubic-bezier(.36, .07, .19, .97) infinite;
}
/* Elke ader krijgt een eigen vertraging, zodat de puls zich verspreidt
   in plaats van overal tegelijk aan te gaan. */
.fx-veins .vein-hot:nth-of-type(2) { animation-delay: .06s; }
.fx-veins .vein-hot:nth-of-type(3) { animation-delay: .12s; }
.fx-veins .vein-hot:nth-of-type(4) { animation-delay: .18s; }
.fx-veins .vein-hot:nth-of-type(5) { animation-delay: .24s; }
.fx-veins .vein-hot:nth-of-type(6) { animation-delay: .30s; }

@keyframes vein-pulse {
  0%   { opacity: 0;   }
  4%   { opacity: .85; }   /* lub */
  9%   { opacity: .12; }
  14%  { opacity: .55; }   /* dub */
  22%  { opacity: 0;   }
  100% { opacity: 0;   }   /* lange rust — hibernating */
}

/* ---------- Bliksem ---------- */
.fx-bolt {
  opacity: 0;
  filter: drop-shadow(0 0 10px rgba(107, 255, 156, .8));
}
.fx-bolt .bolt-core { fill: var(--vein-hot); }
.fx-bolt .bolt-halo { fill: rgba(53, 224, 106, .35); }

/* Drie inslagen op onderling ondeelbare intervallen: het patroon herhaalt
   zich pas na heel lang, dus het blijft onvoorspelbaar aanvoelen. */
.fx-bolt--a { top: -4%;  left: 12%;  width: clamp(58px, 7vw, 104px);  animation: strike 7.3s  steps(1, end) infinite; }
.fx-bolt--b { top: -8%;  right: 18%; width: clamp(44px, 5.5vw, 82px); animation: strike 11.1s steps(1, end) infinite 2.4s; }
.fx-bolt--c { top: 22%;  right: 4%;  width: clamp(34px, 4vw, 62px);   animation: strike 13.7s steps(1, end) infinite 5.9s; }

@keyframes strike {
  0%, 88%  { opacity: 0; }
  89%      { opacity: 1; }
  90%      { opacity: .15; }
  91%      { opacity: .95; }
  92%      { opacity: .3; }
  93%      { opacity: .8; }
  95%      { opacity: 0; }
  100%     { opacity: 0; }
}

/* ---------- Hartslag op merkelementen ---------- */
/* Het logo ademt mee: de hele huisstijl loopt op hetzelfde ritme. */
.logo-mark {
  animation: heartbeat var(--beat) cubic-bezier(.36, .07, .19, .97) infinite;
  transform-origin: center;
}
@keyframes heartbeat {
  0%   { transform: scale(1);     }
  4%   { transform: scale(1.09);  }   /* lub */
  9%   { transform: scale(1.005); }
  14%  { transform: scale(1.055); }   /* dub */
  22%  { transform: scale(1);     }
  100% { transform: scale(1);     }
}

/* Gloed achter de hero, op hetzelfde ritme */
.hero-pulse {
  position: absolute;
  /* Blijft bewust binnen de rechterrand. Liet ik hem eroverheen steken, dan
     telt Chrome hem mee in het scrollgebied ondanks overflow:hidden op de
     hero — een geanimeerde transform krijgt een eigen laag en wordt wel
     afgeknipt in beeld, maar niet in de breedteberekening. Het uitwaaieren
     doet de radiale verloop nu zelf, niet de geometrie. */
  top: -12%; right: 0;
  width: min(760px, 86%); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(53, 224, 106, .30), transparent 66%);
  opacity: .3;
  animation: glow-beat var(--beat) cubic-bezier(.36, .07, .19, .97) infinite;
  pointer-events: none;
}
@keyframes glow-beat {
  0%   { opacity: .26; transform: scale(1);    }
  4%   { opacity: .72; transform: scale(1.04); }
  9%   { opacity: .34; transform: scale(1.01); }
  14%  { opacity: .58; transform: scale(1.03); }
  22%  { opacity: .28; transform: scale(1);    }
  100% { opacity: .26; transform: scale(1);    }
}

/* De winkelwagenknop klopt zachtjes mee, zodat hij opvalt zonder te schreeuwen */
.cart-fab { animation: fab-beat var(--beat) cubic-bezier(.36, .07, .19, .97) infinite; }
@keyframes fab-beat {
  0%   { box-shadow: 0 10px 30px rgba(53, 224, 106, .28); }
  4%   { box-shadow: 0 10px 30px rgba(53, 224, 106, .28), 0 0 0 8px rgba(53, 224, 106, .16); }
  14%  { box-shadow: 0 10px 30px rgba(53, 224, 106, .28), 0 0 0 5px rgba(53, 224, 106, .10); }
  22%  { box-shadow: 0 10px 30px rgba(53, 224, 106, .28); }
  100% { box-shadow: 0 10px 30px rgba(53, 224, 106, .28); }
}

/* Dunne ader-scheidingslijn tussen secties */
.vein-rule {
  height: 2px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--vein) 18%, var(--vein-hot) 50%, var(--vein) 82%, transparent);
  opacity: .35;
  animation: rule-beat var(--beat) cubic-bezier(.36, .07, .19, .97) infinite;
}
@keyframes rule-beat {
  0%, 100% { opacity: .22; }
  4%       { opacity: .9;  }
  9%       { opacity: .3;  }
  14%      { opacity: .62; }
  22%      { opacity: .22; }
}

/* Beweging is decoratie, nooit informatie: wie er last van heeft krijgt
   dezelfde pagina zonder puls. De aderen blijven wel staan. */
@media (prefers-reduced-motion: reduce) {
  .fx-veins .vein-hot { animation: none; opacity: .3; }
  .fx-bolt            { animation: none; opacity: .5; }
  .logo-mark,
  .hero-pulse,
  .cart-fab,
  .vein-rule          { animation: none; }
}

/* =========================================================================
   Pagina-brede aderlaag
   Eén vaste laag achter de hele site in plaats van een SVG per sectie: dat
   scheelt vijf keer zoveel geanimeerde knooppunten en de aderen lopen nu
   ononderbroken door van de kop tot de voet.
   ========================================================================= */
.fx-page {
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.fx-page .fx-veins { opacity: .62; }

/* De inhoud moet boven de aderlaag staan. De header (60), de winkelwagen (70)
   en de overlay (90) hebben al een eigen laag; de rest krijgt hem hier. */
.announce,
.hero,
.usps,
.section,
.cta-band,
.thankyou,
.footer,
.vein-rule { position: relative; z-index: 1; }

/* Ruitje in de eyebrow wordt een schicht — hetzelfde motief als de bliksem
   en het merkicoon, zodat het teken overal terugkomt. */
.dot {
  width: 9px; height: 12px;
  clip-path: polygon(58% 0, 16% 56%, 44% 56%, 34% 100%, 84% 42%, 54% 42%);
}

/* De prijs van het uitgelichte pakket ademt mee met de hartslag */
.product-featured .price {
  animation: prijs-beat var(--beat) cubic-bezier(.36, .07, .19, .97) infinite;
}
@keyframes prijs-beat {
  0%, 100% { text-shadow: none; }
  4%       { text-shadow: 0 0 18px rgba(53, 224, 106, .75); }
  9%       { text-shadow: 0 0 6px  rgba(53, 224, 106, .3); }
  14%      { text-shadow: 0 0 13px rgba(53, 224, 106, .5); }
  22%      { text-shadow: none; }
}

/* Bedankpagina: het vinkje is daar de blikvanger, dus die krijgt de hartslag */
.thankyou-icon {
  animation: heartbeat var(--beat) cubic-bezier(.36, .07, .19, .97) infinite;
  transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
  .product-featured .price,
  .thankyou-icon { animation: none; }
}

/* Elke sectie die een eigen .fx draagt moet zelf de context én de schaar zijn:
   position voor de verankering, overflow voor het afknippen van de schichten. */
.doc-hero,
.cta-band,
.thankyou,
.section-tint { position: relative; overflow: hidden; }
.doc-hero > .container,
.cta-band > .container,
.thankyou > div,
.section-tint > .container { position: relative; z-index: 1; }