/* Lumelisse — dezente, sitewide Bewegung.
   Nur aktiv, wenn JS die Klasse .lum-anim setzt (d. h. Motion erlaubt). */

/* Scroll-Reveal */
.lum-anim .lum-reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  will-change:opacity, transform;
}
.lum-anim .lum-reveal.in{opacity:1;transform:none}

/* leichter Stagger in Rastern */
.lum-anim .lumh .prods .card:nth-child(2),
.lum-anim .lumh .usp .i:nth-child(2){transition-delay:.07s}
.lum-anim .lumh .prods .card:nth-child(3),
.lum-anim .lumh .usp .i:nth-child(3){transition-delay:.14s}
.lum-anim .lumh .prods .card:nth-child(4),
.lum-anim .lumh .usp .i:nth-child(4){transition-delay:.21s}
.lum-anim ul.products li.product:nth-child(even){transition-delay:.08s}

/* Hero: gestaffelter Einstieg beim Laden (above the fold) */
@keyframes lumRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.lum-anim .lumh .hero .eyebrow{animation:lumRise .7s .05s both}
.lum-anim .lumh .hero h1{animation:lumRise .8s .14s both}
.lum-anim .lumh .hero .lead{animation:lumRise .8s .26s both}
.lum-anim .lumh .hero .cta{animation:lumRise .8s .38s both}
.lum-anim .lumh .hero .hv{animation:lumRise 1s .2s both}

/* sanftes Schweben der botanischen Akzente */
@keyframes lumFloat{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-9px) rotate(var(--r,0deg))}}
.lum-anim .lumh .hv .petal.a{--r:12deg;animation:lumFloat 6s ease-in-out infinite}
.lum-anim .lumh .hv .petal.b{--r:-24deg;animation:lumFloat 7.5s ease-in-out .6s infinite}

/* Header dezent beim Laden */
.lum-anim .lum-header{animation:lumRise .6s .02s both}

@media (prefers-reduced-motion:reduce){
  .lum-anim *{animation:none !important; transition:none !important}
  .lum-anim .lum-reveal{opacity:1 !important; transform:none !important}
}