/* ==========================================================================
   motion.css — sämtliche Animationen.
   Alles hier ist rein additiv: ohne JS oder mit reduzierter Bewegung ist die
   Seite vollständig sichtbar und benutzbar.
   ========================================================================== */

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

  /* ---- Reveal-Animationen (IntersectionObserver setzt .in) ----------------
     Der versteckte Ausgangszustand gilt nur, wenn JS läuft (html.js-motion). */

  html.js-motion .reveal {
    transition: opacity 0.7s ease, transform 0.7s ease;
    transition-delay: calc(var(--i, 0) * 90ms);
  }

  html.js-motion .reveal:not(.in) {
    opacity: 0;
    transform: translateY(26px);
  }

  /* ---- Scroll-Hinweis im Hero ------------------------------------------- */

  .scroll-cue svg {
    animation: cue-bounce 2s ease-in-out infinite;
  }

  @keyframes cue-bounce {
    0%, 100% { transform: translateY(0); opacity: 0.7; }
    50% { transform: translateY(6px); opacity: 1; }
  }

  /* ---- Scroll-getriebene Effekte (Chrome/Edge/Firefox/Safari 26+) --------
     Fallback: main.js setzt --scroll-progress / --timeline-progress,
     wenn animation-timeline nicht unterstützt wird. -------------------------- */

  @supports (animation-timeline: scroll()) {

    /* Progressbar oben */
    #scroll_progress {
      animation: progress-grow linear both;
      animation-timeline: scroll(root block);
    }

    /* Hero-Parallax: Blobs und Portrait driften unterschiedlich schnell */
    .blob-1 {
      animation: parallax-drift linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100vh;
      --par-d: calc(var(--parallax-range) * 1.4);
    }

    .blob-2 {
      animation: parallax-drift linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100vh;
      --par-d: calc(var(--parallax-range) * -0.8);
    }

    .blob-3 {
      animation: parallax-drift linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100vh;
      --par-d: var(--parallax-range);
    }

    .hero-portrait {
      animation: parallax-drift linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100vh;
      --par-d: calc(var(--parallax-range) * -0.5);
    }

    /* Hero-Text blendet beim Wegscrollen aus */
    .hero-text {
      animation: hero-fade linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 85vh;
    }

    /* Karriere-Linie zeichnet sich beim Scrollen */
    .timeline::after {
      animation: draw-line linear both;
      animation-timeline: view(block);
      animation-range: cover 5% cover 70%;
    }
  }

  @keyframes progress-grow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }

  @keyframes parallax-drift {
    from { translate: 0 0; }
    to { translate: 0 var(--par-d, 60px); }
  }

  @keyframes hero-fade {
    from { opacity: 1; visibility: visible; transform: translateY(0); }
    to { opacity: 0; visibility: hidden; transform: translateY(50px); }
  }

  @keyframes draw-line {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
  }
}