/* ============================================================
   BKD — Visual Effects
   Scroll Reveal · Hero Entrance · Parallax
   ============================================================ */

/* ====== SCROLL REVEAL ======
   body.js-ready wird per JS gesetzt — ohne JS sind alle Elemente
   sichtbar (kein Flash of invisible content) */
body.js-ready .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity  0.7s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

body.js-ready .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ====== HERO ENTRANCE ====== */
.hero-entrance {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity  0.85s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.85s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-entrance.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ====== HERO PARALLAX ======
   Hero-Bild etwas größer als Container damit beim Verschieben
   keine Lücken entstehen */
.hero-img {
  top: -25%;
  bottom: -25%;
  left: 0;
  right: 0;
}

/* ====== SECTION-NUM LINE REVEAL ======
   Der blaue Unterstrich unter dem Abschnitts-Label wächst von links rein */
.section-num {
  position: relative;
  border-bottom: none;
  padding-bottom: 9px;
}

.section-num::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 0;
  background: var(--bkd-blue);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}

body.js-ready .reveal.visible .section-num::after,
body.js-ready .visible .section-num::after,
.section-num.line-in::after {
  width: 100%;
}

/* Ohne JS sofort sichtbar */
body:not(.js-ready) .section-num::after {
  width: 100%;
}

/* ====== REDUCED MOTION ======
   Respektiert Systemeinstellung "Bewegung reduzieren" */
@media (prefers-reduced-motion: reduce) {
  body.js-ready .reveal,
  .hero-entrance {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero-img {
    top: 0;
    bottom: 0;
  }

  .section-num::after {
    width: 100% !important;
    transition: none !important;
  }
}