/* Bewegung »Rollen, nicht hüpfen« — Spezifikation: artefakte/10-INTERACTION-SPEC.md (Version 2)
   Grundsatz: Ohne JavaScript (kein html.js) ist jeder Endzustand sofort sichtbar. */

@keyframes dreh { to { transform: rotate(360deg); } }
@keyframes dreh-scroll { from { transform: rotate(0deg); } to { transform: rotate(160deg); } }
@keyframes zeile-hoch { from { transform: translateY(105%); } to { transform: none; } }
@keyframes weich-ein { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes rad-ein { from { opacity: 0; transform: translateX(10%) rotate(50deg); } to { opacity: 1; transform: none; } }
@keyframes klingeln { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(14deg); } 60% { transform: rotate(-9deg); } 80% { transform: rotate(5deg); } }
@keyframes puls { 0% { box-shadow: 0 0 0 0 rgba(166, 206, 57, .55); } 100% { box-shadow: 0 0 0 10px rgba(166, 206, 57, 0); } }
@keyframes fahren { from { left: 1px; } to { left: calc((100% - 96px) * .3774 + 54px); } }

/* Masken für Überschriften-Zeilen */
.zm { display: block; overflow: hidden; padding-top: .2em; margin-top: -.2em; padding-bottom: .06em; }
.zm > span { display: block; }

/* E1 · Hero-Einfahrt (einmalig) */
html.js .hero__titel-gross .zm > span { animation: zeile-hoch 650ms var(--roll) backwards; }
html.js .hero__titel-gross .zm:nth-child(2) > span { animation-delay: 80ms; }
html.js .hero__titel-gross .zm:nth-child(3) > span { animation-delay: 160ms; }
html.js .hero .status,
html.js .hero__titel-klein { animation: weich-ein 700ms var(--roll) backwards; }
html.js .hero__lead { animation: weich-ein 500ms var(--roll) 180ms backwards; }
html.js .hero__ctas { animation: weich-ein 500ms var(--roll) 240ms backwards; }
html.js .hero__rad { animation: rad-ein 1000ms var(--roll) 80ms backwards; }

/* E2 · Reifen drehen sich */
html.js .rad__zeit { animation: dreh 90s linear infinite; }
@supports (animation-timeline: scroll()) {
  html.js .rad__scroll { animation: dreh-scroll linear both; animation-timeline: scroll(root block); }
}
html.js .nav-reifen { animation: dreh 6s linear infinite; }
html.js .bildring__ring svg { animation: dreh 140s linear infinite; }

/* E3 · Reveals beim Scrollen */
html.js .rv { opacity: 0; transform: translateY(18px); transition: opacity var(--t-reveal) var(--roll), transform var(--t-reveal) var(--roll); }
html.js .rv.sichtbar { opacity: 1; transform: none; }
html.js .rv-kopf .code, html.js .rv-kopf p { opacity: 0; transform: translateY(12px); transition: opacity var(--t-reveal) var(--roll) .15s, transform var(--t-reveal) var(--roll) .15s; }
html.js .rv-kopf .zm > span { transform: translateY(105%); transition: transform 900ms var(--roll); }
html.js .rv-kopf.sichtbar .code, html.js .rv-kopf.sichtbar p { opacity: 1; transform: none; }
html.js .rv-kopf.sichtbar .zm > span { transform: none; }

/* E4 · Kilometerzähler (Fakten) */
html.js .fakt.rv .fakt__zahl > span { transform: translateY(110%); transition: transform 900ms var(--roll) .15s; }
html.js .fakt.rv.sichtbar .fakt__zahl > span { transform: none; }

/* E5 · Profilspur zeichnet sich ein */
html.js .spur.rv { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path 1.4s cubic-bezier(.45, 0, .2, 1); }
html.js .spur.rv.sichtbar { clip-path: inset(0 0 0 0); }

/* E6 · Anfahrtslinie: Punkt fährt von Wien nach Klingenbach */
.strecke__auto { left: calc((100% - 96px) * .3774 + 54px); }
html.js .strecke.rv:not(.sichtbar) .strecke__auto { left: 1px; }
html.js .strecke.rv.sichtbar .strecke__auto { animation: fahren 2.6s var(--roll) .5s both; }

/* E7 · Grafiken */
html.js .profil.rv:not(.sichtbar) .profil__marke { stroke-dashoffset: 400; }
.gr-rad { transition: transform 1.8s var(--roll); }
.gr-rad--klein { transition-delay: .25s; }
.gr-rad--pkw { transition-delay: .12s; }
html.js .groessen.rv:not(.sichtbar) .gr-rad--gross { transform: translateX(-360px) rotate(-320deg); }
html.js .groessen.rv:not(.sichtbar) .gr-rad--pkw { transform: translateX(-200px) rotate(-420deg); }
html.js .groessen.rv:not(.sichtbar) .gr-rad--klein { transform: translateX(-120px) rotate(-420deg); }
html.js .spurprotokoll.rv:not(.sichtbar) .spur-rad--l { transform: rotate(7deg); }
html.js .spurprotokoll.rv:not(.sichtbar) .spur-rad--r { transform: rotate(-5deg); }
html.js .spurprotokoll.rv:not(.sichtbar) .messprotokoll .nachher { opacity: 0; }
html.js .galerie .rv .galerie__bild img, html.js .galerie .rv.fotorahmen svg { transition: transform 900ms var(--roll); }

/* E8 · Menü */
html.js .menue.offen .menue__liste li { animation: weich-ein 500ms var(--roll) backwards; }
html.js .menue.offen .menue__liste li:nth-child(2) { animation-delay: 40ms; }
html.js .menue.offen .menue__liste li:nth-child(3) { animation-delay: 80ms; }
html.js .menue.offen .menue__liste li:nth-child(4) { animation-delay: 120ms; }
html.js .menue.offen .menue__liste li:nth-child(5) { animation-delay: 160ms; }
html.js .menue.offen .menue__liste li:nth-child(6) { animation-delay: 200ms; }
html.js .menue.offen .menue__liste li:nth-child(7) { animation-delay: 240ms; }

/* Pflicht: Bewegung reduzieren */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  html.js .rad__zeit, html.js .rad__scroll, html.js .nav-reifen, html.js .bildring__ring svg, .status__punkt { animation: none !important; }
  html.js .rv, html.js .rv-kopf .code, html.js .rv-kopf p { opacity: 1 !important; transform: none !important; }
  html.js .zm > span, html.js .fakt__zahl > span, html.js .gr-rad, html.js .spur-rad { transform: none !important; }
  html.js .spur.rv { clip-path: none !important; }
  html.js .profil__marke { stroke-dashoffset: 0 !important; }
  html.js .messprotokoll .nachher { opacity: 1 !important; }
  html.js .strecke.rv .strecke__auto { left: calc((100% - 96px) * .3774 + 54px) !important; animation: none !important; }
}