/* Animationen: immer fade + rise + scale + Blur. Hängt an html.js, ohne JS ist alles sofort da. */

/* Basis-Reveal */
html.js [data-reveal]{
  opacity:0;
  transform:translateY(52px) scale(.94);
  filter:blur(10px);
  transition:
    opacity .8s var(--e-out),
    transform .9s var(--e-out),
    filter .8s var(--e-out);
}
html.js [data-reveal].is-in{opacity:1;transform:none;filter:blur(0)}

/* Richtungs-Varianten */
html.js [data-reveal="left"]{transform:translateX(-64px) scale(.96)}
html.js [data-reveal="right"]{transform:translateX(64px) scale(.96)}
html.js [data-reveal="up-lg"]{transform:translateY(80px) scale(.9)}
html.js [data-reveal="scale"]{transform:scale(.8);filter:blur(14px)}
html.js [data-reveal="left"].is-in,
html.js [data-reveal="right"].is-in,
html.js [data-reveal="up-lg"].is-in,
html.js [data-reveal="scale"].is-in{transform:none}

/* Bilder von unten aufdecken, dabei leicht rauszoomen */
html.js [data-reveal="clip"]{
  opacity:1;filter:none;
  clip-path:inset(0 0 100% 0);
  transform:scale(1.08);
  transition:clip-path 1s var(--e-io),transform 1.1s var(--e-out);
}
html.js [data-reveal="clip"].is-in{clip-path:inset(0 0 0% 0);transform:none}

/* Karten nacheinander einfliegen, 80ms Abstand, leicht gekippt */
html.js [data-reveal-stagger]{perspective:1000px}
html.js [data-reveal-stagger] > *{
  opacity:0;transform:translateY(44px) scale(.92) rotateX(22deg);filter:blur(9px);
  transition:opacity .75s var(--e-out),transform .95s var(--e-out),filter .75s var(--e-out);
}
html.js [data-reveal-stagger].is-in > *{opacity:1;transform:none;filter:blur(0)}
html.js [data-reveal-stagger].is-in > *:nth-child(1){transition-delay:.00s}
html.js [data-reveal-stagger].is-in > *:nth-child(2){transition-delay:.08s}
html.js [data-reveal-stagger].is-in > *:nth-child(3){transition-delay:.16s}
html.js [data-reveal-stagger].is-in > *:nth-child(4){transition-delay:.24s}
html.js [data-reveal-stagger].is-in > *:nth-child(5){transition-delay:.32s}
html.js [data-reveal-stagger].is-in > *:nth-child(6){transition-delay:.40s}
html.js [data-reveal-stagger].is-in > *:nth-child(7){transition-delay:.48s}
html.js [data-reveal-stagger].is-in > *:nth-child(8){transition-delay:.56s}

/* Hero: Text, Gerät und Glow kommen gestaffelt rein */
html.js .hero__copy > *{opacity:0;transform:translateY(34px);filter:blur(6px)}
html.js .hero-ready .hero__copy > *{opacity:1;transform:none;filter:blur(0);transition:opacity .8s var(--e-out),transform .9s var(--e-out),filter .8s var(--e-out)}
html.js .hero-ready .hero__copy > *:nth-child(1){transition-delay:.05s}
html.js .hero-ready .hero__copy > *:nth-child(2){transition-delay:.15s}
html.js .hero-ready .hero__copy > *:nth-child(3){transition-delay:.25s}
html.js .hero-ready .hero__copy > *:nth-child(4){transition-delay:.35s}
html.js .hero-ready .hero__copy > *:nth-child(5){transition-delay:.45s}

html.js .hero__device{opacity:0;transform:translateY(44px) scale(.92) rotate(-1.5deg);filter:blur(7px)}
html.js .hero-ready .hero__device{opacity:1;transform:none;filter:blur(0);transition:opacity 1.3s var(--e-out) .35s,transform 1.7s var(--e-out) .35s,filter 1.3s var(--e-out) .35s}

html.js .hero__glow{opacity:0;transform:scale(.6)}
html.js .hero-ready .hero__glow{opacity:.8;transform:none;transition:opacity 1.2s var(--e-out) .4s,transform 1.4s var(--e-out) .4s}

/* Die kleinen Tags poppen rein, mit leichtem Überschwinger */
html.js .float-tag{opacity:0;transform:translateY(16px) scale(.7)}
html.js .hero-ready .float-tag{opacity:1;transform:none}
html.js .hero-ready .float-tag--a{transition:opacity .5s var(--e-out) 1.1s,transform .7s cubic-bezier(.34,1.56,.64,1) 1.1s}
html.js .hero-ready .float-tag--b{transition:opacity .5s var(--e-out) 1.3s,transform .7s cubic-bezier(.34,1.56,.64,1) 1.3s}
html.js .hero-ready .float-tag--c{transition:opacity .5s var(--e-out) 1.5s,transform .7s cubic-bezier(.34,1.56,.64,1) 1.5s}

/* Dauerhaftes Schweben */
@media (prefers-reduced-motion:no-preference){
  .hero-ready .float-tag--a{animation:floaty 6s ease-in-out 1.6s infinite}
  .hero-ready .float-tag--b{animation:floaty 7s ease-in-out 1.8s infinite}
  .hero-ready .float-tag--c{animation:floaty 6.5s ease-in-out 2s infinite}
}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -12px}}

/* Die Schrittnummern poppen kurz auf */
html.js .steps__grid.is-in .step__num{animation:pop .6s var(--e-out) both}
html.js .steps__grid.is-in .step:nth-child(3) .step__num{animation-delay:.12s}
html.js .steps__grid.is-in .step:nth-child(4) .step__num{animation-delay:.24s}
@keyframes pop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}

html.js [data-reveal] .eyebrow{transform-origin:left center}

/* Wer im System Bewegung reduziert hat, bekommt keine.
   Inhalt bleibt komplett sichtbar. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  html.js [data-reveal],
  html.js [data-reveal-stagger] > *,
  html.js .hero__copy > *,
  html.js .hero__device,
  html.js .hero__glow,
  html.js .float-tag{opacity:1 !important;transform:none !important;filter:none !important;clip-path:none !important}
  .scroll-cue__mouse::after{animation:none}
}