/* =========================================================================
   STY Bewegung
   -------------------------------------------------------------------------
   Vier Effekte, mehr nicht: ein ruhig atmendes Hero-Bild, ein einmaliges
   Erscheinen von Überschrift und Schaltflächen, Karten und Stationen, die
   beim Scrollen einmal auftauchen, und ein kurzer Hover auf den Buttons.

   OHNE JAVASCRIPT IST ALLES SOFORT SICHTBAR
   -----------------------------------------
   Jede Regel, die etwas verbirgt, hängt an .sty-bewegung am <html>. Diese
   Klasse setzt ausschliesslich sty-bewegung.js, und zwar noch im <head>.
   Bleibt das Skript aus -- Fehler, Blockierung, alter Browser --, greift
   keine einzige Versteck-Regel und die Seite steht vollständig da.

   WARUM :where()
   --------------
   Die Versteck-Regeln sprechen die Elemente über ihre Struktur an, nicht
   über eine von JavaScript nachgereichte Klasse. Sonst wären sie im Moment
   des Seitenaufbaus noch sichtbar und würden beim Setzen der Klasse
   sichtbar wegblitzen. :where() zählt nicht zur Spezifität, deshalb wiegt
   jede Versteck-Regel nur so viel wie eine einzelne Klasse -- und die
   Sichtbar-Regel .sty-auftritt--da gewinnt zuverlässig gegen sie.

   NICHT ENTHALTEN
   ---------------
   Kein Parallax, keine Scrollsperre, keine Bewegung im Kassenbereich, in
   Formularen oder in Lektionstexten -- dort stört sie beim Lesen und beim
   Bezahlen. Das regelt die Einbindung in functions.php.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Hero: das vorhandene Hintergrundbild atmet
   -------------------------------------------------------------------------
   Sehr langsam und sehr wenig: 40 Sekunden für 3 Prozent. Kein Versatz beim
   Scrollen, damit daraus kein Parallax wird. Die Bewegung läuft über
   transform, das die Grafikkarte übernimmt -- sie kostet kein Layout und
   bremst deshalb weder Text noch Schaltflächen.

   Unter 768px bleibt das Bild stehen: auf dem Telefon füllt der Hero fast
   den Schirm, dort fällt schon geringe Bewegung auf, und sie kostet Akku.

   Nur die Startseite. Die Unterseiten tragen zusätzlich .sty-seitenhero und
   bleiben unbewegt -- so stand es im Auftrag. Sollen sie später mitatmen,
   genügt es, :not(.sty-seitenhero) aus den beiden Regeln zu streichen.
   ---------------------------------------------------------------------- */

@media (min-width:768px){
  .sty-section--hero:not(.sty-seitenhero) .sty-section__hintergrund img{
    animation:sty-atem 40s ease-in-out infinite alternate;
    transform-origin:center center;
    will-change:transform;
  }
}

@keyframes sty-atem{
  from{transform:scale(1)}
  to{transform:scale(1.03)}
}

/* -------------------------------------------------------------------------
   2. Einmal erscheinen
   -------------------------------------------------------------------------
   Kurz und flach: 12px Weg, 600ms. Länger wirkt träge, weiter wirkt unruhig.
   Die Elemente bleiben die ganze Zeit vorhanden und anklickbar -- es ändert
   sich nur, wie sie aussehen, nie ob sie da sind.
   ---------------------------------------------------------------------- */

/* Der Hero-Text: erscheint einmal beim Laden. */
.sty-bewegung :where(
  .sty-section--hero .sty-eyebrow,
  .sty-section--hero .sty-title,
  .sty-section--hero .sty-lead,
  .sty-section--hero .sty-aktionen
),
/* Modulkarten und Themenkacheln: erscheinen beim Scrollen. */
.sty-bewegung :where(.sty-thema, .sty-modul),
/* Olafs Stationen: erscheinen beim Scrollen, nacheinander. */
.sty-bewegung :where(.sty-zeitleiste > li){
  opacity:0;
  transform:translate3d(0,12px,0);
}

.sty-bewegung .sty-auftritt--da{
  opacity:1;
  transform:none;
  transition:opacity .6s ease-out, transform .6s ease-out;
}

/* Nacheinander, nicht gleichzeitig: 90ms Abstand genügen, um die Reihenfolge
   zu lesen, ohne dass man auf das letzte Element wartet. Vier Stufen reichen;
   darüber hinaus erscheint alles Weitere ohne Verzögerung, damit eine lange
   Liste nicht spürbar nachhinkt. */
.sty-bewegung .sty-auftritt--da.sty-auftritt--2{transition-delay:.09s}
.sty-bewegung .sty-auftritt--da.sty-auftritt--3{transition-delay:.18s}
.sty-bewegung .sty-auftritt--da.sty-auftritt--4{transition-delay:.27s}

/* -------------------------------------------------------------------------
   3. Modulkarten: Hover nur mit echtem Zeigegerät
   -------------------------------------------------------------------------
   hover:hover und pointer:fine schliessen Touchgeräte aus. Ohne diese
   Abfrage bliebe der Hover-Zustand nach dem Antippen kleben, bis man
   woanders hintippt.

   Das Bild sitzt in einem Rahmen mit overflow:hidden (sty-public.css),
   deshalb wächst beim Vergrössern nichts über die Kachel hinaus.
   ---------------------------------------------------------------------- */

@media (hover:hover) and (pointer:fine){
  .sty-thema__bild img,
  .sty-modul__bild img{
    transition:transform .45s ease-out;
    will-change:transform;
  }
  .sty-thema__link:hover .sty-thema__bild img,
  .sty-modul:hover .sty-modul__bild img{transform:scale(1.04)}

  .sty-thema__pfeil{transition:transform .3s ease-out}
  .sty-thema__link:hover .sty-thema__pfeil{transform:translateX(4px)}
}

/* -------------------------------------------------------------------------
   4. Schaltflächen: ein kurzer, einheitlicher Hover
   -------------------------------------------------------------------------
   Schwarz und Gold bleiben, wie sie sind -- die Farbwechsel stehen bereits
   in sty-baukasten.css. Hier kommt nur dazu, dass sie weich laufen, und ein
   Anheben um 1px als Rückmeldung. Nichts pulsiert, nichts springt, und der
   Effekt ist auf allen wichtigen Schaltflächen derselbe.
   ---------------------------------------------------------------------- */

.sty-btn{
  transition:background-color .2s ease-out,
             border-color .2s ease-out,
             color .2s ease-out,
             transform .2s ease-out;
}

@media (hover:hover) and (pointer:fine){
  .sty-btn:hover{transform:translateY(-1px)}
  .sty-btn:active{transform:translateY(0)}
}

/* Der Tastaturfokus bleibt unverschoben -- er ist keine Dekoration, sondern
   zeigt, wo man gerade ist. */
.sty-btn:focus-visible{transform:none}

/* -------------------------------------------------------------------------
   Ruhe auf Wunsch
   -------------------------------------------------------------------------
   sty-base.css kürzt bei "Bewegung reduzieren" bereits jede Animation und
   jeden Übergang auf nahezu null. Hier wird zusätzlich sichergestellt, dass
   kein Element in seinem Versteck-Zustand hängenbleibt, falls JavaScript die
   Sichtbar-Klasse einmal nicht setzt.
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  .sty-bewegung :where(
    .sty-section--hero .sty-eyebrow,
    .sty-section--hero .sty-title,
    .sty-section--hero .sty-lead,
    .sty-section--hero .sty-aktionen,
    .sty-thema,
    .sty-modul,
    .sty-zeitleiste > li
  ){
    opacity:1 !important;
    transform:none !important;
  }
  .sty-section--hero:not(.sty-seitenhero) .sty-section__hintergrund img{animation:none !important}
}