/* =========================================================================
   MOTION — Scroll-Driven Animations (2026 native CSS)
   Kein JS rAF — rein CSS animation-timeline: scroll()/view()
   ========================================================================= */

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

  /* View-driven reveal: fade + settle when entering viewport */
  .reveal {
    animation: reveal-up linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 25%;
  }
  @keyframes reveal-up {
    0%   { opacity: 0; transform: translateY(32px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  /* Soft typography fade for headlines */
  .reveal-soft {
    animation: reveal-soft linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 35%;
  }
  @keyframes reveal-soft {
    0%   { opacity: 0; filter: blur(6px); }
    100% { opacity: 1; filter: blur(0); }
  }

  /* Scale ornament / numeric markers */
  .reveal-scale {
    animation: reveal-scale linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
  }
  @keyframes reveal-scale {
    0%   { opacity: 0; transform: scale(0.92); }
    100% { opacity: 1; transform: scale(1); }
  }

  /* Header condensation on scroll (page-level scroll timeline) */
  .site-header {
    animation: header-condense linear both;
    animation-timeline: scroll(root);
    animation-range: 0 120px;
  }
  @keyframes header-condense {
    to {
      padding-block: 0.5rem;
      background: color-mix(in oklch, var(--bg) 94%, transparent);
      border-bottom-color: var(--border);
    }
  }

  /* Progress bar using scroll() timeline */
  .scroll-progress {
    position: fixed;
    top: 0; left: 0;
    right: 0;
    height: 2px;
    background: var(--accent-warm);
    transform-origin: left;
    z-index: 200;
    animation: progress linear;
    animation-timeline: scroll(root);
  }
  @keyframes progress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
}

/* Fallback for browsers without scroll-driven — IntersectionObserver sets .is-visible */
@supports not (animation-timeline: view()) {
  .reveal, .reveal-soft, .reveal-scale {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
  }
  .reveal.is-visible, .reveal-soft.is-visible, .reveal-scale.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* View Transitions for language-switch & route-level changes */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--dur-l);
  animation-timing-function: var(--ease-out-expo);
}
::view-transition-old(root) {
  animation-name: vt-fade-out;
}
::view-transition-new(root) {
  animation-name: vt-fade-in;
}
@keyframes vt-fade-out {
  to { opacity: 0; transform: translateY(-4px); }
}
@keyframes vt-fade-in {
  from { opacity: 0; transform: translateY(4px); }
}

/* Named transitions for the hero title — morphs across language switches */
.hero__title {
  view-transition-name: hero-title;
}
::view-transition-old(hero-title),
::view-transition-new(hero-title) {
  animation-duration: 640ms;
  animation-timing-function: var(--ease-out-expo);
}