/* ==========================================================
   SocialFreedom — Stable Premium Effects Layer
   Ziel:
   - Premium-Tiefe ohne Mask-/Blend-/Fixed-Fragilität
   - keine schwarzen Balken durch harte Maskenkanten
   - bewusst reduzierte Sektionseffekte
   ========================================================== */

:root{
  --fx-gold-soft: rgba(207,162,76,.10);
  --fx-gold-line: rgba(207,162,76,.06);
  --fx-white-soft: rgba(255,255,255,.035);
}

main{
  position: relative;
  isolation: isolate;
}

main::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(980px 620px at 12% 5%, var(--fx-gold-soft), transparent 60%),
    radial-gradient(760px 520px at 86% 12%, rgba(255,255,255,.03), transparent 58%),
    linear-gradient(180deg, transparent 0%, rgba(255,255,255,.008) 14%, transparent 32%, transparent 68%, rgba(207,162,76,.018) 100%);
}

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

main > section{
  position: relative;
  isolation: isolate;
}

main > section::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(680px 260px at var(--fx-x, 28%) var(--fx-y, 18%), rgba(207,162,76,.06), transparent 72%),
    linear-gradient(var(--fx-angle, 115deg), transparent 0%, transparent 42%, rgba(255,255,255,.012) 49%, transparent 56%, transparent 100%);
  opacity: var(--fx-o, 1);
}

main > section > *{
  position: relative;
  z-index: 1;
}

main > section:nth-of-type(3n+1){
  --fx-x: 20%;
  --fx-y: 12%;
  --fx-angle: 116deg;
  --fx-o: .95;
}
main > section:nth-of-type(3n+2){
  --fx-x: 82%;
  --fx-y: 18%;
  --fx-angle: 128deg;
  --fx-o: .72;
}
main > section:nth-of-type(3n){
  --fx-x: 50%;
  --fx-y: 8%;
  --fx-angle: 104deg;
  --fx-o: .82;
}

.hero::before,
.hero::after{
  z-index: 0;
}
.hero > .container{
  position: relative;
  z-index: 1;
}

@media (max-width: 980px){
  main::before{
    background:
      radial-gradient(720px 480px at 12% 4%, rgba(207,162,76,.08), transparent 58%),
      radial-gradient(540px 340px at 88% 10%, rgba(255,255,255,.02), transparent 58%);
  }

  main > section::before{
    background:
      radial-gradient(420px 180px at 24% 12%, rgba(207,162,76,.05), transparent 72%);
    opacity: .72;
  }
}

@media (prefers-reduced-motion: reduce){
  main::before,
  main > section::before{
    transition: none !important;
  }
}