/* herofx — hero-wissel, geanimeerde hero-lagen, openingsspinner en
   scroll-entrees voor de niche-previews.

   Kleuren komen uit de site zelf. Zet per preview in :root (of op de hero):
     --hfx-1, --hfx-2, --hfx-3   accentkleuren voor de engine
     --hfx-bg                    achtergrond waar de engine op tekent
     --hfx-ink                   tekstkleur in de nieuwe hero
     --hfx-line                  lijn/rand-kleur
   Alles heeft een neutrale fallback, dus een preview zonder die vars blijft
   werken — alleen minder in stijl. */

:root {
  --hfx-1: #7d8aa0;
  --hfx-2: #9fb0c4;
  --hfx-3: #c6d2e0;
  --hfx-bg: #0e1218;
  --hfx-ink: #ffffff;
  --hfx-line: rgba(255, 255, 255, .18);
  --hfx-radius: 22px;
  --hfx-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ============================================================ 1. stack */
.hfx-stack { position: relative; isolation: isolate; }
.hfx-stack > [data-hfx-view] { animation: none; }
[data-hfx-view][hidden] { display: none !important; }
.hfx-stack > .hfx-view-on.hfx-swap { animation: hfx-swap-in .62s var(--hfx-ease) both; }
@keyframes hfx-swap-in {
  from { opacity: 0; transform: scale(1.012); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* ======================================================= 2. wisselknop */
/* Schakelaar, overgezet van 21st.dev @micka_design/switch. Geen label: de
   schakelaar staat op zichzelf. De duim wordt een pilletje bij hover en plat
   bij indrukken, en is versleepbaar. */
.hfx-switch {
  /* Zweeft BOVEN het ontwerp en telt er niet in mee: vaste hoek rechtsboven,
     net onder een eventuele vaste koptekst. Nooit in de contentkolom, en de
     hero reserveert er geen ruimte meer voor (zie .hfx-inner hieronder). */
  position: absolute;
  top: var(--hfx-switch-top, 92px);
  right: clamp(14px, 2vw, 26px);
  left: auto;
  z-index: 40;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  animation: hfx-switch-in .7s .5s var(--hfx-ease) both;
}
@keyframes hfx-switch-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.hfx-switch-track {
  position: relative;
  display: block;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: var(--hfx-switch-off, rgba(255, 255, 255, .26));
  box-shadow:
    inset 0 0 0 1px var(--hfx-switch-ring, rgba(255, 255, 255, .16)),
    0 6px 18px rgba(0, 0, 0, .22);
  transition: background .14s ease, box-shadow .2s ease;
}
/* aan-stand draagt de sterkste merkkleur van de site (--hfx-1) */
.hfx-switch[aria-checked="true"] .hfx-switch-track { background: var(--hfx-1); }
.hfx-switch:hover .hfx-switch-track { box-shadow: inset 0 0 0 1px var(--hfx-switch-ring, rgba(255, 255, 255, .28)), 0 8px 22px rgba(0, 0, 0, .26); }
.hfx-switch:focus-visible .hfx-switch-track { outline: 2px solid var(--hfx-2); outline-offset: 3px; }

.hfx-switch-thumb {
  position: absolute;
  top: 0; left: 0;
  width: 20px; height: 20px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
  transform: translate(3px, 3px);
  /* korte veer, zoals de framer-motion spring in het origineel */
  transition: transform .19s cubic-bezier(.34, 1.42, .64, 1),
              width .19s cubic-bezier(.34, 1.42, .64, 1),
              height .19s cubic-bezier(.34, 1.42, .64, 1);
}

/* lichte heroes: donkere uit-stand zodat de schakelaar op papier leesbaar is */
.hfx-stack.hfx-switch-light .hfx-switch {
  --hfx-switch-off: rgba(20, 18, 16, .17);
  --hfx-switch-ring: rgba(20, 18, 16, .10);
}
.hfx-stack.hfx-switch-light .hfx-switch-track { box-shadow: inset 0 0 0 1px var(--hfx-switch-ring), 0 4px 14px rgba(0, 0, 0, .12); }

@media (max-width: 720px) { .hfx-switch { right: 14px; left: auto; } }

/* ==================================================== 3. hero-omhulsel */
.hfx-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: center;
  min-height: clamp(560px, 88vh, 880px);
  background: var(--hfx-bg);
  color: var(--hfx-ink);
}
/* lagen: beeld (0) → engine (1) → leesbaarheidslaag (2) → inhoud (3) */
.hfx-backdrop { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hfx-backdrop img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.06);
  animation: hfx-kenburns 22s ease-in-out infinite alternate;
}
@keyframes hfx-kenburns { from { transform: scale(1.06) translate3d(0, 0, 0); } to { transform: scale(1.14) translate3d(-1.5%, -1.5%, 0); } }
.hfx-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: var(--hfx-canvas-opacity, 1);
  mix-blend-mode: var(--hfx-canvas-blend, normal);
}
/* leesbaarheidslaag tussen engine en tekst */
.hfx-veil { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hfx-veil-left  { background: linear-gradient(90deg, var(--hfx-bg) 6%, color-mix(in srgb, var(--hfx-bg) 62%, transparent) 46%, transparent 78%); }
.hfx-veil-down  { background: linear-gradient(0deg, var(--hfx-bg) 2%, transparent 46%); }
.hfx-veil-soft  { background: radial-gradient(120% 90% at 30% 45%, color-mix(in srgb, var(--hfx-bg) 78%, transparent), transparent 68%); }
/* copy op een foto: altijd wit, met een zwaardere sluier eronder */
.hfx-on-photo {
  --hfx-ink: #fff;
  --hfx-line: rgba(255, 255, 255, .24);
}
.hfx-on-photo .hfx-veil-photo {
  background:
    linear-gradient(180deg, rgba(6, 8, 11, .58) 0%, rgba(6, 8, 11, .30) 38%, rgba(6, 8, 11, .72) 100%),
    radial-gradient(120% 86% at 50% 46%, rgba(6, 8, 11, .18), rgba(6, 8, 11, .66) 78%);
}
.hfx-on-photo .hfx-lead { color: rgba(255, 255, 255, .84); }
.hfx-on-photo .hfx-eyebrow { color: rgba(255, 255, 255, .86); }
.hfx-on-photo .hfx-facts b { color: #fff; }
.hfx-on-photo .hfx-facts span { color: rgba(255, 255, 255, .66); }
/* Knoppen zonder eigen vulling vallen weg op een foto. herofx.js merkt ze aan
   en dan zetten we ze hier op wit — de gevulde knop van de site blijft heel. */
.hfx-on-photo .hfx-ghost-on-photo {
  color: #fff !important;
  border-color: rgba(255, 255, 255, .58) !important;
  background: rgba(255, 255, 255, .10) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.hfx-on-photo .hfx-ghost-on-photo:hover { background: rgba(255, 255, 255, .2) !important; }
.hfx-grain::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.22'/></svg>");
}
.hfx-inner {
  position: relative; z-index: 3;
  width: min(1180px, calc(100% - 44px));
  margin-inline: auto;
  padding: clamp(84px, 12vh, 132px) 0 clamp(56px, 9vh, 96px);
}
/* De schakelaar is een bedieningselement over het ontwerp heen, geen
   onderdeel ervan: de hero houdt er GEEN ruimte meer voor vrij. Deed hij dat
   wel, dan zakte elke hero een stuk omlaag om een knop van 46x26. */
.hfx-stack .hfx-inner {
  padding-top: clamp(72px, 10vh, 112px);
}
@media (max-width: 900px) {
  .hfx-stack .hfx-inner { padding-top: clamp(56px, 8vh, 84px); }
}

/* --- composities ------------------------------------------------------ */
.hfx-l-split .hfx-inner   { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 68px); align-items: center; }
.hfx-l-offset .hfx-inner  { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.02fr); gap: clamp(28px, 5vw, 68px); align-items: center; }
.hfx-l-offset .hfx-copy   { order: 2; }
.hfx-l-center .hfx-inner  { display: grid; justify-items: center; text-align: center; }
.hfx-l-center .hfx-copy   { max-width: 880px; }
.hfx-l-panel .hfx-inner   { display: grid; justify-items: start; }
.hfx-l-panel .hfx-copy {
  max-width: 660px; padding: clamp(30px, 4vw, 52px);
  border: 1px solid var(--hfx-line); border-radius: var(--hfx-radius);
  background: color-mix(in srgb, var(--hfx-bg) 62%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  backdrop-filter: blur(22px) saturate(1.25);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .3);
}
/* geen beeld naast de tekst? dan geen lege tweede kolom */
.hfx-l-split.hfx-no-media .hfx-inner,
.hfx-l-offset.hfx-no-media .hfx-inner,
.hfx-l-split:not(:has(.hfx-media)) .hfx-inner,
.hfx-l-offset:not(:has(.hfx-media)) .hfx-inner { grid-template-columns: minmax(0, 1fr); }
.hfx-l-split.hfx-no-media .hfx-copy,
.hfx-l-offset.hfx-no-media .hfx-copy,
.hfx-l-split:not(:has(.hfx-media)) .hfx-copy,
.hfx-l-offset:not(:has(.hfx-media)) .hfx-copy { max-width: 820px; }
.hfx-l-editorial .hfx-inner { display: grid; gap: clamp(26px, 4vw, 48px); }
.hfx-l-editorial .hfx-title { font-size: clamp(52px, 9.2vw, 148px); }

@media (max-width: 900px) {
  .hfx-l-split .hfx-inner, .hfx-l-offset .hfx-inner { grid-template-columns: 1fr; gap: 34px; }
  .hfx-l-offset .hfx-copy { order: 0; }
  .hfx-hero { min-height: auto; }
  .hfx-inner { padding: clamp(96px, 16vh, 140px) 0 64px; }
}

/* --- tekstonderdelen -------------------------------------------------- */
.hfx-copy { max-width: 640px; }
.hfx-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 20px;
  color: var(--hfx-2);
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.hfx-eyebrow::before { content: ""; width: 30px; height: 1px; background: currentColor; }
.hfx-l-center .hfx-eyebrow::after { content: ""; width: 30px; height: 1px; background: currentColor; }
.hfx-title {
  margin: 0 0 22px;
  font-size: clamp(42px, 6.4vw, 92px);
  line-height: .96;
  letter-spacing: -.035em;
}
.hfx-title em { font-style: inherit; color: var(--hfx-2); }
.hfx-lead {
  margin: 0;
  max-width: 56ch;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.68;
  color: color-mix(in srgb, var(--hfx-ink) 76%, transparent);
}
.hfx-l-center .hfx-lead { margin-inline: auto; }
/* .hfx-actions-wrap is wat de generator schrijft: daarin zit de knoppenrij van
   de site zelf, of los verzamelde knoppen. Beide gevallen willen dezelfde
   ademruimte boven zich. */
.hfx-actions,
.hfx-actions-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: clamp(26px, 3vw, 38px);
}
.hfx-l-center .hfx-actions,
.hfx-l-center .hfx-actions-wrap { justify-content: center; }
/* de knoppenrij van de site heeft vaak al een eigen bovenmarge */
.hfx-actions-wrap > * { margin-top: 0; }

/* generieke knoppen — alleen voor previews zonder eigen knopklasse */
.hfx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; padding: 0 26px;
  border: 1px solid transparent; border-radius: 999px;
  background: var(--hfx-2); color: var(--hfx-bg);
  font-weight: 650; text-decoration: none; cursor: pointer;
  transition: transform .22s var(--hfx-ease), box-shadow .22s;
}
.hfx-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px color-mix(in srgb, var(--hfx-2) 35%, transparent); }
.hfx-btn-ghost { background: transparent; border-color: var(--hfx-line); color: var(--hfx-ink); }

/* feitenstrip onder de kop */
.hfx-facts {
  display: flex; flex-wrap: wrap; gap: clamp(18px, 3vw, 42px);
  margin-top: 40px; padding-top: 26px;
  border-top: 1px solid var(--hfx-line);
  list-style: none;
}
.hfx-l-center .hfx-facts { justify-content: center; }
.hfx-facts li { display: grid; gap: 4px; }
.hfx-facts b { font-size: clamp(22px, 2.4vw, 32px); font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.hfx-facts span { font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: color-mix(in srgb, var(--hfx-ink) 62%, transparent); }

/* chips */
.hfx-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; list-style: none; padding: 0; }
.hfx-chips li {
  padding: 8px 15px; border: 1px solid var(--hfx-line); border-radius: 999px;
  background: color-mix(in srgb, var(--hfx-ink) 7%, transparent);
  font-size: 13px;
}

/* beeldzijde */
.hfx-media { position: relative; }
.hfx-media img, .hfx-media video {
  display: block; width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--hfx-radius);
}
.hfx-media-tall { aspect-ratio: 4 / 5; }
.hfx-media-wide { aspect-ratio: 16 / 11; }
.hfx-media-round { border-radius: 999px 999px var(--hfx-radius) var(--hfx-radius); overflow: hidden; }
.hfx-media-frame {
  padding: 10px; border: 1px solid var(--hfx-line); border-radius: calc(var(--hfx-radius) + 10px);
  background: color-mix(in srgb, var(--hfx-ink) 6%, transparent);
}
/* De schaduw die per preview meegeschreven is (0 34px 90px) is te wijd: zo'n
   blur om een cirkel leest op een lichte achtergrond als een half-transparante
   rechthoek om het beeld. Strakker, en hij volgt de vorm weer.
   Twee klassen diep, zodat dit wint van de regel in de preview zelf. */
.hfx-media .hfx-media-shape { box-shadow: 0 16px 38px rgba(0, 0, 0, .13); }
.hfx-media-float { animation: hfx-float 7s ease-in-out infinite; }
@keyframes hfx-float { 0%, 100% { transform: translateY(-8px); } 50% { transform: translateY(8px); } }

/* zwevend kaartje op het beeld */
.hfx-note {
  position: absolute; z-index: 3;
  display: grid; gap: 3px;
  padding: 14px 18px;
  border: 1px solid var(--hfx-line); border-radius: 16px;
  background: color-mix(in srgb, var(--hfx-bg) 78%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 20px 46px rgba(0, 0, 0, .26);
  font-size: 13px; line-height: 1.4;
}
.hfx-note b { font-size: 15px; }
.hfx-note-bl { left: -18px; bottom: 26px; }
.hfx-note-tr { right: -14px; top: 30px; }
@media (max-width: 900px) { .hfx-note-bl, .hfx-note-tr { position: static; margin-top: 14px; } }

/* scroll-wenk onderaan */
.hfx-scroll {
  position: absolute; left: 50%; bottom: 22px; z-index: 3;
  transform: translateX(-50%);
  display: grid; justify-items: center; gap: 8px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--hfx-ink) 56%, transparent);
}
.hfx-scroll::after {
  content: ""; width: 1px; height: 42px;
  background: linear-gradient(var(--hfx-2), transparent);
  animation: hfx-scroll-run 2.1s ease-in-out infinite;
}
@keyframes hfx-scroll-run { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: top; } 56%, 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ==================================== 4. entree- en scroll-animaties */
[data-hfx-in] { opacity: 1; transform: none; }         /* zonder JS gewoon zichtbaar */
.hfx-js [data-hfx-in] {
  --hfx-i: 0;
  opacity: 0;
  transition:
    opacity .82s var(--hfx-ease) calc(var(--hfx-i) * 90ms + var(--hfx-d, 0ms)),
    transform .82s var(--hfx-ease) calc(var(--hfx-i) * 90ms + var(--hfx-d, 0ms)),
    filter .82s var(--hfx-ease) calc(var(--hfx-i) * 90ms + var(--hfx-d, 0ms)),
    clip-path .95s var(--hfx-ease) calc(var(--hfx-i) * 90ms + var(--hfx-d, 0ms));
  will-change: opacity, transform;
}
.hfx-js [data-hfx-in]        { transform: translateY(28px); }
.hfx-js [data-hfx-in="down"] { transform: translateY(-26px); }
.hfx-js [data-hfx-in="left"] { transform: translateX(-38px); }
.hfx-js [data-hfx-in="right"]{ transform: translateX(38px); }
.hfx-js [data-hfx-in="scale"]{ transform: scale(.93); }
.hfx-js [data-hfx-in="blur"] { transform: translateY(18px); filter: blur(14px); }
.hfx-js [data-hfx-in="mask"] { transform: translateY(38px); clip-path: inset(100% 0 0 0); }
.hfx-js [data-hfx-in="clip"] { transform: none; clip-path: inset(0 100% 0 0); }
.hfx-js [data-hfx-in="flip"] { transform: perspective(1000px) rotateX(-24deg) translateY(26px); transform-origin: top center; }
.hfx-js [data-hfx-in="zoom"] { transform: scale(1.09); filter: blur(8px); }

.hfx-js [data-hfx-in].hfx-in {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: inset(0 0 0 0);
}

/* Woord-voor-woord kop: <h1 class="hfx-title"><span class="hfx-word">…</span>…
   Het masker is een overflow:hidden-box. Met een krappe line-height valt de
   staart van een g/j/p/y buiten die box en wordt hij afgeknipt, dus rekken we
   de box naar onderen op en halen de hoogte er met een negatieve marge weer
   af — de regelafstand blijft zo gelijk. */
.hfx-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .24em;
  margin-bottom: -.24em;
}
/* het woord moet nu ook verder omlaag beginnen, anders piept het onder het
   masker uit voordat de animatie start */
.hfx-word > i { display: inline-block; font-style: inherit; transform: translateY(140%); }
.hfx-js .hfx-view-on .hfx-word > i,
.hfx-js .hfx-hero .hfx-word > i {
  animation: hfx-word-up .95s var(--hfx-ease) both;
  animation-delay: calc(var(--hfx-w, 0) * 75ms + 240ms);
}
@keyframes hfx-word-up { from { transform: translateY(140%); } to { transform: translateY(0); } }

/* ================================================ 5. openingsspinner */
html.hfx-booting, html.hfx-booting body { overflow: hidden; }
.hfx-boot {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: var(--hfx-bg, #0e1218);
  transition: opacity .6s ease, visibility .6s;
}
.hfx-boot-off { opacity: 0; visibility: hidden; pointer-events: none; }
.hfx-boot-mark { display: grid; justify-items: center; gap: 18px; }
.hfx-boot-ring { width: 46px; height: 46px; }
.hfx-boot-ring circle {
  fill: none; stroke: var(--hfx-2); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 40 92;
  transform-origin: center;
  animation: hfx-boot-spin 1.05s linear infinite;
}
@keyframes hfx-boot-spin { to { transform: rotate(360deg); } }
.hfx-boot-word {
  color: var(--hfx-ink, #fff);
  font-size: 12px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase;
  opacity: .7;
  animation: hfx-boot-pulse 1.6s ease-in-out infinite;
}
@keyframes hfx-boot-pulse { 0%, 100% { opacity: .35; } 50% { opacity: .85; } }

/* ================================================ 6. rustige beweging */
@media (prefers-reduced-motion: reduce) {
  .hfx-js [data-hfx-in],
  .hfx-js [data-hfx-in].hfx-in {
    opacity: 1 !important; transform: none !important;
    filter: none !important; clip-path: none !important; transition: none !important;
  }
  .hfx-word > i, .hfx-js .hfx-hero .hfx-word > i { animation: none !important; transform: none !important; }
  .hfx-media-float, .hfx-scroll::after, .hfx-switch, .hfx-boot-word { animation: none !important; }
  .hfx-stack > .hfx-view-on.hfx-swap { animation: none !important; }
}