/* =========================================================================
   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; }

/* =========================================================================
   Inslag-animaties
   Alles hier is decoratie bovenop een pagina die zonder JavaScript al af is:
   valt fx.js weg, dan staat de inhoud er gewoon (zie de .no-fx-uitzondering).
   ========================================================================= */

/* --- Binnenkomst: elementen slaan in, ze glijden niet --- */
.fx-js [data-fx] { opacity: 0; }
.fx-js [data-fx].is-in {
  animation: inslag .52s cubic-bezier(.2, .9, .25, 1.15) forwards;
  animation-delay: var(--fx-delay, 0s);
}
@keyframes inslag {
  0%   { opacity: 0; transform: scale(1.14) translateY(-14px); filter: blur(7px); }
  58%  { opacity: 1; transform: scale(.986) translateY(0);     filter: blur(0); }
  78%  { transform: scale(1.008); }
  100% { opacity: 1; transform: scale(1); }
}

/* --- Productkaart laadt op bij hover: aderen gloeien van binnenuit --- */
.product::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(53, 224, 106, .16), transparent 62%);
  opacity: 0;
  transition: opacity .28s ease;
  pointer-events: none;
}
.product:hover::after { opacity: 1; }

/* --- Knop krijgt een lading die van links naar rechts doorschiet --- */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: '';
  position: absolute; top: 0; bottom: 0; left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}
.btn-primary:hover::after { animation: lading .62s ease-out; }
@keyframes lading {
  0%   { left: -60%; opacity: 0; }
  12%  { opacity: .9; }
  100% { left: 115%; opacity: 0; }
}

/* --- Schokgolf bij het toevoegen aan de winkelwagen --- */
.schokgolf {
  position: fixed;
  z-index: 80;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  pointer-events: none;
  animation: schok .62s cubic-bezier(.15, .7, .3, 1) forwards;
}
@keyframes schok {
  0%   { transform: scale(1);  opacity: .95; border-width: 3px; }
  100% { transform: scale(34); opacity: 0;   border-width: .5px; }
}

/* --- Korte groene flits over het scherm: onweer, en de klap bij bestellen ---
   Bewust alleen opacity: een transform op een schermvullende laag zou elk
   position:fixed-element eronder laten verspringen. */
.flits {
  position: fixed; inset: 0;
  z-index: 85;
  pointer-events: none;
  background: radial-gradient(circle at 50% 20%, rgba(107, 255, 156, .30), rgba(53, 224, 106, .10) 55%, transparent 78%);
  opacity: 0;
}
.flits.is-bliksem { animation: flits-bliksem .5s steps(1, end); }
.flits.is-klap    { animation: flits-klap .34s ease-out; }
@keyframes flits-bliksem {
  0% { opacity: 0; } 8% { opacity: .55; } 16% { opacity: .06; }
  26% { opacity: .38; } 42% { opacity: .04; } 100% { opacity: 0; }
}
@keyframes flits-klap {
  0% { opacity: .5; } 100% { opacity: 0; }
}

/* --- De aangeklikte knop krijgt een duw --- */
.btn.is-geraakt { animation: geraakt .3s cubic-bezier(.2, .9, .25, 1.2); }
@keyframes geraakt {
  0%   { transform: scale(1); }
  30%  { transform: scale(.93); }
  62%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* --- Winkelwagenknop krijgt een klap mee --- */
.cart-fab.is-geraakt { animation: fab-klap .46s cubic-bezier(.2, .9, .25, 1.2); }
@keyframes fab-klap {
  0%   { transform: scale(1) rotate(0); }
  22%  { transform: scale(1.22) rotate(-7deg); }
  48%  { transform: scale(.94) rotate(4deg); }
  74%  { transform: scale(1.07) rotate(-2deg); }
  100% { transform: scale(1) rotate(0); }
}

/* --- De groene kop in de hero krijgt af en toe een stroomstoot --- */
.hero h1 em.is-stoot { animation: stoot .42s steps(1, end); }
@keyframes stoot {
  0%   { text-shadow: none; }
  12%  { text-shadow: -2px 0 rgba(107, 255, 156, .9), 2px 0 rgba(0, 200, 90, .8), 0 0 26px rgba(53, 224, 106, .8); }
  24%  { text-shadow: 0 0 8px rgba(53, 224, 106, .4); }
  40%  { text-shadow: 2px 0 rgba(107, 255, 156, .8), -2px 0 rgba(0, 200, 90, .7), 0 0 20px rgba(53, 224, 106, .7); }
  60%  { text-shadow: none; }
  100% { text-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-js [data-fx] { opacity: 1; animation: none; }
  .btn-primary:hover::after,
  .schokgolf, .flits,
  .btn.is-geraakt, .cart-fab.is-geraakt,
  .hero h1 em.is-stoot { animation: none; }
  .flits { display: none; }
}

/* =========================================================================
   Laadscherm
   Het scherm is standaard zichtbaar en verdwijnt op drie manieren, in deze
   volgorde: (1) een inline scriptje verbergt het meteen als je deze sessie
   al binnen bent geweest, (2) fx.js haalt het weg zodra de pagina geladen is,
   (3) een CSS-animatie ruimt het hoe dan ook na 2,6 s op. Die derde is de
   vangnetregel: zonder JavaScript zou een laadscherm de winkel anders
   volledig blokkeren.
   ========================================================================= */
.laadscherm {
  position: fixed; inset: 0;
  z-index: 200;
  display: grid; place-items: center;
  background: var(--void);
  animation: laadscherm-vangnet .6s ease 2.6s forwards;
}
@keyframes laadscherm-vangnet {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* Direct weg, zonder animatie — voor de tweede paginaweergave in een sessie
   en voor wie bewegingsreductie aan heeft staan. */
.laadscherm.is-overgeslagen { display: none; }

/* Wegvallen: het scherm scheurt open in twee helften. */
.laadscherm.is-klaar { animation: laadscherm-weg .62s cubic-bezier(.65, 0, .35, 1) forwards; }
@keyframes laadscherm-weg {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}
.laadscherm.is-klaar .laad-helft--boven { transform: translateY(-100%); }
.laadscherm.is-klaar .laad-helft--onder { transform: translateY(100%); }
.laadscherm.is-klaar .laad-kern { opacity: 0; transform: scale(1.35); }

/* De twee helften die uit elkaar schuiven */
.laad-helft {
  position: absolute; left: 0; right: 0; height: 50%;
  /* Zelfde kleur als het scherm eronder: elk kleurverschil tekent een naad
     dwars door het embleem. De groene scheurrand komt pas als hij opengaat. */
  background: var(--void);
  transition: transform .6s cubic-bezier(.65, 0, .35, 1), box-shadow .2s ease;
}
.laad-helft--boven { top: 0; }
.laad-helft--onder { bottom: 0; }
.laadscherm.is-klaar .laad-helft--boven { box-shadow: 0 1px 0 var(--accent), 0 6px 26px rgba(53, 224, 106, .5); }
.laadscherm.is-klaar .laad-helft--onder { box-shadow: 0 -1px 0 var(--accent), 0 -6px 26px rgba(53, 224, 106, .5); }

.laad-kern {
  position: relative; z-index: 2;
  display: grid; justify-items: center; gap: 22px;
  transition: opacity .4s ease, transform .5s ease;
}

/* Het embleem tekent zichzelf: de druppel wordt getrokken, dan slaat de
   schicht in. Beide op stroke-dashoffset, dat is één eigenschap op de
   compositor en dus goedkoop. */
.laad-merk {
  width: clamp(84px, 22vw, 118px); height: auto; color: var(--accent);
  /* Zonder dit knipt de SVG-viewport de drop-shadow af op zijn eigen kader,
     en zie je de gloed als een lichter vierkant achter het embleem staan. */
  overflow: visible;
}
.laad-merk .druppel {
  fill: none; stroke: currentColor; stroke-width: 4.6; stroke-linejoin: round;
  /* 142 = de werkelijke padlengte, gemeten met getTotalLength(). Een geschat
     getal laat de lijn te vroeg klaar zijn of nooit helemaal doortrekken. */
  stroke-dasharray: 142; stroke-dashoffset: 142;
  animation: druppel-trekken 1s cubic-bezier(.5, 0, .2, 1) .1s forwards;
  filter: drop-shadow(0 0 12px rgba(53, 224, 106, .55));
}
@keyframes druppel-trekken { to { stroke-dashoffset: 0; } }

.laad-merk .schicht {
  fill: currentColor;
  opacity: 0; transform-origin: 32px 36px;
  animation: schicht-inslaan .5s cubic-bezier(.2, .9, .25, 1.3) .78s forwards;
  filter: drop-shadow(0 0 14px rgba(107, 255, 156, .8));
}
@keyframes schicht-inslaan {
  0%   { opacity: 0; transform: scale(.4) rotate(-14deg); }
  55%  { opacity: 1; transform: scale(1.18) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* Laadbalk die zich vult — geeft de wachttijd een richting */
.laad-balk {
  width: clamp(120px, 42vw, 190px); height: 3px;
  background: rgba(255, 255, 255, .09);
  overflow: hidden;
}
.laad-balk span {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent), var(--accent-lift));
  transform-origin: left;
  transform: scaleX(0);
  animation: balk-vullen 1.5s cubic-bezier(.3, .8, .3, 1) .15s forwards;
}
@keyframes balk-vullen { to { transform: scaleX(1); } }

.laad-tekst {
  font-family: var(--display);
  font-size: .82rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--accent);
  opacity: 0;
  animation: laad-tekst-op .5s ease .5s forwards;
}
@keyframes laad-tekst-op { to { opacity: .85; } }

@media (prefers-reduced-motion: reduce) {
  .laadscherm { display: none; }
}