/* ============================================================
   LILO Extras – Motion-Layer (begleitet lilo-motion.js)
   ============================================================ */

/* Reveal: Startzustand nur wenn JS aktiv (kein FOUC, no-JS zeigt alles).
   Trigger via IntersectionObserver → .is-inview (CSS-Transition). */
.lilo-js .lilo-reveal { opacity: 0; transform: translateY(40px); transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1); }
.lilo-js .lilo-reveal.is-inview { opacity: 1; transform: none; }
.lilo-js .lilo-reveal-group > * { opacity: 0; transform: translateY(40px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.lilo-js .lilo-reveal-group.is-inview > * { opacity: 1; transform: none; }
.lilo-js .lilo-reveal-group.is-inview > *:nth-child(2) { transition-delay: .08s; }
.lilo-js .lilo-reveal-group.is-inview > *:nth-child(3) { transition-delay: .16s; }
.lilo-js .lilo-reveal-group.is-inview > *:nth-child(4) { transition-delay: .24s; }
.lilo-js .lilo-reveal-group.is-inview > *:nth-child(5) { transition-delay: .32s; }
.lilo-js .lilo-reveal-group.is-inview > *:nth-child(n+6) { transition-delay: .4s; }

@media (prefers-reduced-motion: reduce) {
  .lilo-js .lilo-reveal,
  .lilo-js .lilo-reveal-group > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .lilo-banner__track { animation: none !important; }
}

/* ---- Header: Scroll-Verhalten (shrink + hide/show) ----
   WICHTIG: kein will-change/transform im Ruhezustand → sonst wird der Header
   zum Containing-Block und fängt das position:fixed Mobile-Overlay ein. */
.lilo-header { transition: transform .35s ease, box-shadow .3s ease, background-color .3s ease; }
.lilo-header.is-scrolled { box-shadow: 0 6px 24px rgba(0,0,0,.10); }
.lilo-header.is-scrolled .lilo-header__inner { padding-top: .5rem; padding-bottom: .5rem; }
.lilo-header.is-hidden { transform: translateY(-100%); }
.lilo-header__inner { transition: padding .3s ease; }

/* ---- Laufende Text-Banner (Marquee, scrollt endlos) ---- */
.lilo-banner {
  overflow: hidden; width: 100%;
  background: var(--lilo-black); color: var(--lilo-yellow);
  padding-block: clamp(.6rem, 1.6vw, 1rem);
  border-block: 2px solid var(--lilo-black);
}
.lilo-banner--yellow { background: var(--lilo-yellow); color: var(--lilo-black); border-color: var(--lilo-yellow); }
.lilo-banner__track {
  display: inline-flex; flex-wrap: nowrap; white-space: nowrap; will-change: transform;
  animation: lilo-marquee var(--lilo-marquee-speed, 32s) linear infinite;
}
.lilo-banner:hover .lilo-banner__track { animation-play-state: paused; }
.lilo-banner__item {
  display: inline-flex; align-items: center; gap: 1.2rem; padding-inline: 1.2rem;
  font-size: clamp(1.4rem, 4vw, 2.6rem); font-weight: var(--lilo-fw-black);
  text-transform: uppercase; letter-spacing: -0.01em; line-height: 1;
}
.lilo-banner__item::after { content: "•"; opacity: .55; }
@keyframes lilo-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- Große scroll-getriebene Wortmarke (Typo-Cloud) ---- */
.lilo-typo-band { overflow: hidden; padding-block: clamp(2rem, 6vw, 5rem); }
.lilo-typo-scroll {
  display: block; white-space: nowrap; text-align: center;
  font-size: clamp(4rem, 18vw, 18rem); line-height: .9; font-weight: var(--lilo-fw-black);
  letter-spacing: -0.03em; color: var(--lilo-black); will-change: transform;
}
.lilo-typo-scroll .lilo-typo-outline {
  color: transparent; -webkit-text-stroke: 2px var(--lilo-black);
}
.lilo-typo-band--yellow { background: var(--lilo-yellow); }

/* ---- Parallax ---- */
.lilo-parallax-wrap { overflow: hidden; position: relative; }
.lilo-parallax-wrap [data-parallax] { will-change: transform; }
.lilo-parallax-wrap img[data-parallax] { width: 100%; height: 120%; object-fit: cover; display: block; }

/* ---- Scroll-to-Top ---- */
.lilo-totop {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--lilo-yellow); color: var(--lilo-black); font-size: 1.4rem; line-height: 1;
  display: grid; place-items: center; z-index: 900;
  opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .3s ease, transform .3s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.lilo-totop.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.lilo-totop:hover { background: var(--lilo-black); color: var(--lilo-yellow); }

/* ---- Scroll-Lock bei offenem Mobile-Menü ---- */
body.lilo-noscroll { overflow: hidden; }