/* ============================================================
   MY SKIN WARRIOR — Animations (gemeinsames Effekt-Vokabular)
   Eingebunden von index.html und ueber-mich.html.
   Versteckte Ausgangszustände gelten nur unter html.js —
   ohne JavaScript ist alles sofort sichtbar (kein CLS).
   prefers-reduced-motion und body.motion-off schalten alles ab.
   ============================================================ */

/* ---- Reveal on scroll ---- */
html.js .reveal { opacity: 0; transform: translateY(22px); }
html.js .reveal.in {
  opacity: 1; transform: none;
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: var(--rd, 0ms);
}

/* Bild-Settle: Container revealt, das Bild setzt sich aus leichtem Zoom */
.reveal-img { overflow: hidden; }
html.js .reveal-img img { scale: 1.06; transition: scale 1.2s var(--ease-out); }
html.js .reveal-img.in img,
html.js .in .reveal-img img { scale: 1; }

/* ---- Stagger-Gruppen: Kinder blenden nacheinander ein ----
   animations.js vergibt --rd pro Kind (data-stagger="70" = Schrittweite ms) */
html.js [data-stagger] > * { opacity: 0; translate: 0 16px; }
html.js [data-stagger].in > * {
  opacity: 1; translate: 0 0;
  transition: opacity 0.6s var(--ease-out), translate 0.6s var(--ease-out);
  transition-delay: var(--rd, 0ms);
}

/* ---- Gezogene Linie unter <em> (Signature-Unterstreichung) ---- */
.u-wavy { position: relative; display: inline-block; }
.u-wavy .u-draw {
  position: absolute; left: -0.04em; bottom: -0.1em; width: calc(100% + 0.08em); height: 0.24em;
  overflow: visible; pointer-events: none;
}
.u-wavy .u-draw path {
  fill: none; stroke: var(--accent); stroke-width: 3px; stroke-linecap: round;
  vector-effect: non-scaling-stroke; opacity: 0.85;
}
html.js .u-wavy .u-draw path {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.8s var(--ease) 0.55s;
}
html.js .in .u-wavy .u-draw path,
html.js .u-wavy.in .u-draw path { stroke-dashoffset: 0; }

/* ---- Linien, die sich ziehen (Divider, Regel-Elemente) ---- */
html.js .line-grow { transform: scaleX(0); transform-origin: center; }
html.js .line-grow.in,
html.js .in .line-grow {
  transform: scaleX(1);
  transition: transform 0.9s var(--ease-out) var(--rd, 0ms);
}

/* ---- Count-up-Zahlen (via animations.js) ---- */
[data-count] { font-variant-numeric: tabular-nums; }

/* ============================================================
   Reduced Motion / motion-off: alles sofort sichtbar, keine Effekte
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html.js .reveal,
  html.js [data-stagger] > * { opacity: 1; transform: none; translate: 0 0; transition: none; }
  html.js .reveal-img img { scale: 1; transition: none; }
  html.js .u-wavy .u-draw path { stroke-dashoffset: 0; transition: none; }
  html.js .line-grow { transform: none; transition: none; }
}
body.motion-off .reveal,
body.motion-off [data-stagger] > * { opacity: 1 !important; transform: none !important; translate: 0 0 !important; transition: none !important; }
body.motion-off .reveal-img img { scale: 1 !important; transition: none !important; }
body.motion-off .u-wavy .u-draw path { stroke-dashoffset: 0 !important; transition: none !important; }
body.motion-off .line-grow { transform: none !important; transition: none !important; }