/* ─────────────────────────────────────────────────────────────────────────
   Erfaro 3D- & Tiefen-Layer  ·  erfaro-3d.css
   ADDITIV zu erfaro.css + erfaro-motion.css + erfaro-fx.css. Kein Override.

   Enthaelt:
     · .fx-net       Canvas fuer das "Wissens-Netzwerk" (schwebende, verbundene
                     Knoten in Petrol-Toenen). Dezenter Hintergrund-Akzent im
                     Hero, hinter dem Produkt-Mock. LAZY per JS aktiviert.
     · .tilt         Dezenter Pointer-3D-Tilt auf .card (Perspektive + leichte
                     Neigung + Glanz-Sheen). Wird per JS opt-in gesetzt.
     · .depth        Sanftes Scroll-Parallax (transform:translateY), JS-gesteuert.

   HARTE REGELN:
     · prefers-reduced-motion => alles statisch/aus (siehe unten + JS-Guards).
     · Canvas ist rein dekorativ (aria-hidden), pointer-events:none, kein CLS
       (absolut positioniert, keine Layout-Beteiligung).
     · Animiert wird ausschliesslich transform/opacity + Canvas-Redraw.
     · Ohne WebGL / ohne JS bleibt der Hero exakt wie zuvor (Canvas nie sichtbar).
   ───────────────────────────────────────────────────────────────────────── */

/* ── Wissens-Netzwerk-Canvas ─────────────────────────────────────────────
   Liegt in .fx-backdrop (z-index:-1 des .fx-host). Ueberdeckt Grid/Aurora
   leicht, bleibt aber hinter dem Content (z-index:1). Fade-in erst wenn das
   JS die Klasse .is-on setzt -> kein Flash, kein CLS. */
.fx-net{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  border:0;
  opacity:0;
  pointer-events:none;
  transition:opacity .9s ease;
  /* nie Layout-relevant, nie Scrollbar ausloesend */
  contain:strict;
}
.fx-net.is-on{opacity:1}

/* Auf Petrol-Flaechen (CTA-Band) heller tonen: die Punkte muessen sich vom
   dunklen Grund abheben. Steuerung passiert im JS ueber data-net-variant. */

/* ── Pointer-Tilt auf Karten ─────────────────────────────────────────────
   Opt-in: JS setzt .tilt nur wenn Pointer=fein (Maus) UND reduced-motion aus.
   Basis-Karte bleibt unveraendert; hier nur Perspektive + weiche Transition. */
.tilt{
  transform-style:preserve-3d;
  transition:transform .4s cubic-bezier(.22,.61,.36,1),
             box-shadow .4s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.tilt.is-tilting{
  /* waehrend aktivem Hover schnelleres Nachfuehren, ohne "gummi" zu wirken */
  transition:transform .12s ease-out, box-shadow .3s ease-out;
}
/* Der eigentliche Neigungswinkel kommt als CSS-Variablen aus dem JS. */
.tilt{
  transform:
    perspective(900px)
    rotateX(var(--tilt-x,0deg))
    rotateY(var(--tilt-y,0deg))
    translateZ(0);
}
.tilt.is-tilting{
  box-shadow:
    0 2px 6px rgba(26,42,51,.08),
    0 22px 48px -18px rgba(15,84,104,.32);
}

/* Dezenter Glanz-Sheen, folgt dem Pointer. Rein dekorativ, aria-hidden nicht
   noetig (::after). Deckkraft bewusst niedrig -> "glaubwuerdig", nicht billig. */
.tilt{position:relative}
.tilt::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  transition:opacity .4s ease;
  background:radial-gradient(
    380px circle at var(--sheen-x,50%) var(--sheen-y,0%),
    rgba(255,255,255,.35),
    rgba(255,255,255,0) 60%);
  mix-blend-mode:soft-light;
  z-index:2;
}
.tilt.is-tilting::after{opacity:1}

/* Inhalt der Karte leicht anheben (Parallax-in-Card), damit der 3D-Effekt
   Tiefe bekommt statt nur "kippen". Nur Icon + Titel treten hervor. */
.tilt > .ic,
.tilt > h3{
  transform:translateZ(24px);
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
}

/* ── Scroll-Parallax (Depth) ─────────────────────────────────────────────
   JS setzt --depth-y (px). Element schwebt minimal gegen den Scroll.
   Kleiner Ausschlag -> seriös. */
.depth{
  will-change:transform;
  transform:translate3d(0,var(--depth-y,0px),0);
}

/* ── Reduced Motion / kein-JS: alles neutralisieren ──────────────────────
   html.js-motion wird vom Motion-System gesetzt, wenn Animation erlaubt ist.
   Ohne diese Klasse (kein JS ODER reduced-motion) => Tilt/Depth flach,
   Canvas unsichtbar. Doppelte Absicherung zu den JS-Guards. */
html:not(.js-motion) .fx-net{display:none}
html:not(.js-motion) .tilt{
  transform:none;
  will-change:auto;
}
html:not(.js-motion) .tilt::after{display:none}
html:not(.js-motion) .tilt > .ic,
html:not(.js-motion) .tilt > h3{transform:none}
html:not(.js-motion) .depth{transform:none;will-change:auto}

@media (prefers-reduced-motion:reduce){
  .fx-net{display:none !important}
  .tilt{transform:none !important;transition:none !important;will-change:auto}
  .tilt::after{display:none !important}
  .tilt > .ic,
  .tilt > h3{transform:none !important}
  .depth{transform:none !important;will-change:auto}
}