/* =====================================================================
   INFINITY — Pillars-sectie: concept F "Vertical Stack" (DEFINITIEF)
   Klantkeuze 14 juli 2026 (feedback-deck): F gekozen, met de opwaartse
   finale uit concept A en de metrics als slot i.p.v. het ∞-teken.
   Styling voor de sectie uit import/31-infinity-pillars-f-section.template.json.
   Bron van het concept: prototype2/pillar-lab-f.html (daar tunen; port via
   tools/pillars/port-pillars-f.mjs). Gescoped onder .pillars-f.
   Gebruikt de site-tokens uit infinity.css (--bg/--head/--pad/…).

   Selectors dekken twee omgevingen:
   - live/Bricks:   .brxe-section.pillars-f + html.ir-js / .ir-anim
   - prototype2:    section.pillars-f + html.no-js (inline script haalt 'm weg)
   ===================================================================== */

/* de sectie zelf: hoog (scroll-afstand), met een sticky fullscreen stage.
   520svh scroll-afstand voor de animatie + 100svh OVERLAP-zone aan het eind
   (26 juli): in die laatste viewport blijft de stage staan terwijl de volgende
   sectie eroverheen schuift (500svh sinds 31 jul, was 620: klant vond het te veel scrollen; 400 animatie + 100 overlap). pillars-f.js trekt die 100svh van de voortgang af,
   dus p bereikt 1 precies op het moment dat het overschuiven begint. */
.brxe-section.pillars-f,section.pillars-f{ position:relative; display:block; height:500vh; height:500svh;
  padding:0; margin:0; background:var(--bg); }
.pillars-f__stage{ position:sticky; top:0; height:100vh; height:100svh; width:100%;
  overflow:hidden; z-index:0; }

/* ---------- overgang naar de volgende sectie ----------
   De sectie ná de pillars schuift over de stilstaande stage heen (zelfde effect
   als in de klantdemo). Het stippeldraadje dat de olielijn tot in die sectie
   doorzette is op 4 sep 2026 op verzoek van de klant vervallen (de Media-sectie
   is nu een gewone, in Bricks gekleurde sectie); pillars-f.js zet --pf-exit-x
   nog wel op de volgende sectie, maar niets gebruikt die waarde meer. */
.brxe-section.pillars-f + .brxe-section,
section.pillars-f + section{ position:relative; z-index:1; margin-top:-100vh; margin-top:-100svh; }
/* canvas wordt door pillars-f.js in de stage gezet */
.pillars-f__scene{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1; }

/* ---------- copy-blokken (bewerkbare Bricks-elementen) ---------- */
.pillars-f__copy{ position:absolute; inset:0; z-index:5; pointer-events:none; }
/* left uitgelijnd op de site-container (.wrap: max-width --max, gecentreerd + --pad),
   zodat de pillars-copy op dezelfde goot staat als de rest van de pagina (QA F6).
   top 47% + sterkere scrim (klantfeedback 14 juli / QA-F5): vaste, beschermde tekstzone */
.pf-block{ position:absolute; left:max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad))); top:47%; width:min(38ch,82vw);
  transform:translateY(-50%); }
/* pre-hide alléén wanneer JS draait (.pillars-f--live wordt door pillars-f.js
   gezet) — in de builder en zonder JS blijft de copy dus gewoon zichtbaar */
.ir-anim .pillars-f--live .pf-block,
html:not(.no-js) .pillars-f--live .pf-block{ opacity:0; transform:translateY(-50%) translateY(28px);
  will-change:opacity,transform; }
.pf-block::before{ content:""; position:absolute; inset:-3.4rem -4.6rem -3.4rem -4.8rem; z-index:-1; border-radius:2.4rem;
  /* dooft uit vóór de boxrand (100%-stop) — anders zichtbare afkap-rand op mobiel */
  background:radial-gradient(ellipse 66% 58% at 35% 50%, rgba(8,35,63,.96) 0%, rgba(8,35,63,.78) 48%, rgba(8,35,63,0) 100%); }
.pf-label{ display:flex; align-items:center; gap:.9rem; font-family:var(--head); font-weight:600; font-size:.72rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--teal-light); margin:0 0 1.2rem; }
.pf-label::before{ content:""; width:34px; height:1px; background:var(--teal-light); opacity:.85; }
h2.pf-title{ font-family:var(--head); font-weight:700; font-size:clamp(2rem,4.4vw,3.3rem); line-height:1.06;
  letter-spacing:-.02em; margin:0 0 1.1rem; color:var(--paper); }
.pf-title em{ font-style:italic; font-weight:500; color:var(--teal-light); }
.pf-text{ margin:0; font-family:var(--body); font-size:clamp(.95rem,1.25vw,1.08rem); line-height:1.65;
  color:var(--muted); max-width:44ch; }

/* ---------- metrics-finale = gecentreerde band boven de grafiek
   (klantkeuze 26 juli 2026, concept "Vier pijlers"). De container is alleen een
   positioneringsvlak; pillars-f.js hangt de kicker en de vier cijferblokken per
   frame aan canvas-ankers (METPLAN/KICK staan in de engine — tunen in het lab). */
.pf-metrics{ position:absolute; inset:0; width:auto; text-align:center; pointer-events:none; }
.pf-metrics__label{ position:absolute; display:inline-flex; align-items:center; gap:.9rem; white-space:nowrap;
  font-family:var(--head); font-weight:600; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--teal-light); margin:0; }
.pf-metrics__label::before{ content:""; width:34px; height:1px; background:var(--teal-light); opacity:.85; }
.pf-metrics__grid{ display:contents; }
.pf-stat{ position:absolute; text-align:center; }
/* pre-hide zolang JS de band nog niet heeft gepositioneerd (voorkomt een flits
   van de vier blokken op hun HTML-volgorde-positie) */
.ir-anim .pillars-f--live .pf-stat, .ir-anim .pillars-f--live .pf-metrics__label,
html:not(.no-js) .pillars-f--live .pf-stat,
html:not(.no-js) .pillars-f--live .pf-metrics__label{ opacity:0; will-change:opacity,transform; }
.pf-stat__num{ display:block; font-family:var(--head); font-weight:700; font-size:clamp(1.9rem,3.4vw,3rem);
  line-height:1; letter-spacing:-.02em; color:var(--paper); }
.pf-stat__num .sfx{ font-size:.55em; font-weight:600; color:var(--teal-light); margin-left:.08em; }
.pf-stat__label{ display:block; margin-top:.55rem; font-family:var(--head); font-weight:600; font-size:.66rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* ---------- 01/02/03-rail (door pillars-f.js gegenereerd) ---------- */
.pf-rail{ position:absolute; right:clamp(.9rem,2.4vw,2.2rem); top:50%; transform:translateY(-50%); z-index:6;
  display:flex; flex-direction:column; gap:1.7rem; pointer-events:none; }
.pf-ritem{ display:flex; align-items:center; gap:.7rem; justify-content:flex-end; }
.pf-ritem b{ font-family:var(--head); font-weight:600; font-size:.68rem; letter-spacing:.18em; color:var(--faint); transition:color .4s; }
.pf-ritem i{ width:7px; height:7px; border-radius:50%; border:1px solid rgba(90,169,199,.55); background:transparent; transition:all .4s; }
.pf-ritem.on b{ color:var(--paper); }
/* actieve rail-stip volgt de oliekleur (Bricks-variabele --oil; zilver = klantkeuze colour-study) */
.pf-ritem.on i{ background:var(--oil,#C6D6E8); border-color:var(--oil,#C6D6E8); box-shadow:0 0 12px var(--oil,#C6D6E8); }
@media (max-width:720px){ .pf-rail{ display:none; } }

/* ---------- statische fallback: reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .brxe-section.pillars-f,section.pillars-f{ height:auto; }
  /* geen overlap-zone zonder animatie: sectie volgt gewoon */
  .brxe-section.pillars-f + .brxe-section,
  section.pillars-f + section{ margin-top:0; }
  .pillars-f__stage{ position:relative; height:auto; }
  .pillars-f__scene{ z-index:0; }
  .pillars-f__copy{ position:relative; inset:auto; display:flex; flex-direction:column; justify-content:center;
    gap:2.6rem; padding:6rem var(--pad); min-height:100vh; min-height:100svh; }
  .pf-block{ position:static; width:min(38ch,92vw); opacity:1 !important; transform:none !important; }
  .pf-metrics{ position:static; inset:auto; width:auto; text-align:left; opacity:1 !important; transform:none !important; }
  .pf-metrics__label{ position:static; opacity:1 !important; margin-bottom:1.6rem; }
  .pf-metrics__grid{ display:grid; grid-template-columns:repeat(2,auto); gap:1.6rem 2.2rem; justify-content:start; }
  .pf-stat{ position:static; text-align:left; opacity:1 !important; transform:none !important; }
  .pf-rail{ display:none; }
}

/* ---------- statische fallback: geen JS (copy zou anders overlappen) ---------- */
html:not(.ir-js):not(.no-js) .brxe-section.pillars-f,html.no-js section.pillars-f{ height:auto; }
html:not(.ir-js):not(.no-js) .brxe-section.pillars-f + .brxe-section,html.no-js section.pillars-f + section{ margin-top:0; }
html:not(.ir-js):not(.no-js) .brxe-section.pillars-f .pillars-f__stage,html.no-js section.pillars-f .pillars-f__stage{ position:relative; height:auto; }
html:not(.ir-js):not(.no-js) .brxe-section.pillars-f .pillars-f__copy,html.no-js section.pillars-f .pillars-f__copy{ position:relative; inset:auto; display:flex; flex-direction:column; justify-content:center;
  gap:2.6rem; padding:6rem var(--pad); min-height:100vh; min-height:100svh; }
html:not(.ir-js):not(.no-js) .brxe-section.pillars-f .pf-block,html.no-js section.pillars-f .pf-block{ position:static; width:min(38ch,92vw); transform:none; }
html:not(.ir-js):not(.no-js) .brxe-section.pillars-f .pf-metrics,html.no-js section.pillars-f .pf-metrics{ position:static; inset:auto; width:auto; text-align:left; transform:none; }
html:not(.ir-js):not(.no-js) .brxe-section.pillars-f .pf-metrics__label,html.no-js section.pillars-f .pf-metrics__label{ position:static; margin-bottom:1.6rem; }
html:not(.ir-js):not(.no-js) .brxe-section.pillars-f .pf-metrics__grid,html.no-js section.pillars-f .pf-metrics__grid{ display:grid; grid-template-columns:repeat(2,auto); gap:1.6rem 2.2rem; justify-content:start; }
html:not(.ir-js):not(.no-js) .brxe-section.pillars-f .pf-stat,html.no-js section.pillars-f .pf-stat{ position:static; text-align:left; }