/* ==========================================================================
   HomeZero effects layer (business + consumer). Laadt NA style.css en extra.css.
   Alleen aanvullingen op de bestaande tokens. Progressive enhancement:
   zonder JS en bij prefers-reduced-motion blijft alles zichtbaar en bruikbaar.
   Secties: 1 Tokens | 2 Hero mesh + orbs | 3 Hero-visual | 4 Sectiekoppen
   5 Sectie-scheidingen | 6 Kaarten | 7 Badge-pulse | 8 Knoppen
   9 Scroll-reveal | 10 Scene | 11 Reduced motion + print
   Animaties gebruiken alleen transform en opacity.
   ========================================================================== */

/* 1. TOKENS --------------------------------------------------------------- */
:root {
  --fx-1: #6366f1; --fx-2: #a855f7; --fx-3: #22d3ee;  /* kleuren voor mesh, orbs, randen */
  --fx-text-a: var(--accent); --fx-text-b: #a5b4fc;     /* kopverloop, dark: 11:1 en 9:1 */
  --fx-orb-o: .30;                                      /* orb-dekking, laag genoeg voor tekstcontrast */
  --fx-glow: color-mix(in srgb, var(--brand) 55%, transparent);
}
.theme-consumer { --fx-1: #a855f7; --fx-2: #e879f9; --fx-3: #818cf8; --fx-text-b: #f0abfc; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --fx-3: #0891b2; --fx-text-a: var(--brand); --fx-text-b: var(--brand-2); --fx-orb-o: .18; }
  :root:not([data-theme="dark"]) .theme-consumer { --fx-3: #7c3aed; }
}
:root[data-theme="light"] { --fx-3: #0891b2; --fx-text-a: var(--brand); --fx-text-b: var(--brand-2); --fx-orb-o: .18; }
:root[data-theme="light"] .theme-consumer { --fx-3: #7c3aed; }

/* 2. HERO: gradient-mesh + zwevende orbs ---------------------------------- */
.hero { position: relative; isolation: isolate; overflow: clip; }
/* Mesh: een te grote laag met drie radiale kleurvlekken die traag drijft. */
.hero::before {
  content: ""; position: absolute; inset: -25% -15%; z-index: -2; pointer-events: none; will-change: transform;
  background:
    radial-gradient(38% 42% at 18% 28%, color-mix(in srgb, var(--fx-1) 38%, transparent), transparent 70%),
    radial-gradient(34% 40% at 82% 24%, color-mix(in srgb, var(--fx-2) 30%, transparent), transparent 70%),
    radial-gradient(40% 44% at 56% 86%, color-mix(in srgb, var(--fx-3) 22%, transparent), transparent 70%);
  animation: fx-mesh 36s ease-in-out infinite alternate;
}
@keyframes fx-mesh {
  from { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  to   { transform: translate3d(-3%, 2.5%, 0) rotate(7deg) scale(1.12); }
}
/* Orbs: .hero__orbs wordt door effects.js ingevoegd als het ontbreekt. Positie via translate (parallax),
   zweven via transform, zodat de twee elkaar niet in de weg zitten. */
.hero__orbs { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; opacity: var(--fx-orb-o); will-change: transform, translate;
  background: radial-gradient(circle at 35% 35%, var(--fx-c, var(--fx-1)) 0, transparent 68%);
  translate: calc(var(--px, 0) * var(--d, 20) * 1px) calc((var(--py, 0) * var(--d, 20) + var(--sy, 0) * var(--d, 20) * 3) * 1px);
  animation: fx-drift var(--t, 22s) ease-in-out infinite alternate; }
.orb--1 { --fx-c: var(--fx-1); --d: -36; --t: 24s; width: clamp(240px, 40vw, 520px); aspect-ratio: 1; top: -14%; left: -9%; }
.orb--2 { --fx-c: var(--fx-2); --d: 28;  --t: 28s; width: clamp(200px, 34vw, 440px); aspect-ratio: 1; top: 6%; right: -10%; animation-delay: -6s; }
.orb--3 { --fx-c: var(--fx-3); --d: 52;  --t: 20s; width: clamp(180px, 28vw, 360px); aspect-ratio: 1; bottom: -22%; left: 38%; animation-delay: -11s; }
@keyframes fx-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(5%, -7%, 0) scale(1.1); }
}

/* 3. HERO-VISUAL: diepte voor het bestaande ringen-beeld ------------------ */
.hero-visual__chip { animation: fx-float 6s ease-in-out infinite;
  box-shadow: var(--shadow), 0 0 24px -6px color-mix(in srgb, var(--fx-1) 60%, transparent); }
.hero-visual__chip:nth-child(3) { animation-delay: -1.5s; }
.hero-visual__chip:nth-child(4) { animation-delay: -3s; }
.hero-visual__chip:nth-child(5) { animation-delay: -4.5s; }
.hero-visual__core { box-shadow: 0 0 70px var(--glow-1), 0 0 0 10px var(--glow-2), 0 0 120px -10px color-mix(in srgb, var(--fx-2) 60%, transparent); }
@keyframes fx-float { 50% { transform: translate3d(0, -8px, 0); } }

/* 4. SECTIEKOPPEN: kleurverloop (statisch, geen animatie) ----------------- */
.section-head h2, .cta-panel h2 { color: var(--text); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .section-head h2, .cta-panel h2 {
    background: linear-gradient(100deg, var(--text) 0%, var(--fx-text-a) 55%, var(--fx-text-b) 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
}
.eyebrow::before { content: ""; display: inline-block; width: 1.6rem; height: 2px; margin-right: .6em; vertical-align: middle;
  border-radius: 2px; background: linear-gradient(90deg, var(--fx-3), var(--fx-2)); }

/* 5. SECTIE-SCHEIDINGEN: diagonaal (standaard) of golf (.section--wave) --- */
/* De alternerende secties krijgen een schuine boven- en onderrand. De rand van style.css vervalt. */
.section--alt { position: relative; border-block: 0; --fx-cut: clamp(24px, 4vw, 56px); }
.section--alt::before, .section--alt::after { content: ""; position: absolute; left: 0; right: 0; height: var(--fx-cut);
  background: var(--bg-alt); pointer-events: none; }
.section--alt::before { bottom: calc(100% - 1px); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.section--alt::after  { top: calc(100% - 1px);    clip-path: polygon(0 0, 100% 0, 0 100%); }
/* Golfvariant: zet .section--wave naast .section--alt. */
.section--wave::before, .section--wave::after { clip-path: none; height: calc(var(--fx-cut) * .8);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30C200 0 400 60 600 30S1000 0 1200 30V60H0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30C200 0 400 60 600 30S1000 0 1200 30V60H0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.section--wave::after { transform: scaleY(-1); }

/* 6. KAARTEN: gradientrand, spotlight, lift ------------------------------- */
.card, .spot { isolation: isolate; }
.card > * { position: relative; z-index: 1; }
/* Gradientrand: alleen de 1px rand is zichtbaar (mask-composite). Hover of highlight toont hem. */
.card::before {
  content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none; z-index: 2; opacity: 0;
  background: linear-gradient(135deg, var(--fx-3), var(--fx-1) 45%, var(--fx-2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: opacity .3s ease; }
/* Spotlight: volgt de muis via --mx en --my (gezet door effects.js). */
.card::after, .spot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; opacity: 0;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--fx-1) 24%, transparent), transparent 70%);
  transition: opacity .3s ease; }
.spot { position: relative; }
.card--highlight { border-color: transparent; box-shadow: var(--shadow), 0 0 44px -14px var(--fx-glow);
  background-image: linear-gradient(160deg, color-mix(in srgb, var(--fx-1) 16%, transparent), transparent 55%); }
.card--highlight::before { opacity: 1; }
@media (hover: hover) {
  .card { transition: border-color .25s ease, transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease; }
  .card:hover { transform: translateY(-6px);
    box-shadow: 0 28px 48px -22px rgba(0, 0, 0, .55), 0 0 34px -12px var(--fx-glow); }
  .card:hover::before, .card:hover::after, .spot:hover::after { opacity: 1; }
}
@media (hover: hover) and (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .card:hover { box-shadow: 0 24px 44px -22px rgba(15, 23, 42, .3), 0 0 30px -14px var(--fx-glow); } }
@media (hover: hover) { :root[data-theme="light"] .card:hover { box-shadow: 0 24px 44px -22px rgba(15, 23, 42, .3), 0 0 30px -14px var(--fx-glow); } }

/* 7. BADGE-PULSE ("Pilot, by hand" en elke beschikbare status) ------------- */
.badge--available, .badge--pulse { position: relative; }
.badge--available::before, .badge--pulse::before { animation: fx-dot 2.4s ease-in-out infinite; }
.badge--available::after, .badge--pulse::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  border: 1px solid var(--ok); opacity: 0; animation: fx-ring 2.4s ease-out infinite; }
@keyframes fx-dot  { 50% { opacity: .35; } }
@keyframes fx-ring { 0% { opacity: .7; transform: scale(1, 1); } 70%, 100% { opacity: 0; transform: scale(1.14, 1.55); } }

/* 8. KNOPPEN: lichtstreep over primaire knop bij hover -------------------- */
.btn--primary { position: relative; overflow: hidden; isolation: isolate; }
.btn--primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; pointer-events: none; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .12), transparent); transform: translateX(-130%); }
@media (hover: hover) { .btn--primary:hover::after { transform: translateX(330%); transition: transform .8s ease; } }

/* 9. SCROLL-REVEAL: alleen elementen die effects.js zelf markeert --------- */
/* Zonder JS bestaat .js-reveal niet, dus alles blijft zichtbaar. Animatie met fill "backwards":
   na afloop gelden weer de gewone stijlen, zodat hover-lift niet geblokkeerd wordt. */
.js-reveal { opacity: 0; }
.js-reveal.is-visible { opacity: 1; animation: fx-rise .7s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 80ms); }
@keyframes fx-rise { from { opacity: 0; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: none; } }

/* 10. SCENE: interactieve productscene (stage + lijst + detailpaneel) ------ */
/* Basis is de statische variant: fallback-plaatje zichtbaar, schakelaar verborgen.
   Zodra het script de scene start, zet het .is-live op .scene. */
.scene { display: grid; gap: var(--s-5); grid-template-columns: 1fr; grid-template-areas: "stage" "list" "panel" "note"; }
.scene__stage { grid-area: stage; position: relative; overflow: hidden; height: clamp(340px, 60vw, 560px);
  border: 1px solid var(--border-strong); border-radius: var(--r-lg); box-shadow: var(--shadow);
  background:
    radial-gradient(60% 50% at 20% 15%, color-mix(in srgb, var(--fx-1) 34%, transparent), transparent 70%),
    radial-gradient(50% 45% at 85% 90%, color-mix(in srgb, var(--fx-2) 26%, transparent), transparent 70%),
    linear-gradient(160deg, var(--bg-alt), var(--bg)); }
.scene__stage canvas, .scene__stage > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene__fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.scene.is-live .scene__fallback { display: none; }
.scene__list { grid-area: list; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); align-content: start; }
.scene__list button { width: 100%; min-height: 48px; padding: var(--s-3) var(--s-4); display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); text-align: left; cursor: pointer; font: 600 var(--fs-base)/1.3 var(--font); color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease; }
.scene__list button:hover { border-color: var(--border-strong); transform: translateX(3px); }
.scene__list button[aria-pressed="true"], .scene__list button[aria-current="true"] {
  border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface-solid)); }
.scene__panel { grid-area: panel; padding: var(--s-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  border-top: 3px solid var(--fx-1); }
.scene__panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); margin-bottom: var(--s-3); }
.scene__panel-name { margin: 0; font-size: var(--fs-h3); }
.scene__panel p:last-child { margin-bottom: 0; color: var(--text-dim); }
.scene__note { grid-area: note; margin: 0; padding-left: var(--s-4); border-left: 3px solid var(--border-strong);
  font-size: var(--fs-sm); color: var(--text-dim); }
@media (min-width: 960px) {
  .scene { grid-template-columns: 1.6fr 1fr; grid-template-rows: auto 1fr auto;
    grid-template-areas: "stage list" "stage panel" "note note"; align-items: start; }
}

/* 11. REDUCED MOTION + PRINT ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js-reveal { opacity: 1; }
  .hero::before, .orb, .hero-visual__chip { animation: none !important; will-change: auto; }
  .orb { translate: none; }
  .card:hover, .scene__list button:hover { transform: none; }
}
@media print {
  .hero::before, .hero__orbs, .section--alt::before, .section--alt::after { display: none; }
  .js-reveal { opacity: 1; }
  .section-head h2, .cta-panel h2 { -webkit-text-fill-color: currentColor; background: none; }
}