/* Reiners Fahrschule, Bewegung
   Angelegt 24.09.2026. Alle Einblend- und Auftrittsbewegungen stehen hier,
   auf allen Seiten eingebunden und als letzte Datei geladen. Wer die Seite
   ruhiger haben will, dreht hier, nicht in den anderen Dateien.

   Drei Grundregeln:
   1. Alles steht in prefers-reduced-motion:no-preference. Wer auf dem Gerät
      "Bewegung reduzieren" eingeschaltet hat, sieht nichts davon.
   2. Was beim Scrollen kommt, haengt an .js (gesetzt im Kopf jeder Seite).
      Ohne Skript ist sofort alles sichtbar.
   3. animation mit fill-mode backwards, nicht transition. So gilt der
      Ausgangszustand nur waehrend Wartezeit und Ablauf, danach greifen die
      normalen Regeln wieder, und Hover-Bewegungen bleiben unberuehrt.

   Ausloeser: .rfj-visible (Startseite, seite.js) und .rf-da (Unterseiten,
   rahmen.js). Was ohne Scrollen sofort sichtbar ist, laeuft beim Laden. */

/* ===================== Bausteine ===================== */

@keyframes rf-steigen{
  from{opacity:0;transform:perspective(900px) translateY(60px) rotateX(-18deg) scale(.9)}
  to{opacity:1;transform:none}
}
@keyframes rf-heben{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:none}
}
@keyframes rf-scharf{
  from{opacity:0;filter:blur(14px)}
  to{opacity:1;filter:none}
}
@keyframes rf-markieren{
  from{background-size:0% 100%}
  to{background-size:100% 100%}
}
@keyframes rf-aufziehen{
  from{clip-path:inset(0 100% 0 0 round 20px)}
  to{clip-path:inset(0 0 0 0 round 20px)}
}
@keyframes rf-wisch{
  from{clip-path:inset(0 100% 0 0 round 18px);transform:scale(1.15)}
  to{clip-path:inset(0 0 0 0 round 18px);transform:none}
}
@keyframes rf-glanz{
  0%{transform:translateX(-130%);opacity:1}
  80%{opacity:1}
  100%{transform:translateX(420%);opacity:0}
}
@keyframes rf-ploppen{
  0%{opacity:0;transform:scale(.4)}
  65%{opacity:1;transform:scale(1.08)}
  100%{opacity:1;transform:none}
}
@keyframes rf-rollen{
  from{opacity:0;transform:scale(.5) rotate(-14deg)}
  to{opacity:1;transform:none}
}
@keyframes rf-kalenderblatt{
  0%{opacity:0;transform:perspective(500px) rotateX(-110deg)}
  60%{opacity:1;transform:perspective(500px) rotateX(14deg)}
  100%{opacity:1;transform:none}
}
@keyframes rf-sterne{
  from{opacity:0;letter-spacing:.9em}
  to{opacity:1;letter-spacing:.14em}
}
@keyframes rf-zoom{
  from{transform:scale(1.1)}
  to{transform:none}
}
@keyframes rf-setzen{
  from{transform:scale(1.05) translateY(10px)}
  to{transform:none}
}
@keyframes rf-linie{
  from{transform:scaleY(0)}
  to{transform:scaleY(1)}
}

/* Textmarker unter dem roten Teil der Ueberschriften. Er steht auch ohne
   Bewegung, nur das Ziehen des Markers ist Animation. Hausgelb, nur das
   untere Drittel der Zeile, damit die rote Schrift klar bleibt: Kontrast
   rund 5,2:1 an der ungünstigsten Stelle, bei Ueberschriftgroesse reichen
   3:1. Auf dem dunklen Statement nicht, dort ist die Schrift selbst gelb. */
#rfj-startseite .rfj-tafel h2 em{
  background:linear-gradient(transparent 60%,rgba(255,202,40,.42) 60%,rgba(255,202,40,.42) 92%,transparent 92%) no-repeat left;
  background-size:100% 100%;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  padding:0 .06em;
}

/* Lichtstreif fuer das Freiwischen */
#rfj-startseite .rfj-silke figure{position:relative;overflow:hidden;border-radius:18px}
#rfj-startseite .rfj-silke figure::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:35%;
  pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);
}
#rfj-startseite .rfj-hero{overflow:hidden}

@media(prefers-reduced-motion:no-preference){

  /* ===================== Startseite, beim Laden ===================== */

  /* Das Hero-Bild setzt sich einmal langsam. Kein Dauerzoom. */
  #rfj-startseite .rfj-hero-bild{animation:rf-zoom 2.6s cubic-bezier(.16,.84,.3,1) backwards}

  /* Die Kurstafel steigt nach dem Bild auf, dann klappt das Datum wie
     ein Kalenderblatt herunter, dann kommen die Knoepfe. */
  #rfj-startseite .rfj-kurs{animation:rf-heben .8s cubic-bezier(.16,.84,.3,1) .35s backwards}
  #rfj-startseite .rfj-kurs-datum i{
    transform-origin:50% 0;
    animation:rf-kalenderblatt .9s cubic-bezier(.34,1.3,.64,1) .9s backwards;
  }
  #rfj-startseite .rfj-kurs-knoepfe .rfj-knopf{animation:rf-ploppen .6s ease 1.35s backwards}
  #rfj-startseite .rfj-kurs-knoepfe .rfj-knopf+.rfj-knopf{animation-delay:1.45s}

  /* ===================== Startseite, beim Scrollen ===================== */

  /* Das kleine Label ueber der Ueberschrift zieht sich von links auf. */
  .js #rfj-startseite .rfj-visible .rfj-marke{animation:rf-aufziehen .7s cubic-bezier(.65,0,.25,1) .15s backwards}

  /* Ueberschrift: erst steigt der schwarze Teil, dann wird der rote scharf,
     dann zieht der Textmarker darunter durch. */
  .js #rfj-startseite .rfj-visible h2{animation:rf-heben .8s cubic-bezier(.16,.84,.3,1) .2s backwards}
  .js #rfj-startseite .rfj-visible h2 em{animation:rf-scharf .9s ease .6s backwards}
  .js #rfj-startseite .rfj-visible .rfj-tafel h2 em{
    animation:rf-scharf .9s ease .6s backwards,rf-markieren .8s cubic-bezier(.65,0,.25,1) 1.15s backwards;
  }

  /* Gruppen steigen einzeln herein, leicht gekippt, mit kleinem Nachfedern. */
  .js #rfj-startseite .rfj-visible :is(.rfj-karten,.rfj-klassen,.rfj-bewert)>*{
    animation:rf-steigen .8s cubic-bezier(.34,1.25,.64,1) backwards;
    animation-delay:calc(.35s + var(--i,0) * 100ms);
  }
  /* Die runden Teambilder rollen herein. */
  .js #rfj-startseite .rfj-visible .rfj-team>*{
    animation:rf-rollen .8s cubic-bezier(.34,1.4,.64,1) backwards;
    animation-delay:calc(.35s + var(--i,0) * 140ms);
  }
  :is(#rfj-startseite .rfj-karten,#rfj-startseite .rfj-klassen,#rfj-startseite .rfj-bewert,#rfj-startseite .rfj-team,.rf-posten,.rf-galerie,.rf-leute)>:nth-child(2){--i:1}
  :is(#rfj-startseite .rfj-karten,#rfj-startseite .rfj-klassen,#rfj-startseite .rfj-bewert,#rfj-startseite .rfj-team,.rf-posten,.rf-galerie,.rf-leute)>:nth-child(3){--i:2}
  :is(#rfj-startseite .rfj-karten,#rfj-startseite .rfj-klassen,#rfj-startseite .rfj-bewert,#rfj-startseite .rfj-team,.rf-posten,.rf-galerie,.rf-leute)>:nth-child(4){--i:3}
  :is(#rfj-startseite .rfj-karten,#rfj-startseite .rfj-klassen,#rfj-startseite .rfj-bewert,#rfj-startseite .rfj-team,.rf-posten,.rf-galerie,.rf-leute)>:nth-child(5){--i:4}
  :is(#rfj-startseite .rfj-karten,#rfj-startseite .rfj-klassen,#rfj-startseite .rfj-bewert,#rfj-startseite .rfj-team,.rf-posten,.rf-galerie,.rf-leute)>:nth-child(6){--i:5}
  :is(#rfj-startseite .rfj-karten,#rfj-startseite .rfj-klassen,#rfj-startseite .rfj-bewert,#rfj-startseite .rfj-team,.rf-posten,.rf-galerie,.rf-leute)>:nth-child(7){--i:6}
  :is(#rfj-startseite .rfj-karten,#rfj-startseite .rfj-klassen,#rfj-startseite .rfj-bewert,#rfj-startseite .rfj-team,.rf-posten,.rf-galerie,.rf-leute)>:nth-child(8){--i:7}

  /* Bewertungsnote: die 5,0 ploppt, die Sterne fliegen zusammen. */
  .js #rfj-startseite .rfj-visible .rfj-note b{animation:rf-ploppen .7s ease .5s backwards}
  .js #rfj-startseite .rfj-visible .rfj-note span{animation:rf-sterne 1s cubic-bezier(.16,.84,.3,1) .75s backwards}

  /* Das Bild im Silke-Abschnitt wird freigewischt wie eine Scheibe. */
  .js #rfj-startseite .rfj-visible .rfj-silke img{animation:rf-wisch 1.4s cubic-bezier(.65,0,.25,1) .25s backwards}
  .js #rfj-startseite .rfj-visible .rfj-silke figure::after{animation:rf-glanz 1.4s cubic-bezier(.65,0,.25,1) .25s backwards}

  /* Knoepfe kommen zuletzt, nachdem der Text steht. */
  .js #rfj-startseite .rfj-visible .rfj-tafel .rfj-knopf,
  .js #rfj-startseite .rfj-visible .rfj-statement .rfj-knopf{animation:rf-ploppen .6s ease 1s backwards}

  /* ===================== Unterseiten ===================== */

  /* Seitenkopf-Bild: setzt sich einmal langsam, wie das Hero-Bild. Bewusst
     kein Freiwischen: Das Kopfbild ist das groesste Element beim Laden und
     zaehlt fuer die gemessene Ladezeit. Solange es verdeckt ist, gilt es als
     nicht da. Ein Zoom verdeckt nichts. */
  /* Nur fuenf Prozent: Das Bild traegt einen Schlagschatten und darf nicht
     beschnitten werden, ein groesserer Zoom ragte kurz ueber den Text. */
  .rf-titel-bild figure img{animation:rf-setzen 1.8s cubic-bezier(.16,.84,.3,1) backwards}

  /* Kacheln, Posten, Galerie und Team nacheinander. */
  .js .rf-da:is(.rf-posten,.rf-galerie,.rf-leute)>*,
  .js .rf-da :is(.rf-posten,.rf-galerie,.rf-leute)>*{
    animation:rf-steigen .8s cubic-bezier(.34,1.25,.64,1) backwards;
    animation-delay:calc(.25s + var(--i,0) * 100ms);
  }

  /* Die dunkle Klassenkachel auf der Ausbildungsseite ploppt auf. */
  .js .rf-klasse.rf-da>div:first-child{animation:rf-ploppen .7s ease .2s backwards}

  /* Anmeldeablauf: jeder Kreis ploppt, wenn er erreicht wird, der Text
     gleitet daneben herein, und die Linie zum naechsten Schritt zeichnet
     sich nach unten. So erzaehlt die Bewegung die Reihenfolge. */
  .js .rf-schritte>li::before{opacity:0}
  .js .rf-schritte>li>*{opacity:0}
  .js .rf-schritte>li::after{transform:scaleY(0);transform-origin:50% 0}
  .js .rf-schritte>li.rf-da::before{opacity:1;animation:rf-ploppen .6s ease backwards}
  .js .rf-schritte>li.rf-da>*{opacity:1;animation:rf-heben .6s cubic-bezier(.16,.84,.3,1) .15s backwards}
  .js .rf-schritte>li.rf-da::after{transform:none;animation:rf-linie .9s cubic-bezier(.65,0,.25,1) .45s backwards}
}