/* ============================================================
   hero3d.css - ModernizeNow, 3D-hero
   ------------------------------------------------------------
   Twee delen:
   1) KERN - de 3D-scenecontainer en de statische fallback. Dit heeft
      hero3d.js nodig en hoort bij elke integratie.
   2) HERO-LAYOUT - een compacte hero-opmaak (tekst + kicker + knoppen)
      zodat dit bestand ook los werkt, zoals in hero3d-demo.html.
      Komt overeen met de bestaande .hero/.hero-grid/.knop-klassen uit
      huisstijl.css. Draait huisstijl.css al op de pagina, gebruik dan
      gerust alleen deel 1 en laat deel 2 weg.

   Alle kleuren/maten gebruiken var(--token, fallback): sluit dus
   vanzelf aan bij huisstijl.css als die al geladen is, en werkt met
   dezelfde hex-waarden als die er niet is.
   ============================================================ */

/* ---- basisreset (sla over als je al een reset/huisstijl.css hebt) ---- */
.hero3d-demo{ box-sizing:border-box; }
.hero3d-demo *, .hero3d-demo *::before, .hero3d-demo *::after{ box-sizing:inherit; }

/* ============================================================
   1) KERN - 3D-scenecontainer (nodig voor hero3d.js)
   ============================================================ */
.scene-visual{
  position:relative;
  width:100%;
  height:min(64svh,580px);
  border-radius:var(--radius-l, 24px);
  overflow:hidden;
  background:
    radial-gradient(ellipse 90% 90% at 50% 40%, rgba(58,185,228,.08), transparent 70%),
    var(--navy-2, #0F2440);
  border:1px solid var(--lijn-donker, rgba(234,246,252,.14));
  box-shadow:var(--schaduw-donker, 0 30px 80px -28px rgba(0,0,0,.55), 0 10px 26px -12px rgba(0,0,0,.4));
  isolation:isolate;
}
.scene-visual canvas{
  position:absolute;inset:0;
  width:100% !important;height:100% !important;
  display:block;
  z-index:1;
}
/* statische fallback: geen WebGL, geen kapotte pagina */
.scene-fallback{
  position:absolute;inset:0;z-index:1;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(circle at 30% 30%, rgba(58,185,228,.35), transparent 45%),
    radial-gradient(circle at 70% 65%, rgba(79,190,148,.28), transparent 45%),
    var(--navy-2, #0F2440);
}
.scene-fallback svg{ width:62%;max-width:340px;opacity:.9; }

@media(max-width:980px){
  .scene-visual{ height:min(58svh,420px); }
}
@media(max-width:480px){
  .scene-visual{ height:min(46svh,340px);border-radius:var(--radius, 16px); }
}

@media(prefers-reduced-motion:reduce){
  /* hero3d.js zet de animatielus zelf al stil; dit voorkomt alleen
     dat een eventuele CSS-overgang op de fallback nog beweegt */
  .scene-fallback,.scene-fallback *{ transition:none !important;animation:none !important; }
}

/* ============================================================
   2) HERO-LAYOUT (voorbeeld) - alleen nodig als je geen eigen
      huisstijl.css met .hero/.knop-klassen laadt
   ============================================================ */
.hero3d-demo{
  background:var(--navy, #0B1D33);
  color:var(--ice, #EAF6FC);
  font-family:var(--font-body, 'Inter', system-ui, sans-serif);
  -webkit-font-smoothing:antialiased;
}
.hero3d-demo .hero{
  position:relative;
  padding:clamp(64px,8vw,110px) 0 clamp(70px,8vw,120px);
  background:var(--navy, #0B1D33);
  overflow:hidden;
  isolation:isolate;
}
.hero3d-demo .hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 65% 55% at 78% 20%, rgba(58,185,228,.22), transparent 62%),
    radial-gradient(ellipse 50% 45% at 10% 90%, rgba(79,190,148,.14), transparent 60%);
}
.hero3d-demo .hero-grid{
  position:relative;z-index:1;
  max-width:var(--container, min(1360px,92vw));
  margin:0 auto;padding:0 24px;
  display:grid;
  grid-template-columns:minmax(320px,1fr) minmax(300px,.9fr);
  gap:clamp(40px,6vw,90px);
  align-items:center;
}
@media(max-width:980px){
  .hero3d-demo .hero-grid{ grid-template-columns:1fr; }
}
.hero3d-demo .kicker{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size:.74rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue, #3AB9E4);
  margin-bottom:18px;
}
.hero3d-demo .kicker::before{ content:"";width:30px;height:1.5px;background:currentColor;flex-shrink:0; }
.hero3d-demo .hero-tekst h1{
  color:var(--ice, #EAF6FC);
  font-family:var(--font-kop, 'Space Grotesk', system-ui, sans-serif);
  font-weight:700;line-height:1.04;letter-spacing:-.022em;
  font-size:clamp(2.75rem,3.4vw + 2rem,5.4rem);
  margin:0;
}
.hero3d-demo .hero-tekst .lead{
  color:var(--ice-70, rgba(234,246,252,.72));
  font-size:clamp(1.15rem,.5vw + 1.05rem,1.4rem);
  line-height:1.5;max-width:52ch;
  margin:22px 0 0;
}
.hero3d-demo .hero-ctas{ display:flex;gap:16px;flex-wrap:wrap;margin-top:36px; }
.hero3d-demo .knop{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size:.8rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  padding:19px 36px;border-radius:var(--radius-s, 8px);border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:transform .25s var(--ease, cubic-bezier(.22,1,.36,1)), box-shadow .25s var(--ease, cubic-bezier(.22,1,.36,1)), background .2s, border-color .2s, color .2s;
}
.hero3d-demo .knop:hover{ transform:translateY(-3px); }
.hero3d-demo .knop:active{ transform:translateY(-1px); }
.hero3d-demo .knop--primair{
  background:var(--blue, #3AB9E4);color:var(--navy, #0B1D33);
  box-shadow:var(--gloed-blauw, 0 0 0 1px rgba(58,185,228,.35), 0 20px 50px -18px rgba(58,185,228,.35));
}
.hero3d-demo .knop--primair:hover{ background:var(--blue-2, #8AD6EF); }
.hero3d-demo .knop--secundair{
  border-color:var(--lijn-donker, rgba(234,246,252,.14));
  color:var(--ice, #EAF6FC);background:transparent;
}
.hero3d-demo .knop--secundair:hover{ border-color:var(--blue-2, #8AD6EF);color:var(--blue-2, #8AD6EF); }

@media(max-width:480px){
  .hero3d-demo .hero{ padding-top:calc(var(--nav-h, 76px) + 40px); }
  .hero3d-demo .knop{ padding:14px 22px;font-size:.74rem; }
}

@media(prefers-reduced-motion:reduce){
  .hero3d-demo *{ scroll-behavior:auto; }
  .hero3d-demo .knop{ transition:none; }
}