/* =========================================================================
   Racoon – Bewegter Hintergrund (Parallax) + Scroll-Reveal
   Alles GPU-freundlich (transform/opacity), DSGVO-konform, keine externen Assets.
   ========================================================================= */

/* ---- Fixierter Hintergrund-Stack hinter dem gesamten Content ---- */
.rac-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 80% -10%, rgba(0,100,75,.18) 0%, transparent 52%),
    radial-gradient(90% 70% at 8% 108%, rgba(0,100,75,.12) 0%, transparent 50%),
    #000;
}
.rac-bg__layer { position: absolute; inset: -10% -10% -10% -10%; will-change: transform; }

/* Blueprint-Gitter (driftet langsam) */
.rac-bg__grid {
  background-image:
    linear-gradient(var(--rac-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--rac-line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 80% at 50% 30%, #000 35%, transparent 80%);
  -webkit-mask-image: radial-gradient(120% 80% at 50% 30%, #000 35%, transparent 80%);
  opacity: .5;
  transform: translate3d(0, calc(var(--rac-scroll, 0) * .04px), 0);
  animation: rac-grid-drift 26s linear infinite;
}
@keyframes rac-grid-drift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 64px 64px, 64px 64px; }
}

/* Glow-Blobs (bewegen sich mit dem Scroll) */
.rac-bg__glow { mix-blend-mode: screen; opacity: .8; }
.rac-bg__glow span {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
}
.rac-bg__glow .g1 {
  width: 46vw; height: 46vw; top: -6vw; right: -8vw;
  background: radial-gradient(circle, rgba(0,100,75,.55), transparent 65%);
  transform: translate3d(0, calc(var(--rac-scroll,0) * .12px), 0);
}
.rac-bg__glow .g2 {
  width: 38vw; height: 38vw; top: 52vh; left: -10vw;
  background: radial-gradient(circle, rgba(0,100,75,.85), transparent 62%);
  transform: translate3d(0, calc(var(--rac-scroll,0) * -.08px), 0);
}
.rac-bg__glow .g3 {
  width: 30vw; height: 30vw; bottom: -6vw; right: 12vw;
  background: radial-gradient(circle, rgba(0,100,75,.5), transparent 60%);
  transform: translate3d(0, calc(var(--rac-scroll,0) * .06px), 0);
}

/* Technik-Netzwerk (SVG, parallax + langsames Pulsieren der Knoten) */
.rac-bg__network {
  opacity: .55;
  transform: translate3d(0, calc(var(--rac-scroll,0) * -.05px), 0);
}
.rac-bg__network svg { width: 100%; height: 100%; }
.rac-bg__network .rac-node { animation: rac-pulse 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.rac-bg__network .rac-node:nth-child(3n)   { animation-delay: -1.2s; }
.rac-bg__network .rac-node:nth-child(3n+1) { animation-delay: -2.6s; }
.rac-bg__network .rac-link { stroke-dasharray: 4 7; animation: rac-flow 9s linear infinite; }
@keyframes rac-pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes rac-flow  { to { stroke-dashoffset: -120; } }

/* Ultraschall-Welle (Medizintechnik-Anklang), unten, atmet */
.rac-bg__wave {
  position: absolute; left: 0; right: 0; bottom: 8vh; height: 160px;
  opacity: .3;
  transform: translate3d(0, calc(var(--rac-scroll,0) * .03px), 0);
}
.rac-bg__wave svg { width: 100%; height: 100%; }
.rac-bg__wave path { animation: rac-wave 6s ease-in-out infinite; }
@keyframes rac-wave { 0%,100% { opacity: .4; } 50% { opacity: .9; } }

/* Feines Korn fuer Tiefe */
.rac-bg__noise {
  opacity: .04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================================
   Scroll-Reveal: Elemente blenden beim Scrollen EIN und AUS
   ========================================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity .9s var(--rac-ease),
    transform .9s var(--rac-ease);
  transition-delay: var(--rac-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-46px); }
[data-reveal="right"] { transform: translateX(46px); }
[data-reveal="scale"] { transform: scale(.92); }
[data-reveal="fade"]  { transform: none; }

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Elementor-Sektionen koennen die Klasse .reveal im Feld "CSS-Klassen" nutzen */
.reveal:not(.is-visible) { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--rac-ease), transform .9s var(--rac-ease); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rac-bg__grid, .rac-bg__network .rac-node, .rac-bg__network .rac-link,
  .rac-bg__wave path { animation: none !important; }
  [data-reveal], .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .rac-bg__layer { transform: none !important; }
}