/* Bewegung fuer die Unterseiten (Lu, 08.10.2026): dieselbe Sprache wie auf der Startseite
   (apple.com / grok.com). Nur transform/opacity/clip-path. Die versteckten Startzustaende
   gelten nur, wenn bewegung.js laeuft (html.an) - ohne JavaScript ist alles sofort sichtbar.
   Braucht --weich aus der Seite. */

/* Kopf der Seite: Teile tauchen nacheinander aus der Unschaerfe auf (--d = Verzoegerung) */
@keyframes auf{ from{ opacity:0; translate:0 28px; filter:blur(10px) } }
html.an .auf{ animation:auf 1s var(--weich) both; animation-delay:var(--d,0ms) }

/* Karten und Abschnitte kommen beim Scrollen nacheinander herein */
html.an .stufe{ opacity:0; translate:0 56px; scale:.94; transition:opacity .8s var(--weich), translate 1s var(--weich), scale 1s var(--weich); transition-delay:var(--d,0ms) }
html.an .stufe.da{ opacity:1; translate:0 0; scale:1 }

/* Ueberschriften steigen aus einer unsichtbaren Kante auf. Auf der Startseite Wort fuer Wort,
   hier als ganze Zeile - so bleibt die Uebersetzung (Thai) unberuehrt. */
html.an .hebt{ clip-path:inset(-1em -1em 100% -1em); translate:0 .6em; transition:clip-path .9s var(--weich), translate .9s var(--weich) }
html.an .hebt.da{ clip-path:inset(-1em -1em -1em -1em); translate:0 0 }

/* Licht unter der Maus und leichtes Anheben (nur am Computer) */
@media (hover:hover) and (pointer:fine){
  .licht{ background-image:radial-gradient(420px circle at var(--mx,-999px) var(--my,-999px), rgba(201,193,177,.38), transparent 62%) }
  .licht:not(.stufe){ transition:translate .35s var(--weich), box-shadow .35s }
  html.an .licht.stufe.da{ transition:opacity .8s var(--weich), translate .35s var(--weich), scale 1s var(--weich), box-shadow .35s; transition-delay:var(--d,0ms) }
  .licht:hover, html.an .licht.stufe.da:hover{ translate:0 -4px; box-shadow:0 18px 40px -24px rgba(60,50,30,.35) }
}

@media (prefers-reduced-motion: reduce){
  html.an .auf{ animation:none }
  html.an .stufe, html.an .hebt{ opacity:1; translate:none; scale:none; clip-path:none; transition:none }
}