/* ============================================================
   BIM X — Micro-Interactions fuer Nebenseiten (effects.css)
   Ergaenzt site.css. Rein additiv, transform-only, defensiv.
   ============================================================ */

/* ---------- (d) Cursor-Glow ----------
   Element wird von effects.js erzeugt (nur hover:hover + pointer:fine).
   Sichtbarkeit (opacity) steuert effects.js ueber dunklen Sektionen. */
.bx-cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(30, 92, 140, 0.16), transparent 70%);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 300ms ease;
  will-change: transform, opacity;
}

/* ---------- (b) Reveal-Stagger ----------
   Kinder eines .bx-reveal laufen nacheinander ein (bis Kind 6,
   danach gedeckelt). Nur transform — Inhalt bleibt immer sichtbar. */
.bx-reveal > * {
  transform: translateY(16px);
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.bx-reveal > *:nth-child(2) { transition-delay: 70ms; }
.bx-reveal > *:nth-child(3) { transition-delay: 140ms; }
.bx-reveal > *:nth-child(4) { transition-delay: 210ms; }
.bx-reveal > *:nth-child(5) { transition-delay: 280ms; }
.bx-reveal > *:nth-child(n + 6) { transition-delay: 350ms; }

.bx-reveal.is-in > * { transform: translateY(0); }

/* ---------- (c) Link-Unterstrich-Animation ----------
   site.css nutzt ::before als statische Basislinie —
   der animierte Akzent-Unterstrich liegt daher auf ::after. */
.bx-chapter-link::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  content: "";
  background: var(--bx-film-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 200ms ease;
}

.bx-chapter-link:focus-visible::after { transform: scaleX(1); }

/* ---------- (a) Hover-Lift + (f) nur auf Hover-Geraeten ---------- */
@media (hover: hover) {
  .bx-fact li,
  .bx-ps__col,
  .bx-checks li,
  .bx-webcard,
  .bx-refcard {
    transition: transform 220ms ease, box-shadow 220ms ease;
  }

  .bx-fact li:hover,
  .bx-ps__col:hover,
  .bx-checks li:hover,
  .bx-webcard:hover,
  .bx-refcard:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -20px rgba(15, 24, 34, 0.45);
  }

  .bx-chapter-link:hover::after { transform: scaleX(1); }

  /* Basis fuer Magnetic-Hover (effects.js): Rueckweg mit Transition.
     Transition-Liste aus site.css wird hier um transform ergaenzt. */
  .bx-cta-frame {
    transition: color 220ms ease, border-color 220ms ease, transform 220ms ease;
  }

  .bx-chapter-link {
    transition: color 220ms ease, transform 220ms ease;
  }
}

/* ---------- (e) Reduced Motion: alles aus ---------- */
@media (prefers-reduced-motion: reduce) {
  .bx-cursor-glow { display: none; }

  .bx-reveal > * {
    transform: none !important;
    transition: none !important;
    transition-delay: 0s !important;
  }

  .bx-chapter-link::after { transition: none; }

  .bx-fact li,
  .bx-ps__col,
  .bx-checks li,
  .bx-webcard,
  .bx-refcard,
  .bx-cta-frame,
  .bx-chapter-link {
    transition: none !important;
  }

  .bx-fact li:hover,
  .bx-ps__col:hover,
  .bx-checks li:hover,
  .bx-webcard:hover,
  .bx-refcard:hover {
    transform: none;
    box-shadow: none;
  }
}