/* ===================================================================== */
/* Motion-Layer (Ebene 1) — reines CSS, keine Bibliothek                  */
/*                                                                       */
/* - Hero: ruhiger Seitenaufbau beim Laden + Parallax beim Herausscrollen */
/* - Abschnitte: Einblenden von unten, an die Scrollposition gekoppelt    */
/* - Bilder: Maskenfreilegung und leichter Tiefenzoom                     */
/*                                                                       */
/* Scroll-gekoppelte Effekte nutzen CSS Scroll-Driven Animations          */
/* (Chrome/Edge 115+, Safari 26+). Firefox zeigt alle Inhalte statisch –  */
/* die Effekte sind rein dekorativ, daher bewusst ohne Fallback.          */
/* Bei prefers-reduced-motion: reduce greift keiner der Effekte.          */
/*                                                                       */
/* Es werden nur die Einzel-Properties translate/scale/opacity (und       */
/* clip-path bei Bildmasken) animiert, damit bestehende transform-Werte   */
/* aus styles.css unberührt bleiben.                                      */
/* ===================================================================== */

:root {
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-rise: 36px;
}

@media (prefers-reduced-motion: no-preference) {

  /* ------------------------------------------------------------------- */
  /* Hero: Seitenaufbau beim Laden (zeitbasiert, überall unterstützt)     */
  /* ------------------------------------------------------------------- */

  @keyframes motion-load-rise {
    from {
      opacity: 0;
      translate: 0 24px;
    }
  }

  @keyframes motion-load-fade {
    from { opacity: 0; }
  }

  @keyframes motion-load-settle {
    from { scale: 1.06; }
  }

  .hero-photo {
    animation: motion-load-settle 1.8s var(--motion-ease) both;
  }

  .hero-eyebrow,
  .hero-title,
  .hero-description,
  .hero-actions {
    animation: motion-load-rise 0.9s var(--motion-ease) both;
  }

  .hero-eyebrow     { animation-delay: 0.15s; }
  .hero-title       { animation-delay: 0.25s; }
  .hero-description { animation-delay: 0.4s; }
  .hero-actions     { animation-delay: 0.55s; }

  .hero-tagline-block,
  .decorative-year {
    animation: motion-load-fade 1.4s ease-out 0.7s both;
  }

  /* ------------------------------------------------------------------- */
  /* Scroll-gekoppelte Effekte                                           */
  /* ------------------------------------------------------------------- */

  @supports ((animation-timeline: view()) and (animation-range: entry)) {

    @keyframes motion-reveal {
      from {
        opacity: 0;
        translate: 0 var(--motion-rise);
      }
    }

    @keyframes motion-hero-photo {
      to { translate: 0 18%; }
    }

    @keyframes motion-hero-content {
      to {
        opacity: 0;
        translate: 0 -60px;
      }
    }

    @keyframes motion-hero-year {
      to { translate: 0 -40%; }
    }

    @keyframes motion-unveil {
      from { clip-path: inset(10% 7% round 20px); }
      to   { clip-path: inset(0 round 20px); }
    }

    @keyframes motion-zoom-out {
      from { scale: 1.18; }
      to   { scale: 1; }
    }

    @keyframes motion-drift {
      from { translate: 0 -7%; }
      to   { translate: 0 7%; }
    }

    @keyframes motion-ghost-drift {
      from { translate: -24px 0; }
      to   { translate: 24px 0; }
    }

    /* Hero-Parallax ---------------------------------------------------
       Timeline sitzt auf dem Rahmen selbst: .hero-photo-frame hat
       overflow:hidden und wäre sonst der Scroll-Container für view()
       seiner Kinder. */

    .hero-photo-frame {
      view-timeline: --motion-hero;
    }

    /* Die Lade-Animation (scale) läuft weiter; die Parallax ergänzt
       nur translate, beide Properties laufen unabhängig. */
    .hero-photo {
      animation:
        motion-load-settle 1.8s var(--motion-ease) both,
        motion-hero-photo linear both;
      animation-timeline: auto, --motion-hero;
      animation-range: normal, exit 0% exit 100%;
    }

    .hero-content {
      animation: motion-hero-content linear both;
      animation-timeline: --motion-hero;
      animation-range: exit 5% exit 70%;
    }

    .decorative-year {
      animation:
        motion-load-fade 1.4s ease-out 0.7s both,
        motion-hero-year linear both;
      animation-timeline: auto, --motion-hero;
      animation-range: normal, exit 0% exit 100%;
    }

    /* Abschnitte einblenden ------------------------------------------- */

    .trust-intro__content > .eyebrow,
    .trust-intro__content > .section-title,
    .trust-intro__lead,
    .trust-intro__more,
    .trust-card,
    .layers__intro > *,
    .next-step__intro > *,
    .next-step-card,
    .process-section__eyebrow,
    .process-section__heading,
    .process-section__intro-row,
    .process-section__grid,
    .about-preview__text > *,
    .about-preview__band,
    .faq-section__intro,
    .faq-item,
    .final-cta__intro > *,
    .final-cta__panel {
      animation: motion-reveal var(--motion-ease) both;
      animation-timeline: view();
      animation-range: entry 5% cover 28%;
    }

    /* Leichte Staffelung nebeneinanderliegender Elemente */
    .trust-card:nth-child(2),
    .next-step-card:nth-child(2) {
      animation-range: entry 15% cover 34%;
    }

    .faq-item:nth-child(2) { animation-range: entry 8%  cover 30%; }
    .faq-item:nth-child(3) { animation-range: entry 11% cover 32%; }
    .faq-item:nth-child(4) { animation-range: entry 14% cover 34%; }
    .faq-item:nth-child(5) { animation-range: entry 17% cover 36%; }
    .faq-item:nth-child(6) { animation-range: entry 20% cover 38%; }

    /* Bilder: Maske + Tiefe ------------------------------------------- */

    /* Film-/Teamfoto „Seit 1895“: Rahmen öffnet sich, Bild zoomt zurück */
    .about-preview__figure {
      view-timeline: --motion-about-figure;
      animation: motion-unveil linear both;
      animation-timeline: --motion-about-figure;
      animation-range: entry 0% cover 40%;
    }

    .about-video__poster {
      animation: motion-zoom-out linear both;
      animation-timeline: --motion-about-figure;
      animation-range: entry 0% cover 50%;
    }

    /* Historisches Archivbild: langsamer Drift im Rahmen */
    .about-preview__archive {
      view-timeline: --motion-archive;
    }

    .about-preview__archive img {
      scale: 1.16;
      animation: motion-drift linear both;
      animation-timeline: --motion-archive;
    }

    /* „FAQ“-Schriftzug wandert dezent gegen die Scrollrichtung */
    .faq-section__ghost {
      animation: motion-ghost-drift linear both;
      animation-timeline: view();
    }
  }
}