/* motion.css v2 – Whole-Site-Motion Begleit-Styles (Vertikalo)
 * Nutzt deine bestehenden Tokens (--ease etc.), fällt sonst auf Defaults zurück.
 * Nur Transform/Opacity → GPU-freundlich. Bei reduce: alles aus.
 */
:root{
  --vm-dur: 820ms;
  --vm-ease: var(--ease, cubic-bezier(.22,1,.36,1));
  --vm-dist: 30px;
}

/* --- Reveals: Richtungen --- */
.vm-reveal{opacity:0;will-change:opacity,transform;
  transition:opacity var(--vm-dur) var(--vm-ease), transform var(--vm-dur) var(--vm-ease)}
.vm-reveal.is-in{opacity:1;transform:none;clip-path:none}
[data-reveal="up"]    {transform:translateY(var(--vm-dist))}
[data-reveal="down"]  {transform:translateY(calc(-1*var(--vm-dist)))}
[data-reveal="left"]  {transform:translateX(var(--vm-dist))}
[data-reveal="right"] {transform:translateX(calc(-1*var(--vm-dist)))}
[data-reveal="scale"] {transform:scale(.94)}
[data-reveal="clip"]  {clip-path:inset(0 0 100% 0)}      /* wischt von oben auf */
[data-reveal="none"]  {transform:none}

/* --- Load-Choreografie --- */
.vm-load{opacity:0;transform:translateY(18px);will-change:opacity,transform;
  transition:opacity var(--vm-dur) var(--vm-ease), transform var(--vm-dur) var(--vm-ease)}
.vm-load.is-in{opacity:1;transform:none}

/* --- Textzeilen-Reveal (data-split) ---
 * Jede Zeile hat eine Maske; die innere Zeile steigt aus der Maske auf.
 * Staffelung über --li (Index) + optional --vm-stagger vom JS. */
.vm-split .vm-line{display:block;overflow:hidden}
.vm-split .vm-line-i{display:block;transform:translateY(110%);
  transition:transform var(--vm-dur) var(--vm-ease);
  transition-delay:calc(var(--li,0) * 90ms + var(--vm-stagger, 0ms))}
.vm-split.is-in .vm-line-i{transform:none}
/* Wörter-Modus: inline statt block */
.vm-split[data-split="words"] .vm-line{display:inline-block;vertical-align:top}
.vm-split[data-split="words"] .vm-line-i{display:inline-block}

/* --- Scroll-Spy aktiver Link --- */
[data-spy] a.active{color:var(--copper, #B26B3E)}
[data-spy] a{transition:color .3s var(--vm-ease)}

/* --- Mikrointeraktionen: sanfte Rückstellung + Hover-Lift --- */
[data-magnetic],[data-tilt]{transition:transform .22s var(--vm-ease)}
[data-lift]{transition:transform .3s var(--vm-ease), box-shadow .3s var(--vm-ease)}
[data-lift]:hover{transform:translateY(-4px)}

/* --- Kicker-Rule, die beim Reveal „einfährt" (Signature-Detail für Sektionsköpfe) --- */
.vm-rule{display:inline-block;height:1.5px;width:0;background:var(--copper,#B26B3E);
  vertical-align:middle;transition:width .7s var(--vm-ease) .1s}
.is-in .vm-rule, .vm-reveal.is-in.vm-rule{width:44px}

/* --- Liquid-Glass-Utility (pur CSS) --- */
.glass{background:rgba(255,255,255,.10);backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);border:1px solid rgba(255,255,255,.18);
  border-radius:18px;box-shadow:0 8px 32px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.25)}

@media (prefers-reduced-motion: reduce){
  .vm-reveal,.vm-load,.vm-split .vm-line-i,
  [data-reveal],[data-load],[data-parallax],[data-magnetic],[data-tilt]{
    opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .vm-rule{width:44px!important;transition:none!important}
}