/* =====================================================================
   saarpixel · Bewegungseffekte für die Salon-Designs
   Eigene, schlanke Nachbauten (reines CSS/JS) nach dem Vorbild von
   Animmaster Lib, Skiper UI und Vengeance UI. Welches Design welche
   Effekte bekommt, steht im Katalog (layouts.js, Feld fx).
   Alle Effekte nutzen die Einzel-Eigenschaften translate/scale/rotate,
   damit sie sich nicht mit transform-Angaben der Designs beißen.
   ===================================================================== */

/* ---------- Einblenden beim Scrollen (rv) ---------- */
#stage .lx .fx-rv{opacity:0;transition:opacity .7s cubic-bezier(.2,.7,.2,1),translate .7s cubic-bezier(.2,.7,.2,1),scale .7s cubic-bezier(.2,.7,.2,1),filter .7s ease,clip-path .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--fxd,0s)}
#stage .lx .fx-rv.fx-auf{translate:0 26px}
#stage .lx .fx-rv.fx-weich{filter:blur(10px)}
#stage .lx .fx-rv.fx-zoom{scale:.9}
#stage .lx .fx-rv.fx-links{translate:-44px 0}
#stage .lx .fx-rv.fx-rechts{translate:44px 0}
#stage .lx .fx-rv.fx-wisch{opacity:1;clip-path:inset(0 100% 0 0)}
#stage .lx .fx-rv.fx-in{opacity:1;translate:none;scale:none;filter:none;clip-path:inset(0)}

/* ---------- Überschrift: Wort für Wort / Buchstabe für Buchstabe / aus dem Nebel (titel) ---------- */
#stage .lx .fx-t{position:relative;top:.5em;opacity:0;transition:top .7s cubic-bezier(.2,.7,.2,1),opacity .6s ease;transition-delay:var(--fxd,0s)}
#stage .lx .fx-tin .fx-t{top:0;opacity:1}
#stage .lx .fx-nebel{filter:blur(14px);opacity:0;transition:filter 1.1s ease,opacity 1.1s ease}
#stage .lx .fx-nebel.fx-tin{filter:none;opacity:1}

/* ---------- Hochzählende Zahlen (zahl) ---------- */
#stage .lx .fx-n{display:inline-block;font-variant-numeric:tabular-nums;text-align:right}

/* ---------- Leistungsliste mit Foto am Mauszeiger (liste) ---------- */
#stage > .fx-float{position:absolute;left:0;top:0;z-index:40;width:200px;aspect-ratio:4/5;pointer-events:none;overflow:hidden;border-radius:10px;box-shadow:0 18px 50px rgba(0,0,0,.35);opacity:0;scale:.85;rotate:-3deg;transition:opacity .25s ease,scale .35s cubic-bezier(.2,.7,.2,1);will-change:translate}
#stage > .fx-float.on{opacity:1;scale:1}
#stage > .fx-float img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- Galerie zum Aufklappen (exp) – nur auf breiten Ansichten ---------- */
@container (min-width:720px){
  #stage .lx .fx-exp{display:flex!important;gap:8px!important;height:clamp(280px,40cqi,480px);overflow:hidden!important}
  #stage .lx .fx-exp > .im{flex:1 1 0!important;min-width:0!important;width:auto!important;height:100%!important;aspect-ratio:auto!important;margin:0!important;transition:flex-grow .55s cubic-bezier(.2,.7,.2,1)}
  #stage .lx .fx-exp > .im:hover{flex-grow:4!important}
  #stage .lx .fx-exp:not(:hover) > .im:first-child{flex-grow:4!important}
}

/* ---------- Knopf mit Lichtschimmer (glanz) ---------- */
#stage .lx .fx-shine{position:relative;overflow:hidden;isolation:isolate}
#stage .lx .fx-shine::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.42) 50%,transparent 65%);translate:-120% 0;animation:fxshine 4.5s ease-in-out infinite;pointer-events:none}
#stage .lx .fx-shine:hover::after{animation-duration:1.3s}
@keyframes fxshine{0%,68%{translate:-120% 0}100%{translate:120% 0}}

/* ---------- Magnetischer Knopf (magnet) ---------- */
#stage .lx .fx-mag{transition:translate .3s cubic-bezier(.2,.7,.2,1),background-color .2s ease,color .2s ease}

/* ---------- Links mit wachsendem Unterstrich (strich) ---------- */
#stage .lx .fx-ul{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0 1.5px;transition:background-size .35s cubic-bezier(.2,.7,.2,1)}
#stage .lx .fx-ul:hover,#stage .lx .fx-ul:focus-visible{background-size:100% 1.5px}

/* ---------- Scroll-Fortschritt (bar) ---------- */
#stage > .fx-bar{position:sticky;top:0;z-index:55;height:0;pointer-events:none}
#stage > .fx-bar i{display:block;height:3px;background:currentColor;transform-origin:0 50%;scale:0 1}

/* ---------- Text leuchtet beim Scrollen Wort für Wort auf (licht) ---------- */
#stage .lx .fx-lw{opacity:.22;transition:opacity .35s ease}
#stage .lx .fx-lw.on{opacity:1}

/* ---------- Laufband (band) ---------- */
#stage .lx .fx-mq{overflow:hidden!important;white-space:nowrap!important;text-align:left!important;padding-left:0!important;padding-right:0!important}
#stage .lx .fx-mq > .fx-mqt{display:inline-flex;animation:fxmq var(--fxs,22s) linear infinite;will-change:translate}
#stage .lx .fx-mq > .fx-mqt > .fx-mqc{flex:none;padding-right:2.2em}
#stage .lx .fx-mq:hover > .fx-mqt{animation-play-state:paused}
@keyframes fxmq{to{translate:-25% 0}}

/* ---------- Pixel-Bildspur am Mauszeiger (spur) ---------- */
#stage .lx .fx-spur{position:relative;overflow:hidden;isolation:isolate}
#stage .lx .fx-spur > *{position:relative;z-index:1}
#stage .lx .fx-spur > .fx-spl{position:absolute;inset:0;z-index:0;pointer-events:none;display:block}
#stage .lx .fx-sp{position:absolute;display:block;width:150px;aspect-ratio:4/5;margin:-94px 0 0 -75px;background-size:cover;background-position:center;animation:fxsp 1.1s steps(7,end) forwards}
@keyframes fxsp{0%{clip-path:inset(0 0 100% 0)}25%,70%{clip-path:inset(0)}100%{clip-path:inset(100% 0 0 0)}}