/* =====================================================================
   Kino-Blau Veredelung — Shared-Layer für Unterseiten (2026-07-09)
   Extrahiert aus assets/css/cinematic-home.css (Startseiten-Effektschicht).
   Klassen-basiert (keine ID-Scopes), damit die 21 Unterseiten die
   Muster direkt verlinken können. Wird von diesem Task noch von KEINER
   Seite eingebunden (das übernimmt der Pilot-Task).
   ===================================================================== */

/* ---- Reveal-Wucht (Prototyp-Motion, reduce-/no-anim-safe s.u.)
   WICHTIG: .js-gescoped wie im Original — ohne JS bleibt alles sichtbar. ---- */
.js .reveal { opacity: 0; transform: translateY(40px) scale(.99); filter: blur(8px);
  transition: opacity .9s var(--ease), transform 1s var(--ease-lux), filter .9s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; filter: none; }
.js .stagger > * { transform: translateY(40px); }
/* Pflicht-Reset: style.css `.stagger.in > *` (gleiche Spezifität, frühere Datei) verliert
   sonst per Source-Order gegen die Zeile darüber — Kinder blieben dauerhaft 40px zu tief. */
.js .stagger.in > * { transform: none; }

/* ---- Serif-Hero (nur H1 — .h2 bleibt Space Grotesk wie auf index) ---- */
.page-hero h1, .about-hero h1 { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; }

/* ---- Double-Bezel + Hover-Glow auf den geteilten Karten-Klassen.
   Ring ergänzt den bestehenden Karten-Schatten (var(--shadow-card) als
   dritter box-shadow-Layer). Kein translateY im Hover hier — sections.css
   hovert bereits translateY, nur box-shadow/border-color hier. ---- */
.card, .module, .svc-card, .tool-card, .brand-panel {
  box-shadow: 0 0 0 7px rgba(120,170,235,.045), 0 0 0 8px var(--hair-2), var(--shadow-card);
  transition: transform .55s var(--ease-lux), box-shadow .55s var(--ease), border-color .35s var(--ease);
}
.card:hover, .module:hover, .svc-card:hover, .tool-card:hover, .brand-panel:hover {
  box-shadow: 0 0 0 7px rgba(120,170,235,.07), 0 0 0 8px var(--hair-2),
              0 26px 70px -20px rgba(30,155,240,.35);
}
/* .light-Sektionen: sections.css setzt .light .card / .light .card:hover mit höherer
   Spezifität (0,2,0 / 0,3,0) — Ring dort explizit nachziehen, sonst fehlt der Bezel
   in allen .light-Sektionen (12 Unterseiten). Background/Border aus sections.css bleiben. */
.light .card {
  box-shadow: 0 0 0 7px rgba(120,170,235,.045), 0 0 0 8px var(--hair-2), var(--shadow-card);
}
.light .card:hover {
  box-shadow: 0 0 0 7px rgba(120,170,235,.07), 0 0 0 8px var(--hair-2),
              0 26px 70px -20px rgba(30,155,240,.35);
}

/* ---- FAQ + Selbst-Checks: leiser Kino-Schliff (Scope-frei) ---- */
.faq-item {
  border: 1px solid var(--hair-2);
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.faq-item:hover, .faq-item[open] {
  border-color: rgba(30, 155, 240, .4);
  box-shadow: 0 12px 44px -18px rgba(30, 155, 240, .3);
}
.tool-card:hover {
  border-color: rgba(30, 155, 240, .4);
}

/* ---- FX-Hosts für Unterseiten (Plexus im Hero, Wave/Plasma in Sektionen) ---- */
.page-hero { position: relative; }
.page-hero .fx-net-host { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.page-hero .fx-net-host canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.page-hero .wrap { position: relative; z-index: 1; }
/* KEIN overflow:hidden — erzeugt Sticky-Containment und bricht position:sticky
   der Kind-Karten (.svc-card); der Canvas clippt sich via absolute inset:0 selbst. */
.kb-fx-section { position: relative; }
.kb-fx-section > canvas, .kb-fx-section > .kb-fx-fallback { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.kb-fx-section > .wrap, .kb-fx-section > :not(canvas):not(.kb-fx-fallback) { position: relative; z-index: 1; }
.kb-fx-section > #fx-wave { opacity: .55; }

/* ---- Sicherheitsnetz: reduce-motion / no-anim (diese Datei lädt zuletzt) ---- */
@media (prefers-reduced-motion: reduce) {
  .reveal, .js .stagger > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  /* Karten-Transitions dieser Datei unter reduce ebenfalls stilllegen
     (sonst gewinnt die shared-transition gegen das Bestands-Opt-out). */
  .card, .module, .svc-card, .tool-card, .brand-panel, .faq-item {
    transition: none !important;
  }
}

/* Projekte: die vorhandenen Motive werden beim Eintritt freigelegt, nicht ersetzt. */
.pds-cases .svc .svc-img { clip-path: inset(0 0 0 0 round var(--radius)); transition: clip-path .9s var(--ease-out), filter .9s var(--ease); }
.js .pds-cases .svc .svc-img { clip-path: inset(0 100% 0 0 round var(--radius)); filter: brightness(.78) saturate(.8); }
.js .pds-cases .svc .svc-img.pds-case-in { clip-path: inset(0 0 0 0 round var(--radius)); filter: none; }
@media (prefers-reduced-motion: reduce) { .js .pds-cases .svc .svc-img { clip-path: none; filter: none; transition: none; } }
.no-anim .reveal, .no-anim .stagger > * {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}