/* ============================================================
   demo.css — geteilte Animations- & Interaktions-Schicht fuer alle
   Branchen-Demo-Websites. Farb-/Typo-Identitaet bleibt im jeweiligen
   Inline-<style> der Demo. Hier nur neutrale Bewegung & Helfer.
   ============================================================ */

/* --- Scroll-Reveal: Startzustand nur wenn JS aktiv ist --- */
html.fx [data-reveal]{opacity:0;transform:translateY(34px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
html.fx [data-reveal="left"]{transform:translateX(-44px)}
html.fx [data-reveal="right"]{transform:translateX(44px)}
html.fx [data-reveal="zoom"]{transform:scale(.9)}
html.fx [data-reveal="blur"]{filter:blur(14px)}
html.fx [data-reveal].is-in{opacity:1;transform:none;filter:none}

/* Stagger: Kinder eines Containers laufen versetzt ein */
html.fx [data-stagger]>*{opacity:0;transform:translateY(28px);
  transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
html.fx [data-stagger].is-in>*{opacity:1;transform:none}

/* --- Scroll-Fortschrittsbalken (oben) --- */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:currentColor;transition:width .1s linear;pointer-events:none}

/* --- Tilt (Desktop) --- */
[data-tilt]{transform-style:preserve-3d;transition:transform .25s ease}
[data-tilt] *{transform:translateZ(0)}

/* --- Magnetic-/Hover-Lift Helfer --- */
.fx-lift{transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease}
.fx-lift:hover{transform:translateY(-6px)}

/* --- Marquee (endlose Laufschrift) --- */
.marquee{overflow:hidden;white-space:nowrap}
.marquee__track{display:inline-flex;gap:0;will-change:transform;animation:marquee 24s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* --- Mobile-Navigation (Burger) — fuer alle Demos --- */
.demo-burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;z-index:60}
.demo-burger span{width:26px;height:2px;background:currentColor;transition:transform .3s ease,opacity .3s ease}
.demo-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.demo-burger.is-open span:nth-child(2){opacity:0}
.demo-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:820px){
  .demo-burger{display:flex}
  .nav-links{position:fixed;inset:0 0 0 30%;flex-direction:column !important;justify-content:center;
    gap:26px !important;padding:40px;font-size:20px !important;
    background:rgba(10,10,12,.96);backdrop-filter:blur(16px);
    transform:translateX(100%);transition:transform .4s cubic-bezier(.22,1,.36,1);
    display:flex !important;z-index:55}
  .nav-links.is-open{transform:translateX(0)}
  body.demo-light .nav-links{background:rgba(255,255,255,.97)}
}

/* --- Count-up Ziffern nicht umbrechen --- */
[data-count]{font-variant-numeric:tabular-nums}

/* --- Anker-Sprünge nicht unter dem Sticky-Header landen --- */
[id]{scroll-margin-top:90px}

/* --- Sichtbarer Fokus für Tastatur-Navigation --- */
.nav-links a:focus-visible,.btn:focus-visible,.demo-burger:focus-visible,
.lb-open:focus-visible,input:focus-visible,select:focus-visible{
  outline:3px solid currentColor;outline-offset:3px;border-radius:6px}

/* --- Reduced Motion: alles ruhigstellen --- */
@media(prefers-reduced-motion:reduce){
  html.fx [data-reveal],html.fx [data-stagger]>*{opacity:1 !important;transform:none !important;filter:none !important;transition:none}
  .marquee__track{animation:none}
  *{scroll-behavior:auto !important}
}