/* ============================================================
   MOTION — Apple-Style Scroll-Motion & Micro-Interactions
   Alles hinter prefers-reduced-motion / @supports-Guards
   ============================================================ */

/* ---------- Scroll-Progress-Leiste ---------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-2));
  z-index: 300;
  pointer-events: none;
  transition: width 120ms linear;
}

/* ---------- Hero: Zeilen-Reveal hinter Maske ---------- */
.js .hero-title .line {
  display: block;
  overflow: hidden;
  padding: 0.06em 0.12em 0.14em 0;
  margin: -0.06em 0 -0.14em 0;
}
.js .hero-title .line-inner {
  display: inline-block;
  transform: translateY(118%);
  transition: transform 1050ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.is-loaded .hero-title .line:nth-child(1) .line-inner { transition-delay: 120ms; }
.is-loaded .hero-title .line:nth-child(2) .line-inner { transition-delay: 220ms; }
.is-loaded .hero-title .line:nth-child(3) .line-inner { transition-delay: 320ms; }
.is-loaded .hero-title .line-inner { transform: translateY(0); }

/* Hero: Boot-Fade für Eyebrow / Lead / CTA / Meta */
.js .hero-boot {
  opacity: 0;
  transform: translateY(16px);
  filter: blur(6px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease), filter 900ms var(--ease);
}
.is-loaded .hero-boot { opacity: 1; transform: none; filter: none; }
.is-loaded .hero-boot.b1 { transition-delay: 420ms; }
.is-loaded .hero-boot.b2 { transition-delay: 540ms; }
.is-loaded .hero-boot.b3 { transition-delay: 640ms; }
.is-loaded .hero-boot.b4 { transition-delay: 760ms; }

/* ---------- Reveal (JS-Fallback: Toggle .in) ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(8px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease), filter 900ms var(--ease);
}
.js [data-reveal].in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ============================================================
   APPLE-STYLE: scroll-gekoppelte Animationen
   Fließend an den Scroll-Fortschritt gebunden statt an/aus.
   Nur wenn der Browser Scroll-Timelines kann (Chrome/Safari neu).
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    /* Reveals folgen dem Scroll-Fortschritt (butterweich) */
    html.sda [data-reveal] {
      opacity: 0;
      transform: translateY(48px) scale(0.965);
      filter: blur(8px);
      transition: none;
      animation: sda-reveal linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 34%;
    }
    html.sda [data-reveal].in { /* JS-Toggle bleibt wirkungslos, Animation führt */ }
    @keyframes sda-reveal {
      to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    }

    /* Hero driftet & verblasst beim Wegscrollen (Apple-Klassiker) */
    html.sda .hero-wrap {
      animation: sda-hero-drift linear both;
      animation-timeline: scroll(root);
      animation-range: 0 80vh;
      will-change: transform, opacity;
    }
    @keyframes sda-hero-drift {
      to { opacity: 0.2; transform: translateY(-44px) scale(0.985); }
    }

    /* Parallax: Lichtschein bewegt sich langsamer als der Rest */
    html.sda .hero-glow {
      animation: sda-glow linear both;
      animation-timeline: scroll(root);
      animation-range: 0 120vh;
    }
    @keyframes sda-glow {
      to { transform: translateY(160px) scale(1.25); opacity: 0.7; }
    }

    /* Statement-Sektionen: heller Schein zieht mit dem Scroll durch */
    html.sda .analyse::before {
      animation: sda-sheen linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes sda-sheen {
      from { transform: translateY(-30%); opacity: 0.4; }
      to   { transform: translateY(30%);  opacity: 1; }
    }

    /* Marquee: Tempo leicht an Scrollrichtung gekoppelt (subtil) */
    html.sda .marquee-track {
      animation-timeline: auto; /* Grund-Loop bleibt zeitbasiert */
    }
  }
}

/* ---------- Marquee-Band ---------- */
.marquee {
  background: var(--ink);
  color: var(--cream);
  padding: 26px 0;
  overflow: hidden;
  position: relative;
  border-top: 1px solid rgba(247,244,238,0.08);
  border-bottom: 1px solid rgba(247,244,238,0.08);
}
.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 140px;
  z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg, var(--ink), transparent); }
.marquee::after  { right: 0; background: linear-gradient(270deg, var(--ink), transparent); }
.marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 44px;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 34s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-family: var(--sans);
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 300;
  letter-spacing: 0.02em;
  color: rgba(247,244,238,0.86);
}
.marquee-track .dot {
  color: var(--gold);
  font-size: 12px;
  transform: translateY(-2px);
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Shine-Sweep über Primary-Buttons ---------- */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.28), transparent);
  transform: skewX(-18deg);
  transition: left 700ms var(--ease);
  pointer-events: none;
}
.btn-primary:hover::after { left: 130%; }

/* ---------- Animiertes Korn im Hero ---------- */
.js .hero-grain { animation: grainDrift 7s steps(5) infinite; }
@keyframes grainDrift {
  0%   { background-position: 0 0; }
  100% { background-position: 30px 24px; }
}

/* ---------- Reduced Motion: alles ruhigstellen ---------- */
@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none !important; }
  .js .hero-title .line-inner,
  .js .hero-boot,
  .js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
  }
  .marquee-track { animation: none !important; }
  .js .hero-grain { animation: none !important; }
}