/* ─────────────────────────────────────────────────────────────
   IVG — Components
   Depends on tokens.css + base.css.

   Grens tussen lagen:
   - base.css:      typografie- en layout-primitieven (overline,
                    display/h1-h6, prose, containers, rules).
                    Deel van elke pagina, geen zelfstandige blokken.
   - components.css: zelfstandige, herbruikbare blokken met eigen
                    interne compositie (ripple-diagram, journey-
                    creature, tile-set, etc.). Één blok = één
                    duidelijke bewoner in het DOM.

   Splitsen in losse componentbestanden pas bij drie of meer
   componenten. Tot dan blijft alles in dit ene bestand met
   duidelijke sectie-koppen per component.

   Importvolgorde overal:
     tokens.css  →  base.css  →  components.css  →  paginaspecifiek

   Class-prefix `ivg-` (identiek aan base.css) om collisions met
   bestaande per-pagina styles te vermijden tijdens de migratie.
   Uitzondering: componenten die uit een bestaande pagina worden
   geëxtraheerd (zoals ripple-diagram) behouden hun originele
   class-namen. Hernoemen zou elke referentie in de markup moeten
   raken zonder functioneel voordeel; het prefix geldt voor nieuw
   geschreven componenten.
   ───────────────────────────────────────────────────────────── */

/* ── RIPPLE DIAGRAM ──
   Decision-cascade visual: vijf niveaus (ingredient -> lifestyle)
   als concentrische golven vanaf een centrale steen. Interactie
   (hover/klik/levels) via inline <script> per instantie (rpSelect,
   fireWave), ongewijzigd overgenomen uit boardroom.html.

   Herkomst: geëxtraheerd uit boardroom.html (C3). Framework.html
   heeft een verbatim kopie van dit component staan die nog niet naar
   hier verwezen is (buiten C3-scope, JK-beslissing 2026-07-07).

   --ease-out-soft (lokaal, cubic-bezier(0.22,1,0.36,1)) verving
   1-op-1 door --ivg-ease-out (identieke curve). --pond-cx/--pond-cy
   (lokaal :root in de oorspronkelijke pagina) waren dode code: nul
   referenties, ook transform-origin gebruikte al hardcoded 200px/320px.
   Beide dus niet overgenomen.

   .ripple-tabs/.ripple-tab (audience-switcher) hadden geen enkele
   markup-referentie (geen rpTab-functie, geen tab-buttons in de DOM):
   dode CSS uit een eerdere multi-audience-versie, niet overgenomen.

   rgba(58,74,34,X)-familie (alpha-blends van --ivg-green) blijft
   letterlijk: CSS custom properties dragen geen los R/G/B-kanaal om
   in rgba() te hergebruiken zonder relative-color-syntax, en die
   heeft geen bredere browserdekking op een marketing-site. */
.ripple-wrap { display:grid; grid-template-columns:1fr 360px; gap:3rem; align-items:center; max-width:1000px; margin:0 auto; }
@media(max-width:820px){.ripple-wrap{grid-template-columns:1fr}}
.ripple-stage { padding:var(--ivg-s-2); border-radius:28px; background:linear-gradient(180deg,rgba(58,74,34,.04),rgba(58,74,34,.02)); box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 .5px rgba(58,74,34,.12),0 24px 48px -24px rgba(58,74,34,.18); }
.ripple-stage-inner { position:relative; border-radius:22px; overflow:hidden; background:radial-gradient(ellipse 85% 75% at 38% 76%,rgba(232,237,216,.55) 0%,rgba(247,244,238,1) 48%,rgba(226,232,210,.55) 100%); box-shadow:inset 0 1px 1px rgba(255,255,255,.85),inset 0 -20px 40px rgba(58,74,34,.06),inset 0 0 0 .5px rgba(58,74,34,.08); }
.ripple-stage-inner::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.08; mix-blend-mode:multiply; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.23  0 0 0 0 0.29  0 0 0 0 0.13  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.ripple-stage-inner::after { content:""; position:absolute; top:0; left:0; right:0; height:40%; pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0)); border-top-left-radius:22px; border-top-right-radius:22px; }
.pond-contour { fill:none; stroke:rgba(58,74,34,.07); stroke-width:.6; }
.pond-contour.accent { stroke:rgba(58,74,34,.12); stroke-dasharray:2 3; }
.ripple-svg { width:100%; height:auto; cursor:pointer; overflow:visible; display:block; position:relative; z-index:1; }
.ripple-stone-g { transform-origin:200px 320px; animation:stoneFall 1.1s cubic-bezier(.4,0,.2,1) .2s both; }
@keyframes stoneFall { 0%{transform:translate(0,-36px) scale(.85);opacity:0} 100%{transform:translate(0,0) scale(1);opacity:.65} }
.ripple-stone { fill:var(--ivg-green); }
.intro-wave { fill:none; stroke:var(--ivg-green-light); stroke-width:.9; transform-origin:200px 320px; opacity:0; will-change:transform,opacity; animation:introWave 3.6s cubic-bezier(.22,.6,.36,1) forwards; pointer-events:none; }
.intro-wave.w1{animation-delay:1.05s} .intro-wave.w2{animation-delay:1.45s} .intro-wave.w3{animation-delay:1.85s}
@keyframes introWave { 0%{transform:scale(.7);opacity:0;stroke-width:1.1} 10%{opacity:.32} 60%{opacity:.18} 100%{transform:scale(30);opacity:0;stroke-width:.08} }
.hover-wave { fill:none; stroke:var(--ivg-green-light); stroke-width:.9; transform-origin:200px 320px; opacity:0; pointer-events:none; transform:scale(.4); }
.hover-wave.firing { animation:hoverWave 1.6s cubic-bezier(.22,.6,.36,1) forwards; }
@keyframes hoverWave { 0%{transform:scale(.7);opacity:0;stroke-width:1.1} 15%{opacity:.28} 100%{transform:scale(var(--hover-scale,12));opacity:0;stroke-width:.1} }
.click-wave { fill:none; stroke:var(--ivg-green-mid); stroke-width:1.1; transform-origin:200px 320px; opacity:0; pointer-events:none; transform:scale(.4); }
.click-wave.firing { animation:clickWave 2.2s cubic-bezier(.22,.6,.36,1) forwards; }
@keyframes clickWave { 0%{transform:scale(.7);opacity:0;stroke-width:1.3} 12%{opacity:.45} 60%{opacity:.2} 100%{transform:scale(var(--click-scale,14));opacity:0;stroke-width:.1} }
.click-wave.trailer { stroke:var(--ivg-green-light); stroke-width:.8; }
.click-wave.trailer.firing { animation:clickWave 2.2s cubic-bezier(.22,.6,.36,1) .32s forwards; }
.level-station { cursor:pointer; transition:filter .3s var(--ivg-ease-out); }
.level-station .station-dot { transition:r .3s var(--ivg-ease-out),fill .3s; transform-origin:center; }
.level-station:hover .station-dot { r:9; }
.level-station.active .station-dot { r:10; filter:drop-shadow(0 0 8px currentColor); }
.level-station .station-label { font-family:var(--ivg-serif); font-size:16px; font-weight:500; pointer-events:none; transition:font-size .3s var(--ivg-ease-out),opacity .3s; opacity:.85; }
.level-station.active .station-label { font-size:18px; opacity:1; }
.level-station .station-meta { font-family:var(--ivg-sans); font-size:9px; letter-spacing:.14em; text-transform:uppercase; pointer-events:none; opacity:.55; }
.level-station.pulsed .station-dot { animation:stationPulse 1.1s cubic-bezier(.22,.6,.36,1); }
@keyframes stationPulse { 0%{transform:scale(1)} 35%{transform:scale(1.22)} 100%{transform:scale(1)} }
.ambient-wave { fill:none; stroke:var(--ivg-green-light); stroke-width:.45; transform-origin:200px 320px; opacity:0; pointer-events:none; }
.ambient-wave.a1{animation:ambientRipple 7s ease-in-out 0s infinite}
.ambient-wave.a2{animation:ambientRipple 9s ease-in-out 2.8s infinite}
.ambient-wave.a3{animation:ambientRipple 8s ease-in-out 5.5s infinite}
@keyframes ambientRipple { 0%{transform:scale(.4);opacity:0;stroke-width:.55} 12%{opacity:.065} 70%{opacity:.025} 100%{transform:scale(18);opacity:0;stroke-width:.04} }
.pond-light { position:absolute; inset:0; pointer-events:none; border-radius:22px; background:radial-gradient(ellipse 55% 22% at 38% 18%,rgba(255,255,255,.3) 0%,transparent 68%); animation:pondLightDrift 14s ease-in-out infinite; z-index:0; }
@keyframes pondLightDrift { 0%,100%{transform:translate(-4%,-6%) scale(1.05);opacity:.7} 30%{transform:translate(6%,2%) scale(.92);opacity:1} 65%{transform:translate(0%,9%) scale(1.1);opacity:.55} }
@media(prefers-reduced-motion:reduce){.pond-wave,.ambient-wave,.pond-light{animation:none}.ripple-stone-g{animation-duration:.4s}.level-station .station-dot{animation:none}}
.ripple-panel { background:#fff; border:.5px solid rgba(58,74,34,.14); border-radius:3px; padding:1.75rem 1.8rem 1.5rem; min-height:280px; transition:opacity .3s var(--ivg-ease-out); position:relative; }
.ripple-panel .p-tag { position:relative; padding-top:.9rem; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ivg-green-light); margin-bottom:.6rem; }
.ripple-panel .p-tag::before { content:""; position:absolute; top:0; left:0; width:28px; height:1px; background:var(--ivg-green-light); }
.ripple-panel .p-title { font-family:var(--ivg-serif); font-size:24px; margin-bottom:1rem; line-height:1.2; color:var(--ivg-green); }
.ripple-panel .p-body { font-size:14px; line-height:1.7; color:var(--ivg-ink-soft); }
.ripple-panel .p-example { margin-top:.8rem; font-size:13px; line-height:1.7; color:var(--ivg-ink-muted); font-style:italic; }