/* ==========================================================================
   Motion-Schicht. Animiert werden nur transform, opacity und clip-path.
   Bei prefers-reduced-motion bleibt nur Opacity übrig (siehe unten).
   ========================================================================== */
@layer animations {

/* ---------- Hero-Intro: Headline zeilenweise per Mask-Reveal ---------- */
.mask-line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.mask-line > span { display: inline-block; }
.js .hero .mask-line > span { animation: mask-up 760ms var(--ease-out) both; }
.js .hero .mask-line:nth-child(2) > span { animation-delay: 90ms; }
.js .hero .mask-line:nth-child(3) > span { animation-delay: 180ms; }
@keyframes mask-up { from { transform: translateY(105%); } to { transform: translateY(0); } }

.js .hero .hero__keyline,
.js .hero .intro-fade { animation: fade-up 560ms var(--ease-out) both; }
.js .hero .hero__keyline { animation-delay: 300ms; }
.js .hero .hero__lead { animation-delay: 360ms; }
.js .hero .hero__ask { animation-delay: 430ms; }
.js .hero .hero__ctas { animation-delay: 500ms; }
.js .hero .hero__trust { animation-delay: 620ms; }
@keyframes fade-up { from { opacity: 0; transform: translateY(var(--reveal-shift)); } to { opacity: 1; transform: none; } }

.js .hero .pipe-line { animation: line-draw 1200ms var(--ease-out) 650ms both; }
.js .page-hero .pipe-line { animation: line-draw 1000ms var(--ease-out) 200ms both; }
@keyframes line-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Ken-Burns auf dem Poster, solange kein Video läuft (max. 1.05 über 12 s) */
.hero .media:not(.is-playing) .media__poster { animation: kenburns 12s var(--ease-in-out) infinite alternate; }
.kenburns { animation: kenburns 14s var(--ease-in-out) infinite alternate; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.05); } }

/* ---------- Section-Reveals ---------- */
.reveal-ready .reveal:not(.is-in) { opacity: 0; transform: translateY(var(--reveal-shift)); }
.reveal-ready .reveal {
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}

/* Bild-Reveal: clip-path-Wipe, je Bild einmalig */
.reveal-ready .reveal-img:not(.is-in) { clip-path: inset(0 0 100% 0 round var(--radius-md)); }
.reveal-ready .reveal-img { clip-path: inset(0 0 0 0 round var(--radius-md)); transition: clip-path 900ms var(--ease-out); }
.reveal-ready .reveal-img img { transition: transform 1200ms var(--ease-out); }
.reveal-ready .reveal-img:not(.is-in) img { transform: scale(1.06); }

/* ---------- Kategorie-Punkt pulsiert einmal bei Hover ---------- */
@media (hover: hover) {
}
@keyframes dot-pulse {
  0% { box-shadow: 0 0 0 0 var(--dot); }
  100% { box-shadow: 0 0 0 9px transparent; }
}

/* ---------- Marken-Marquee ---------- */
.marquee.is-running .marquee__track { animation: marquee var(--marquee-dur, 40s) linear infinite; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track, .marquee:focus .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Formular ---------- */
.wizard__step.is-entering-next { animation: step-in-next 380ms var(--ease-out) both; }
.wizard__step.is-entering-prev { animation: step-in-prev 380ms var(--ease-out) both; }
@keyframes step-in-next { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes step-in-prev { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }

.preview { animation: pop-in 360ms var(--ease-spring) both; }
.preview.is-removing { animation: pop-out 220ms var(--ease-out) both; }
@keyframes pop-in { from { opacity: 0; transform: scale(0.86); } to { opacity: 1; transform: none; } }
@keyframes pop-out { to { opacity: 0; transform: scale(0.86); } }

.field__error:not(:empty) { animation: fade-up 240ms var(--ease-out) both; --reveal-shift: -4px; }

.success { animation: fade-up 480ms var(--ease-out) both; }
.success__check circle { stroke-dasharray: 160; stroke-dashoffset: 160; animation: draw 700ms var(--ease-out) 120ms forwards; }
.success__check path { stroke-dasharray: 48; stroke-dashoffset: 48; animation: draw 420ms var(--ease-out) 640ms forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.spinner { animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Lightbox ---------- */
.lightbox[open] { animation: fade-in var(--dur-2) var(--ease-out) both; }
.lightbox[open] .lightbox__stage picture { animation: lb-in var(--dur-3) var(--ease-out) both; }
.lightbox.is-closing { animation: fade-out var(--dur-2) var(--ease-out) both; }
.lightbox.is-closing .lightbox__stage picture { animation: lb-out var(--dur-2) var(--ease-out) both; }
.lightbox__stage picture.is-swapping { animation: lb-swap var(--dur-3) var(--ease-out) both; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes lb-in { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes lb-out { to { opacity: 0; transform: scale(0.96); } }
@keyframes lb-swap { from { opacity: 0; transform: translateX(calc(var(--swap-dir, 1) * 28px)); } to { opacity: 1; transform: none; } }

/* Mobiles Menü */
.mobile-menu[open] { animation: fade-in var(--dur-2) var(--ease-out) both; }
.mobile-menu[open] .mobile-menu__list li { animation: fade-up 420ms var(--ease-out) both; }
.mobile-menu[open] .mobile-menu__list li:nth-child(2) { animation-delay: 40ms; }
.mobile-menu[open] .mobile-menu__list li:nth-child(3) { animation-delay: 80ms; }
.mobile-menu[open] .mobile-menu__list li:nth-child(4) { animation-delay: 120ms; }
.mobile-menu[open] .mobile-menu__list li:nth-child(5) { animation-delay: 160ms; }
.mobile-menu[open] .mobile-menu__list li:nth-child(6) { animation-delay: 200ms; }
.mobile-menu.is-closing { animation: fade-out var(--dur-2) var(--ease-out) both; }

/* View Transitions für Filter (mit FLIP-Fallback in filter.js) */
::view-transition-group(*) { animation-duration: 420ms; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }

} /* @layer animations */

/* ---------- Reduced Motion: Bewegung aus, nur Opacity ----------
   Bewusst ungelayert: schlägt damit alle Layer ohne !important. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms;
    animation-iteration-count: 1;
    transition-duration: 1ms;
    scroll-behavior: auto;
  }
  .reveal-ready .reveal:not(.is-in) { transform: none; }
  .reveal-ready .reveal-img:not(.is-in) { clip-path: none; opacity: 0; }
  .reveal-ready .reveal, .reveal-ready .reveal-img { transition: opacity 200ms linear; }
  .kenburns, .hero .media .media__poster { animation: none; }
  .marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .marquee { mask-image: none; }
  .marquee__item[aria-hidden="true"] { display: none; }
}