/* ==========================================================================
   AK Physio – Bewegung der Piktogramme, gleich für Reha-Plattform und Website
   --------------------------------------------------------------------------
   Jedes Piktogramm hat eine kleine, eigene Bewegung: die Sonne dreht sich, die
   Pflanze wächst, die Hantel hebt sich, der Haken zeichnet sich.

   Vertrag zwischen Zeichnung und Bewegung:
   - Das Piktogramm selbst trägt den Namen: in der App <svg data-pk="sonne">
     (components/pikto), auf der Website <use href="images/pikto.svg#sonne">.
     Dort laufen die Keyframes und setzen Variablen.
   - Bewegliche Teile lesen diese Variablen:
       Teil A  --pk-x, --pk-y (Länge), --pk-r (Winkel), --pk-s (Zahl)   → .pk-a
       Teil B  --pk-x2, --pk-y2, --pk-r2, --pk-s2                          → .pk-b
       Strich  --pk-d (0 = gezeichnet, 1 = unsichtbar; pathLength="1")    → .pk-d
       Licht   --pk-o (0 → 1; Deckkraft von Füllung bzw. Strahlen)        → .pk-glow, .pk-light
     Der Drehpunkt steht am Teil selbst (transform-origin im Raster 24 × 24).
     Im Website-Sprite stehen dieselben Angaben als style-Attribut, weil Klassen
     aus der Seite nicht in den <use>-Schattenbaum reichen – Variablen erben dagegen.
   - Die Variablen sind registriert (@property), damit sie weich animieren.

   Auslöser: Überfahren/Fokus des umgebenden Links oder Knopfs, aria-current="page"
   (Navigation), aria-pressed="true" (gerade abgehakt) und die Klasse .pk-play
   (einmalig, z. B. Seitenkopf). Bei „weniger Bewegung" steht alles still.

   Bewusst ohne Bewegung: Ampel und Stimmungsgesichter. Die Software bewertet nichts
   (ADR 0004, 0007, 0029) – ein wippendes Gesicht oder eine pulsierende Ampel würde
   eine Einordnung nahelegen.

   Die Website nutzt eine Kopie dieser Datei (apps/website/pikto-motion.css), weil sie
   ohne Build ausgeliefert wird. Änderungen hier dorthin übernehmen (ADR 0030).
   ========================================================================== */

@property --pk-x { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --pk-y { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --pk-r { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@property --pk-s { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --pk-x2 { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --pk-y2 { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --pk-r2 { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@property --pk-s2 { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --pk-d { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --pk-o { syntax: "<number>"; inherits: true; initial-value: 0; }

/* ---- Bewegliche Teile ---- */
.pk-a { transform-box: view-box; transform: translate(var(--pk-x), var(--pk-y)) rotate(var(--pk-r)) scale(var(--pk-s)); }
.pk-b { transform-box: view-box; transform: translate(var(--pk-x2), var(--pk-y2)) rotate(var(--pk-r2)) scale(var(--pk-s2)); }
.pk-d { stroke-dasharray: 1; stroke-dashoffset: var(--pk-d); }
.pk-glow { fill-opacity: calc(0.18 + var(--pk-o) * 0.5); }
.pk-light { opacity: var(--pk-o); }

/* ---- Welche Bewegung gehört zu welchem Piktogramm ---- */
:is([data-pk="sonne"], use[href$="#sonne"]) { --pk-anim: pk-sonne; }
:is([data-pk="abend"], use[href$="#abend"]) { --pk-anim: pk-abend; }
:is([data-pk="mond"], use[href$="#mond"]) { --pk-anim: pk-mond; }
:is([data-pk="hantel"], use[href$="#hantel"]) { --pk-anim: pk-hantel; }
:is([data-pk="tagebuch"], use[href$="#tagebuch"]) { --pk-anim: pk-tagebuch; }
:is([data-pk="kapsel"], use[href$="#kapsel"]) { --pk-anim: pk-kapsel; }
:is([data-pk="lampe"], use[href$="#lampe"]) { --pk-anim: pk-lampe; --pk-dur: 1.1s; }
:is([data-pk="person"], use[href$="#person"]) { --pk-anim: pk-hops; }
:is([data-pk="gruppe"], use[href$="#gruppe"]) { --pk-anim: pk-gruppe; --pk-dur: 1s; }
:is([data-pk="pflanze"], use[href$="#pflanze"]) { --pk-anim: pk-pflanze; --pk-dur: 1s; }
:is([data-pk="haken"], use[href$="#haken"]) { --pk-anim: pk-haken; --pk-dur: 0.7s; }
:is([data-pk="pfeil"], use[href$="#pfeil"], [data-pk="abmelden"]) { --pk-anim: pk-nach-rechts; }
:is([data-pk="pfeil-links"], use[href$="#pfeil-links"]) { --pk-anim: pk-nach-links; }
:is([data-pk="download"], use[href$="#pfeil-unten"]) { --pk-anim: pk-nach-unten; }
:is([data-pk="extern"], use[href$="#extern"]) { --pk-anim: pk-extern; }
:is([data-pk="plus"], use[href$="#plus"], use[href$="#kreuz"]) { --pk-anim: pk-viertel; --pk-dur: 0.6s; }
:is([data-pk="apfel"], use[href$="#apfel"]) { --pk-anim: pk-apfel; }
:is([data-pk="lineal"], use[href$="#lineal"]) { --pk-anim: pk-lineal; }
:is([data-pk="ziel"], use[href$="#ziel"]) { --pk-anim: pk-ziel; }
:is([data-pk="stift"], use[href$="#stift"]) { --pk-anim: pk-stift; }
:is([data-pk="zahnrad"]) { --pk-anim: pk-zahnrad; --pk-dur: 1s; }
:is([data-pk="uhr"], use[href$="#uhr"]) { --pk-anim: pk-uhr; --pk-dur: 1.2s; }
:is([data-pk="pin"], use[href$="#pin"]) { --pk-anim: pk-pin; }
:is([data-pk="telefon"], use[href$="#telefon"]) { --pk-anim: pk-telefon; }
:is([data-pk="brief"], use[href$="#brief"]) { --pk-anim: pk-brief; }
:is([data-pk="schloss"], use[href$="#schloss"]) { --pk-anim: pk-schloss; }
:is([data-pk="rezept"], use[href$="#rezept"]) { --pk-anim: pk-rezept; }
:is([data-pk="handy"], use[href$="#handy"]) { --pk-anim: pk-handy; --pk-dur: 0.6s; }
:is([data-pk="stern"], use[href$="#stern"]) { --pk-anim: pk-stern; }
:is([data-pk="funken"], use[href$="#funken"]) { --pk-anim: pk-funken; }
:is([data-pk="chat"], use[href$="#chat"]) { --pk-anim: pk-chat; }

/* ---- Auslöser ---- */
:is(a, button, summary, [data-pk-host]):is(:hover, :focus-visible) :is([data-pk], use[href*="#"]),
:is([aria-current="page"], [aria-pressed="true"], .pk-play) :is([data-pk], use[href*="#"]),
:is([data-pk], use[href*="#"]).pk-play {
  animation: var(--pk-anim, none) var(--pk-dur, 0.85s) cubic-bezier(0.45, 0, 0.2, 1) var(--pk-delay, 0s) both;
}

@media (prefers-reduced-motion: reduce) {
  :is([data-pk], use[href*="#"]) { animation: none !important; }
}

/* ---- Bewegungen (Endzustand = Ruhe oder deckungsgleich, z. B. Sonne um 45°) ---- */
@keyframes pk-sonne {
  0% { --pk-r: 0deg; --pk-s2: 1; }
  40% { --pk-r: 55deg; --pk-s2: 1.2; }
  70% { --pk-r: 40deg; --pk-s2: 0.95; }
  100% { --pk-r: 45deg; --pk-s2: 1; }
}
@keyframes pk-abend {
  0%, 100% { --pk-y: 0px; }
  35% { --pk-y: 2.5px; }
  70% { --pk-y: -1px; }
}
@keyframes pk-mond {
  0%, 100% { --pk-r: 0deg; --pk-s2: 1; }
  30% { --pk-r: -14deg; --pk-s2: 1.7; }
  65% { --pk-r: 8deg; --pk-s2: 0.8; }
}
@keyframes pk-hantel {
  0%, 100% { --pk-y: 0px; --pk-r: 0deg; }
  35% { --pk-y: -3.5px; --pk-r: -10deg; }
  65% { --pk-y: -1px; --pk-r: 5deg; }
}
@keyframes pk-tagebuch {
  0%, 100% { --pk-y: 0px; --pk-r2: 0deg; }
  35% { --pk-y: 2.5px; --pk-r2: -5deg; }
  65% { --pk-y: -0.8px; --pk-r2: 2deg; }
}
@keyframes pk-kapsel {
  0%, 100% { --pk-r: 0deg; --pk-s2: 1; }
  30% { --pk-r: 22deg; --pk-s2: 1.8; }
  62% { --pk-r: -10deg; --pk-s2: 0.85; }
}
@keyframes pk-lampe {
  0%, 100% { --pk-o: 0; --pk-y: 0px; }
  25% { --pk-o: 1; --pk-y: -1px; }
  75% { --pk-o: 1; --pk-y: 0px; }
}
@keyframes pk-hops {
  0%, 100% { --pk-y: 0px; }
  35% { --pk-y: -2.2px; }
  62% { --pk-y: 0.6px; }
}
@keyframes pk-gruppe {
  0%, 45%, 100% { --pk-y: 0px; }
  25% { --pk-y: -2.2px; }
  0%, 40%, 85%, 100% { --pk-y2: 0px; }
  62% { --pk-y2: -2.2px; }
}
@keyframes pk-pflanze {
  0%, 100% { --pk-s: 1; --pk-s2: 1; }
  20% { --pk-s: 0.5; --pk-s2: 0.6; }
  55% { --pk-s: 1.18; --pk-s2: 0.9; }
  75% { --pk-s: 0.96; --pk-s2: 1.14; }
}
@keyframes pk-haken {
  0% { --pk-d: 1; --pk-s: 0.8; }
  55% { --pk-d: 0; --pk-s: 1.1; }
  100% { --pk-d: 0; --pk-s: 1; }
}
@keyframes pk-nach-rechts {
  0%, 100% { --pk-x: 0px; }
  40% { --pk-x: 3px; }
  70% { --pk-x: -1px; }
}
@keyframes pk-nach-links {
  0%, 100% { --pk-x: 0px; }
  40% { --pk-x: -3px; }
  70% { --pk-x: 1px; }
}
@keyframes pk-nach-unten {
  0%, 100% { --pk-y: 0px; }
  40% { --pk-y: 3px; }
  70% { --pk-y: -1px; }
}
@keyframes pk-extern {
  0%, 100% { --pk-x: 0px; --pk-y: 0px; }
  40% { --pk-x: 1.8px; --pk-y: -1.8px; }
  70% { --pk-x: -0.5px; --pk-y: 0.5px; }
}
@keyframes pk-viertel {
  0% { --pk-r: 0deg; }
  60% { --pk-r: 100deg; }
  100% { --pk-r: 90deg; }
}
@keyframes pk-apfel {
  0%, 100% { --pk-r: 0deg; }
  30% { --pk-r: -20deg; }
  62% { --pk-r: 10deg; }
}
@keyframes pk-lineal {
  0%, 100% { --pk-x: 0px; }
  35% { --pk-x: 2.5px; }
  65% { --pk-x: -1px; }
}
@keyframes pk-ziel {
  0%, 100% { --pk-s: 1; --pk-s2: 1; }
  30% { --pk-s: 0.78; --pk-s2: 1.8; }
  62% { --pk-s: 1.08; --pk-s2: 0.9; }
}
@keyframes pk-stift {
  0%, 100% { --pk-x: 0px; --pk-y: 0px; --pk-r: 0deg; }
  25% { --pk-x: 1.2px; --pk-y: -1.2px; --pk-r: -6deg; }
  50% { --pk-x: -1px; --pk-y: 1px; --pk-r: 3deg; }
  75% { --pk-x: 0.8px; --pk-y: -0.6px; --pk-r: -2deg; }
}
@keyframes pk-zahnrad {
  0% { --pk-r: 0deg; }
  70% { --pk-r: 52deg; }
  100% { --pk-r: 45deg; }
}
@keyframes pk-uhr {
  0% { --pk-r: 0deg; }
  100% { --pk-r: 360deg; }
}
@keyframes pk-pin {
  0%, 55%, 100% { --pk-y: 0px; }
  30% { --pk-y: -4px; }
  75% { --pk-y: -1.5px; }
}
@keyframes pk-telefon {
  0%, 100% { --pk-r: 0deg; }
  15% { --pk-r: -14deg; }
  35% { --pk-r: 12deg; }
  55% { --pk-r: -9deg; }
  75% { --pk-r: 6deg; }
}
@keyframes pk-brief {
  0%, 100% { --pk-y: 0px; --pk-s2: 1; }
  35% { --pk-y: -1.6px; --pk-s2: 1.05; }
  65% { --pk-y: 0.4px; --pk-s2: 1; }
}
@keyframes pk-schloss {
  0%, 100% { --pk-y: 0px; }
  30%, 60% { --pk-y: -2.4px; }
  80% { --pk-y: 0.4px; }
}
@keyframes pk-rezept {
  0%, 100% { --pk-r: 0deg; --pk-y: 0px; }
  30% { --pk-r: -8deg; --pk-y: -1.2px; }
  62% { --pk-r: 5deg; --pk-y: 0px; }
}
@keyframes pk-handy {
  0%, 100% { --pk-x: 0px; }
  12.5%, 62.5% { --pk-x: -1.2px; }
  37.5%, 87.5% { --pk-x: 1.2px; }
}
@keyframes pk-stern {
  0% { --pk-r: 0deg; --pk-s: 1; }
  50% { --pk-s: 1.18; }
  100% { --pk-r: 72deg; --pk-s: 1; }
}
@keyframes pk-funken {
  0%, 100% { --pk-s: 1; --pk-s2: 1; }
  30% { --pk-s: 1.25; --pk-s2: 0.6; }
  62% { --pk-s: 0.95; --pk-s2: 1.6; }
}
@keyframes pk-chat {
  0%, 100% { --pk-s: 1; --pk-x2: 0px; }
  30% { --pk-s: 1.08; --pk-x2: 1px; }
  62% { --pk-s: 0.97; --pk-x2: -0.5px; }
}