/* burnt. – Animationen
   Additiv: entfernt man die Einbindung im Seitenkopf, bleibt die Seite unverändert.
   Alles respektiert prefers-reduced-motion. */

/* 01 Überschriften steigen auf */
.a-split > span { display: block; overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.16em; }
.a-split > span > i {
  display: block; font-style: normal;
  transform: translateY(102%);
  transition: transform .95s cubic-bezier(.16,1,.3,1);
}
.a-split.an > span > i { transform: translateY(0); }
.a-split.an > span:nth-child(2) > i { transition-delay: .11s; }
.a-split.an > span:nth-child(3) > i { transition-delay: .22s; }
.a-split.an > span:nth-child(4) > i { transition-delay: .33s; }

/* 02 Blöcke blenden beim Scrollen auf */
.a-rv { opacity: 0; transform: translateY(16px); filter: blur(3px);
  transition: opacity .7s ease, transform .9s cubic-bezier(.16,1,.3,1), filter .7s ease; }
.a-rv.an { opacity: 1; transform: none; filter: none; }
.a-rv.a-d1 { transition-delay: .09s; }
.a-rv.a-d2 { transition-delay: .18s; }

/* 03 Zahlen zählen hoch */
.a-num { font-variant-numeric: tabular-nums; }

/* 04 Bilder werden aufgewischt */
.a-wipe { clip-path: inset(100% 0 0 0); transition: clip-path 1.2s cubic-bezier(.16,1,.3,1); }
.a-wipe.an { clip-path: inset(0 0 0 0); }
.a-wipe > img { transform: scale(1.14); transition: transform 1.6s cubic-bezier(.16,1,.3,1); }
.a-wipe.an > img { transform: scale(1.08); }

/* 05 Zitat schärft sich Wort für Wort */
.a-wort > span { opacity: .18; transition: opacity .55s ease; }
.a-wort.an > span { opacity: 1; }
.a-wort.an > span:nth-child(1) { transition-delay: 0s; }
.a-wort.an > span:nth-child(2) { transition-delay: .07s; }
.a-wort.an > span:nth-child(3) { transition-delay: .14s; }
.a-wort.an > span:nth-child(4) { transition-delay: .21s; }
.a-wort.an > span:nth-child(5) { transition-delay: .28s; }
.a-wort.an > span:nth-child(6) { transition-delay: .35s; }
.a-wort.an > span:nth-child(7) { transition-delay: .42s; }
.a-wort.an > span:nth-child(8) { transition-delay: .49s; }
.a-wort.an > span:nth-child(n+9) { transition-delay: .56s; }

/* 06 Fläche schiebt sich als Vorhang über die vorige */
.a-vorhang { position: relative; isolation: isolate; overflow: hidden; }
.a-vorhang::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--surface-bg);
  transform: translateY(100%);
  transition: transform 1.05s cubic-bezier(.65,0,.2,1);
}
.a-vorhang.an::before { transform: translateY(0); }

/* 07 Knöpfe und Links antworten */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-hover-bg);
  transform: translateY(101%);
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.btn:hover { background-color: transparent; }
.btn:hover::before { transform: translateY(0); }

.m14-item .m14-title, .m05-t, .m03-t, .m04-t, .m21-item h3 { position: relative; }
.m14-item .m14-title::after, .m05-t::after, .m03-t::after, .m04-t::after, .m21-item h3::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.m14-item:hover .m14-title::after, .m05-item:hover .m05-t::after,
.m03-card:hover .m03-t::after, .m04-card:hover .m04-t::after,
.m21-item:hover h3::after { transform: scaleX(1); transform-origin: left; }
.m14-item:hover .m14-title, .m05-item:hover .m05-t,
.m03-card:hover .m03-t, .m04-card:hover .m04-t,
.m21-item:hover h3 { text-decoration: none; }

/* Abschalten */
body.ohne-anim *, body.ohne-anim *::before, body.ohne-anim *::after { transition: none !important; animation: none !important; }
body.ohne-anim .a-split > span > i { transform: none; }
body.ohne-anim .a-rv { opacity: 1; transform: none; filter: none; }
body.ohne-anim .a-wipe { clip-path: none; }
body.ohne-anim .a-wipe > img { transform: none; }
body.ohne-anim .a-wort > span { opacity: 1; }
body.ohne-anim .a-vorhang::before { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .a-split > span > i { transform: none; }
  .a-rv { opacity: 1; transform: none; filter: none; }
  .a-wipe { clip-path: none; }
  .a-wipe > img { transform: none; }
  .a-wort > span { opacity: 1; }
  .a-vorhang::before { display: none; }
}

/* 08 Parallax: Bilder wandern beim Scrollen langsamer als die Seite */
.a-wipe.bereit > img { transition: none; will-change: transform; }
.a-wipe.an:not(.bereit) > img { transition: transform .6s cubic-bezier(.16,1,.3,1); }
body.ohne-anim .a-wipe.bereit > img { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .a-wipe.bereit > img { transform: none !important; }
}
