/* Bewegung beim Scrollen. Nur im Frontend geladen.
   Inhalte sind immer sichtbar. Es bewegen sich nur Position und Größe, beim Hero-Text zusätzlich die Deckkraft beim Verlassen.
   Die Stärke kommt aus den Variablen --motion-* (Theme-Einstellungen oder pro Block über data-motion). */

[data-motion="off"]    { --motion-y: 0px;   --motion-s: 1;   --motion-stage: 1;   --motion-drift: 0px;   --motion-leave: 0px;   --motion-leave-s: 1;   --motion-fade: 1; }
[data-motion="subtle"] { --motion-y: 48px;  --motion-s: .96; --motion-stage: .92; --motion-drift: 30px;  --motion-leave: 40px;  --motion-leave-s: .97; --motion-fade: .5; }
[data-motion="normal"] { --motion-y: 120px; --motion-s: .9;  --motion-stage: .82; --motion-drift: 80px;  --motion-leave: 90px;  --motion-leave-s: .94; --motion-fade: .05; }
[data-motion="strong"] { --motion-y: 180px; --motion-s: .84; --motion-stage: .72; --motion-drift: 120px; --motion-leave: 140px; --motion-leave-s: .92; --motion-fade: 0; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes itsh-rise { from { translate: 0 var(--motion-y, 120px); scale: var(--motion-s, .9); } to { translate: 0 0; scale: 1; } }
    @keyframes itsh-stage { from { scale: var(--motion-stage, .82); } to { scale: 1; } }
    @keyframes itsh-drift-a { from { translate: 0 var(--motion-drift, 80px); } to { translate: 0 calc(var(--motion-drift, 80px) * -1); } }
    @keyframes itsh-drift-b { from { translate: 0 calc(var(--motion-drift, 80px) * -.9); } to { translate: 0 var(--motion-drift, 80px); } }
    @keyframes itsh-leave { to { opacity: var(--motion-fade, .05); translate: 0 calc(var(--motion-leave, 90px) * -1); scale: var(--motion-leave-s, .94); } }

    .itsh-reveal {
      animation: itsh-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
    .itsh-stage { animation: itsh-stage linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
    .itsh-stage .float-a { animation: itsh-drift-a linear both; animation-timeline: view(); }
    .itsh-stage .float-b { animation: itsh-drift-b linear both; animation-timeline: view(); }
    .itsh-hero .hero-text { animation: itsh-leave linear both; animation-timeline: view(); animation-range: exit 0% exit 70%; }
  }
}

/* Ersatz für Browser ohne scrollgesteuerte Animationen (siehe front.js). */
@media (prefers-reduced-motion: no-preference) {
  .itsh-io .itsh-reveal {
    translate: 0 var(--motion-y, 120px);
    scale: var(--motion-s, .9);
    transition: translate .9s cubic-bezier(.2, .7, .2, 1), scale .9s cubic-bezier(.2, .7, .2, 1);
  }
  .itsh-io .itsh-reveal.is-in { translate: 0 0; scale: 1; }
}