/* ==========================================================================
   Aurora en lichtstroom (v12.3, proef, 27 september 2026)

   Eén lichte kleurlaag achter de hele pagina, van boven naar beneden, in de
   huisstijl: petrol, zeegroen, salie en goud op het creme. De secties laten
   hem door, kaarten blijven dekkend. Daarin loopt een lichtstroom van boven
   naar beneden achter de blokken langs, in goud en zeegroen.
   Alleen actief op een pagina met <div class="aurora">.
   ========================================================================== */

:root {
  --aurora-petrol:   var(--olive);
  --aurora-zeegroen: #4E9C8F;
  --aurora-salie:    #B7CDBF;
  --aurora-goud:     var(--lime);
  --aurora-goudlicht:#F1C470;
}

.aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background-color: var(--cream);
  background-image:
    radial-gradient(ellipse 55vw 900px at 92% 900px,  color-mix(in srgb, var(--aurora-goudlicht) 38%, transparent), transparent 70%),
    radial-gradient(ellipse 60vw 1100px at 4% 1700px, color-mix(in srgb, var(--aurora-zeegroen) 30%, transparent), transparent 70%),
    radial-gradient(ellipse 50vw 900px at 96% 2700px, color-mix(in srgb, var(--aurora-salie) 60%, transparent), transparent 70%),
    radial-gradient(ellipse 58vw 1000px at 10% 3700px, color-mix(in srgb, var(--aurora-goud) 26%, transparent), transparent 70%),
    radial-gradient(ellipse 60vw 1100px at 90% 4700px, color-mix(in srgb, var(--aurora-zeegroen) 28%, transparent), transparent 70%),
    radial-gradient(ellipse 50vw 900px at 6% 5700px,  color-mix(in srgb, var(--aurora-salie) 60%, transparent), transparent 70%),
    radial-gradient(ellipse 58vw 1000px at 94% 6700px, color-mix(in srgb, var(--aurora-goudlicht) 34%, transparent), transparent 70%),
    radial-gradient(ellipse 60vw 1100px at 8% 7700px, color-mix(in srgb, var(--aurora-zeegroen) 26%, transparent), transparent 70%),
    radial-gradient(ellipse 60vw 1100px at 88% 8700px, color-mix(in srgb, var(--aurora-petrol) 18%, transparent), transparent 70%);
  filter: saturate(1.05);
}
@media (max-width: 860px) {
  /* Op de telefoon is de pagina smaller en langer: vlekken breder en dichter bij de rand. */
  .aurora { background-size: 100% 100%; }
}

body:has(.aurora) { position: relative; background: var(--cream); }
body:has(.aurora) > main,
body:has(.aurora) > footer { position: relative; z-index: 1; }

/* De lichte secties laten de laag door; kaarten, panelen en vakken blijven dekkend. */
body:has(.aurora) main > section:not(.section--inverse):not(.hero) { background: transparent; }
body:has(.aurora) main > .section--alt { background: color-mix(in srgb, var(--white) 35%, transparent); }

/* Hero en footer lopen aan hun rand over in de laag. */
body:has(.aurora) main > .hero {
  background: linear-gradient(to bottom, var(--color-bg-inverse) 0%, var(--color-bg-inverse) 88%, color-mix(in srgb, var(--color-bg-inverse) 0%, transparent) 100%);
}
body:has(.aurora) > footer.section--inverse {
  background: linear-gradient(to bottom, transparent 0%, var(--color-bg-inverse) 10%);
}

/* ---------- De lichtstroom ----------
 * Een bundel gloeiende lijnen die van boven naar beneden achter de blokken
 * langs slingert (paden in assets/aurora.js). Hij ligt boven de aurora en
 * onder de inhoud; tussen de blokken en door het petrolvlak zie je hem. */
.lichtstroom { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.lichtstroom svg { display: block; }
.lichtstroom path { fill: none; stroke: url(#stroomkleur); stroke-linecap: round; }
.lichtstroom__gloed path { stroke-width: 16; opacity: .3; }
.lichtstroom__lijnen path { stroke-width: var(--dikte, 1); opacity: .6; }
.lichtstroom__puls path {
  stroke-width: calc(var(--dikte, 1) + 1px);
  stroke: #FFF3D6;
  opacity: .9;
  stroke-dasharray: 140 2600;
  animation: stroomPuls 16s linear infinite;
  animation-delay: var(--vertraging, 0s);
}
@keyframes stroomPuls { from { stroke-dashoffset: 2740; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .lichtstroom__puls { display: none; }
}

/* ---------- Waarom ik dit doe: visie leidt tot missie ----------
 * Een petrolvlak waar de lichtstroom zacht doorheen schijnt. Visie en missie
 * zijn twee glazen panelen met een eigen teken (horizon en route), en een
 * gouden verbinding ertussen, want de missie begint met "Daarom". */
.missie--band {
  position: relative;
  padding-block: clamp(64px, 9vw, 128px);
  color: var(--color-text-inverse);
}
body:has(.aurora) main > .missie--band,
.missie--band {
  background:
    radial-gradient(ellipse 40% 60% at 90% 0%, color-mix(in srgb, var(--aurora-goud) 16%, transparent), transparent 70%),
    linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--olive-deep) 90%, transparent) 8%, color-mix(in srgb, var(--olive-deep) 90%, transparent) 92%, transparent 100%);
}
.missie-band__kop { display: grid; gap: .6rem; margin-block-end: clamp(36px, 5vw, 64px); }
.missie-band__label { margin: 0; font: 600 var(--fs-0)/1.3 var(--font-body, "DM Sans"), sans-serif; color: var(--aurora-goudlicht); }
.missie-band__titel { margin: 0; font: 800 var(--fs-5)/1.02 var(--font-heading); letter-spacing: -.02em; color: var(--cream); max-width: 16ch; }

.vm { display: grid; gap: 14px; align-items: stretch; }
.vm__paneel {
  position: relative;
  display: grid;
  gap: 1rem;
  align-content: start;
  padding: clamp(24px, 3vw, 40px);
  border-radius: 26px;
  background:
    linear-gradient(160deg, rgba(247, 244, 239, .12), rgba(247, 244, 239, .03) 55%),
    color-mix(in srgb, var(--olive-deep) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--aurora-goudlicht) 38%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 243, 214, .18), 0 30px 60px -30px rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.vm__boven { display: flex; align-items: center; gap: 14px; }
.vm__teken {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--aurora-goudlicht) 40%, transparent), transparent 70%), color-mix(in srgb, var(--olive) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--aurora-goudlicht) 55%, transparent);
  box-shadow: 0 0 24px -4px color-mix(in srgb, var(--aurora-goud) 60%, transparent);
}
.vm__teken svg { width: 30px; height: 30px; fill: none; stroke: var(--aurora-goudlicht); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vm__soort { margin: 0; font: 700 var(--fs-2)/1.1 var(--font-heading); color: var(--cream); }
.vm__paneel p { margin: 0; font: 400 var(--fs-1)/1.5 var(--font-body, "DM Sans"), sans-serif; color: var(--cream); max-width: 36ch; }

.vm__brug { display: grid; place-items: center; gap: 6px; color: var(--aurora-goudlicht); font: 600 var(--fs--1)/1 var(--font-body, "DM Sans"), sans-serif; padding-block: 4px; }
.vm__brug svg { width: 26px; height: 40px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--aurora-goud) 70%, transparent)); }

.missie-band__meer { margin-block-start: clamp(28px, 4vw, 48px); }
.missie-band__meer a { color: var(--aurora-goudlicht); font-weight: 700; }
.missie-band__meer a:focus-visible { outline: 2px solid var(--aurora-goudlicht); outline-offset: 3px; }

@media (min-width: 861px) {
  .vm { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0 20px; align-items: center; }
  .vm__paneel { align-self: stretch; }
  .vm__brug svg { transform: rotate(-90deg); }
}

/* ---------- Ronde 2 (27 september): koppelzinnen en een compactere telefoon ---------- */
.missie-band__lead { margin: .4rem 0 0; font: 400 var(--fs-1)/1.5 var(--font-body, "DM Sans"), sans-serif; color: color-mix(in srgb, var(--cream) 88%, transparent); max-width: 58ch; }
.vm__soort { font-size: var(--fs-1); }
.vm__paneel p { font-size: var(--fs-0); line-height: 1.55; }
.vm__teken { width: 46px; height: 46px; }
.vm__teken svg { width: 24px; height: 24px; }

.nu2__brug {
  margin: 0;
  max-width: 60ch;
  font: 600 var(--fs-2)/1.3 var(--font-heading);
  color: var(--olive);
  padding-inline-start: 18px;
  border-inline-start: 3px solid var(--lime);
}

@media (max-width: 860px) {
  /* Waar loop je nu tegenaan: klein beeld naast de tekst. */
  body:has(.aurora) .tegenaan .scene { grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 14px; }
  body:has(.aurora) .tegenaan .scene__beeld { order: 0; aspect-ratio: 1; border-radius: 14px; }
  body:has(.aurora) .tegenaan .scene__beeld img { height: 100%; object-fit: cover; }
  body:has(.aurora) .tegenaan .scene + .scene { margin-block-start: var(--sp-2); }

  /* Het eerste gesprek: idem. */
  body:has(.aurora) #werkwijze .gesprek__stappen { gap: var(--sp-2); }
  body:has(.aurora) #werkwijze .gesprek__stap { grid-template-columns: 92px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: .3rem; max-width: none; align-content: center; }
  body:has(.aurora) #werkwijze .gesprek__stapbeeld { grid-row: 1 / span 2; align-self: center; margin: 0; aspect-ratio: 1; border-radius: 14px; }
  body:has(.aurora) #werkwijze .gesprek__stapbeeld img { height: 100%; object-fit: cover; }

  /* Wat het voor jouw zaak betekent: twee aan twee. */
  body:has(.aurora) .nu2__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body:has(.aurora) .nu2__vak { padding: 14px; border-radius: 14px; gap: .25rem; }
  body:has(.aurora) .nu2__icoon { width: 30px; height: 30px; }
  body:has(.aurora) .nu2__naam { font-size: var(--fs-0); }
  body:has(.aurora) .nu2__wat { font-size: .88rem; line-height: 1.45; }
  body:has(.aurora) .nu2__brug { font-size: var(--fs-1); }

}

/* ---------- Ronde 3: ruimte, gecentreerde beelden en subtiele tekstvlakken ---------- */
/* De brug staat even ver van de beelden erboven als van het blok eronder. */
.nu2__brug { margin-block: var(--sp-2) 0; }

/* Een subtiel vlak onder losse tekst die over de lichtstroom loopt: lichter dan
   de witte kaarten, net genoeg om de lijnen achter de letters te dempen. */
body:has(.aurora) #werkwijze .gesprek__stap {
  padding: 14px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--cream) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--olive) 8%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
@media (max-width: 860px) {
  body:has(.aurora) .tegenaan .scene {
    padding: 12px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--cream) 72%, transparent);
    border: 1px solid color-mix(in srgb, var(--olive) 8%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}

/* Stresstest ronde 3: op 320 pixels was "zelfstandigen" in de grote kop breder
   dan het scherm, en zonder backdrop-filter werd het tekstvlak te doorzichtig. */
.missie-band__kop > * { min-width: 0; }
.missie-band__titel { overflow-wrap: break-word; hyphens: auto; }
/* 28 september 2026: op de telefoon stond de kop in vier regels van één of twee
   woorden. Tot 600 pixels kleiner en zonder maximale breedte, zodat hij in twee
   regels past. */
@media (max-width: 600px) {
  .missie-band__titel { font-size: var(--fs-3); max-width: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body:has(.aurora) #werkwijze .gesprek__stap,
  body:has(.aurora) .tegenaan .scene { background: color-mix(in srgb, var(--cream) 94%, transparent); }
}

/* Codex, ronde 2: niet printen. Op de telefoon stond het bewegende lichtje uit,
   omdat de laag met gloed dan elke frame opnieuw getekend werd. Sinds
   28 september 2026 tekent aurora.js onder 861 pixels geen gloedlaag en maar
   vier lichtjes, en mag het lichtje daar weer lopen. */
@media print {
  .aurora, .lichtstroom { display: none !important; }
}

/* Op de telefoon zijn de marges smal en loopt de stroom door leestekst heen.
   Daar staat hij zachter, in één keer, in plaats van met een vlak per blok. */
@media (max-width: 860px) {
  .lichtstroom { opacity: .5; }
}

/* ---------- Waarom Ares Flow (28 september 2026) ----------
 * Drie redenen onder de panelen voor visie en missie, in dezelfde band. Zo staat
 * alles over waarom op één plek, zoals "Waarom kies je voor Irixs?" daar. */
.waarom { display: grid; gap: 1.2rem; margin-block-start: clamp(44px, 6vw, 80px); }
.waarom__kop { margin: 0; font: 800 var(--fs-3)/1.1 var(--font-heading); letter-spacing: -.01em; color: var(--cream); }
.waarom__lijst { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.waarom__item {
  display: grid;
  gap: .6rem;
  align-content: start;
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: 20px;
  background: color-mix(in srgb, var(--olive-deep) 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--aurora-goudlicht) 26%, transparent);
}
.waarom__item svg { width: 28px; height: 28px; fill: none; stroke: var(--aurora-goudlicht); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.waarom__naam { margin: 0; font: 700 var(--fs-1)/1.2 var(--font-heading); color: var(--cream); }
.waarom__item p { margin: 0; font: 400 var(--fs-0)/1.5 var(--font-body, "DM Sans"), sans-serif; color: color-mix(in srgb, var(--cream) 88%, transparent); }
/* Drie redenen sinds de winkel eruit is: onder elkaar op de telefoon, naast
   elkaar vanaf 861 pixels. */
@media (min-width: 861px) {
  .waarom__lijst { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}