/* ==========================================================================
   Animationen – klein und präzise.
   Animiert werden nur transform, opacity und clip-path.
   Inhalte sind ohne JS immer sichtbar; versteckt wird erst, wenn reveal.js
   den Observer gestartet hat (html.reveal-ready).
   ========================================================================== */

@keyframes nav-underline { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes check-draw { to { stroke-dashoffset: 0; } }
@keyframes error-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes mask-up { from { transform: translateY(105%); } to { transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes step-in { from { opacity: 0; transform: translateX(calc(var(--dir, 1) * 24px)); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: no-preference) {

  /* --- Hero: Headline zeilenweise per Mask-Reveal, danach CTAs gestaffelt.
         Gesamtdauer < 1 s. ------------------------------------------------ */
  [data-hero-title] .line > span { animation: mask-up 620ms var(--ease-expo) both; }
  [data-hero-title] .line:nth-child(1) > span { animation-delay: 60ms; }
  [data-hero-title] .line:nth-child(2) > span { animation-delay: 150ms; }
  [data-hero-title]:not(:has(.line)) { animation: fade-up 560ms var(--ease-expo) both 60ms; }
  [data-hero-fade] { animation: fade-up 480ms var(--ease-expo) both; animation-delay: calc(360ms + var(--i, 0) * 110ms); }

  /* --- Section-Reveals: 14 px, 420 ms, gestaffelt -------------------------- */
  .reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  .reveal-ready [data-reveal].is-in { opacity: 1; transform: none; }

  /* --- Bild-Reveals: einmaliger clip-path-Wipe ----------------------------- */
  .reveal-ready [data-reveal-img] {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 900ms var(--ease-expo);
    transition-delay: calc(var(--i, 0) * 70ms + 80ms);
  }
  .reveal-ready [data-reveal-img] img { transform: scale(1.06); transition: transform 1200ms var(--ease-expo); }
  .reveal-ready .is-in [data-reveal-img], .reveal-ready [data-reveal-img].is-in { clip-path: inset(0 0 0 0); }
  .reveal-ready .is-in [data-reveal-img] img, .reveal-ready [data-reveal-img].is-in img { transform: none; }
  /* Nach dem Reveal greift wieder die Hover-Transition der Karte */
  .reveal-ready [data-reveal-img].is-done img { transition: transform 600ms var(--ease-out), filter 600ms var(--ease-out); }
  .reveal-ready .svc-card:hover [data-reveal-img].is-done img,
  .reveal-ready .ref-tile a:hover [data-reveal-img].is-done img { transform: scale(1.04); }

  /* --- Team-Ausweise: Rollen-Tags gestaffelt ---------------------------- */
  .reveal-ready [data-reveal] .role-tag {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
    transition-delay: calc(380ms + var(--i, 0) * 60ms);
  }
  .reveal-ready [data-reveal].is-in .role-tag { opacity: 1; transform: none; }

  /* --- Marquee ------------------------------------------------------------- */
  .marquee__track { animation: marquee var(--marquee-dur, 46s) linear infinite; }
  .marquee:hover .marquee__track, .marquee:focus-within .marquee__track, .marquee.is-paused .marquee__track { animation-play-state: paused; }

  /* --- Formular-Schritte ------------------------------------------------- */
  .wizard__step.is-entering { animation: step-in 340ms var(--ease-out) both; }
  .pick input:checked + .pick__face .pick__check { animation: pop 320ms var(--ease-expo); }
}

/* --- Reduced Motion: keine Bewegung, nur Opacity --------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  .reveal-ready [data-reveal] { opacity: 0; transition: opacity 300ms linear !important; }
  .reveal-ready [data-reveal].is-in { opacity: 1; }
  .marquee__viewport { mask-image: none; }
  .marquee__track { animation: none !important; width: auto; }
  .marquee__list { flex-wrap: wrap; justify-content: center; }
  .marquee__list[aria-hidden="true"] { display: none; }
  .hero__video { display: none; }
  .badge__card { transform: none !important; }
  .success__check path { stroke-dashoffset: 0; }
}