/* ========================================================================
   Zahnwerk Eningen — shared motion system.
   Loaded on any page using the reveal / SVG-draw / magnetic-button
   attributes (data-reveal, data-reveal-stagger, data-draw, data-magnetic).
   Page-specific stylesheets (home.css, team-page.css, ...) build on top
   of this and stay free of duplicating these rules.
   ======================================================================== */

:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur-draw: 1100ms;
}

/* ------------------------------------------------------------------------
   Reveal-on-scroll (see motion.js)
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s var(--ease-out-soft), transform 0.7s var(--ease-out-soft);
  }
  [data-reveal].is-in {
    opacity: 1;
    transform: translateY(0);
  }

  [data-reveal-stagger] > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.55s var(--ease-out-soft), transform 0.55s var(--ease-out-soft);
  }
  [data-reveal-stagger].is-in > * {
    opacity: 1;
    transform: translateY(0);
  }
  [data-reveal-stagger].is-in > *:nth-child(1) { transition-delay: 0.03s; }
  [data-reveal-stagger].is-in > *:nth-child(2) { transition-delay: 0.09s; }
  [data-reveal-stagger].is-in > *:nth-child(3) { transition-delay: 0.15s; }
  [data-reveal-stagger].is-in > *:nth-child(4) { transition-delay: 0.21s; }
  [data-reveal-stagger].is-in > *:nth-child(5) { transition-delay: 0.27s; }
  [data-reveal-stagger].is-in > *:nth-child(6) { transition-delay: 0.33s; }
  [data-reveal-stagger].is-in > *:nth-child(7) { transition-delay: 0.39s; }
  [data-reveal-stagger].is-in > *:nth-child(8) { transition-delay: 0.45s; }
}

/* ------------------------------------------------------------------------
   Drawn-line SVG paths (see motion.js initSvgDraw)
   ------------------------------------------------------------------------ */
[data-draw] path {
  transition: stroke-dashoffset var(--dur-draw) var(--ease-out-expo);
}

/* The base `svg { max-width:24px; max-height:24px }` reset (style.css) is
   meant for inline icons; drawn strokes are full-bleed decorative lines
   and need their own explicit width/height set by the page stylesheet. */
[data-draw] {
  max-width: none;
  max-height: none;
}

/* ------------------------------------------------------------------------
   Magnetic buttons (desktop pointer only, see motion.js)
   ------------------------------------------------------------------------ */
[data-magnetic] {
  transition: transform 220ms var(--ease-out-soft);
}