/* =============================================================================
   motion.css — Reveal-Choreografie + Schutzschalter
   Grundregel: Anfangs-Versteck-Zustände gelten NUR, wenn html.anim gesetzt ist
   (JS aktiv UND Bewegung erlaubt). Sonst ist alles sichtbar & warm.
   ============================================================================= */

/* Scroll-Reveal-Utility */
.reveal{ opacity:1; }
html.anim .reveal{ opacity:0; transform:translateY(26px); will-change:opacity,transform; }
html.anim .reveal.in{ opacity:1; transform:none;
  transition:opacity .8s var(--ease), transform .8s var(--ease-out); }
html.anim .reveal[data-reveal="left"]{ transform:translateX(-30px); }
html.anim .reveal[data-reveal="right"]{ transform:translateX(30px); }
html.anim .reveal[data-reveal="scale"]{ transform:scale(.92); }
html.anim .reveal.in[data-reveal]{ transform:none; }
html.anim .reveal[data-delay="1"].in{ transition-delay:.12s; }
html.anim .reveal[data-delay="2"].in{ transition-delay:.24s; }
html.anim .reveal[data-delay="3"].in{ transition-delay:.36s; }

/* Elemente, die ich in sections.css initial versteckt habe, sind ohne html.anim sichtbar */
html:not(.anim) .hero__inner,
html:not(.anim) .line,
html:not(.anim) .hero__kaefer{ opacity:1 !important; transform:none !important; }
html:not(.anim) .hero.settled .hero__media{ filter:none; }

/* Ohne JS: Kauf-Button dauerhaft zeigen (kein Scroll-Trigger verfügbar) */
html:not(.js) .buybar{ opacity:1; transform:none; pointer-events:auto; }

/* Word-Reveal (SplitText-ähnlich, aber CSS) für Pull-Lines */
.words span{ display:inline-block; }
html.anim .words span{ opacity:0; transform:translateY(.5em) rotate(2deg); }
html.anim .words.in span{ opacity:1; transform:none; transition:opacity .6s var(--ease), transform .6s var(--ease-out); }
html.anim .words.in span:nth-child(1){ transition-delay:.02s }
html.anim .words.in span:nth-child(2){ transition-delay:.06s }
html.anim .words.in span:nth-child(3){ transition-delay:.10s }
html.anim .words.in span:nth-child(4){ transition-delay:.14s }
html.anim .words.in span:nth-child(5){ transition-delay:.18s }
html.anim .words.in span:nth-child(6){ transition-delay:.22s }
html.anim .words.in span:nth-child(n+7){ transition-delay:.26s }

/* ===== Reduced Motion: Vollbremsung ====================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .reveal,.line,.hero__inner,.hero__kaefer,.words span{ opacity:1 !important; transform:none !important; }
  .hero.settled .hero__media{ filter:brightness(.86) saturate(1.04) !important; }
  .grain{ animation:none !important; }
  /* Buybar NICHT erzwingen — JS blendet sie beim Scrollen ein (kein Doppel-Button oben). */
}