/*
  Eén echte @shadergradient/react-canvas loopt achter de volledige pagina.
  Secties gebruiken transparante Speaky-tinten zodat dezelfde beweging
  zichtbaar blijft zonder meerdere zware WebGL-contexten te openen.
*/

:root{
  --shader-purple:#5874FF;
  --shader-violet:#8A97FF;
  --shader-indigo:#5336E8;
  --shader-night:#21159A;
}

body{
  isolation:isolate;
  background:var(--shader-night);
}

.page-shader{
  position:fixed;
  inset:-8%;
  z-index:0;
  pointer-events:none;
  opacity:0;
  transform:scale(1.08);
  filter:hue-rotate(2deg) saturate(1.02) contrast(1.01);
  transition:opacity 1s ease;
  will-change:transform;
}

.page-shader.is-live{opacity:1}

.page-shader canvas{
  display:block;
  width:100%!important;
  height:100%!important;
}

main{
  position:relative;
  z-index:1;
}

/* Hero: bijna volledig open, zodat de echte sphere-shader hier leidend is. */
.hero{
  background:
    linear-gradient(90deg, rgba(22,11,102,.1) 0%, rgba(88,116,255,.02) 58%, rgba(32,20,128,.08) 100%)!important;
}

.hero-glow{
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(22,11,102,.12) 0%, rgba(22,11,102,0) 28%),
    linear-gradient(0deg, rgba(22,11,102,.12) 0%, rgba(22,11,102,0) 34%),
    radial-gradient(720px 600px at 90% 4%, rgba(159,173,255,.3), transparent 66%),
    radial-gradient(680px 560px at 4% 96%, rgba(77,86,226,.2), transparent 66%);
}

/* Donkerpaars: voldoende contrast, maar nog transparant genoeg voor motion. */
.creators-band,
.band-indigo{
  background:
    radial-gradient(circle at 12% 0%, rgba(118,85,231,.3) 0%, transparent 46%),
    radial-gradient(circle at 92% 100%, rgba(71,47,190,.24) 0%, transparent 48%),
    linear-gradient(142deg, rgba(46,27,167,.72) 0%, rgba(37,19,183,.67) 48%, rgba(16,5,54,.72) 100%)!important;
}

/* Diepe secties en CTA: donkerder voor rust en duidelijke witte tekst. */
.band-deep,
.final{
  background:
    radial-gradient(circle at 86% 8%, rgba(118,85,231,.26) 0%, transparent 45%),
    radial-gradient(circle at 4% 100%, rgba(93,66,216,.2) 0%, transparent 48%),
    linear-gradient(145deg, rgba(30,15,119,.82) 0%, rgba(22,11,102,.78) 54%, rgba(10,3,38,.84) 100%)!important;
}

/* De voormalige lichte secties gebruiken nu dezelfde blauwe shaderbasis als de hero. */
.band-lilac,
.brands-band{
  background:
    radial-gradient(circle at 92% 4%, rgba(139,156,255,.26) 0%, transparent 46%),
    radial-gradient(circle at 5% 100%, rgba(61,78,224,.24) 0%, transparent 48%),
    linear-gradient(142deg, rgba(44,67,216,.62) 0%, rgba(50,43,193,.57) 50%, rgba(27,18,126,.64) 100%)!important;
  color:var(--white)!important;
}

.band-lilac .kicker-dark{color:var(--green)!important}
.band-lilac h2 .outline{-webkit-text-stroke-color:var(--white)!important}
.band-lilac h2 .accent{color:var(--green)!important}
.band-lilac .lead,
.band-lilac .lead b{color:rgba(255,255,255,.82)!important}
.band-lilac .stats-strip{border-top-color:rgba(255,253,247,.22)!important}
.band-lilac .strip-stat b{color:var(--white)!important}
.band-lilac .strip-stat span{color:rgba(255,255,255,.7)!important}

/* Groen blijft een Speaky-accent, maar krijgt dezelfde levende diepte. */
.band-green{
  background:
    radial-gradient(circle at 8% 0%, rgba(255,253,247,.44) 0%, transparent 42%),
    radial-gradient(circle at 94% 100%, rgba(118,85,231,.2) 0%, transparent 46%),
    linear-gradient(135deg, rgba(91,255,125,.9) 0%, rgba(34,255,87,.86) 52%, rgba(24,213,76,.86) 100%)!important;
}

.final-glow{
  background:
    radial-gradient(820px 520px at 50% 108%, rgba(118,85,231,.36), transparent 70%),
    radial-gradient(460px 320px at 50% 112%, rgba(34,255,87,.11), transparent 72%);
}

/* ShaderGradient levert zelf grain; dubbele ruis blijft bewust minimaal. */
.hero.grain::after,
.band.grain::after,
.creators-band.grain::after,
.final.grain::after{opacity:.08}

.band.grain-soft::after,
.brands-band.grain-soft::after{opacity:.14}

@media (max-width:620px){
  .page-shader{
    inset:-5%;
    transform:scale(1.05);
  }

  .creators-band,
  .band-indigo{
    background:
      radial-gradient(circle at 8% 0%, rgba(118,85,231,.3) 0%, transparent 50%),
      linear-gradient(155deg, rgba(46,27,167,.7) 0%, rgba(37,19,183,.68) 52%, rgba(16,5,54,.75) 100%)!important;
  }

  .band-lilac,
  .brands-band{
    background:
      radial-gradient(circle at 100% 0%, rgba(139,156,255,.24) 0%, transparent 48%),
      linear-gradient(150deg, rgba(48,73,221,.62), rgba(31,22,145,.66))!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .page-shader{
    transform:none;
    transition:none;
    will-change:auto;
  }
}