/* Kieferorthopädie-Icons — Bewegung beim Hover
   WICHTIG: die Keyframes animieren translate/scale/rotate (NICHT transform).
   Die Icon-Teile tragen ein SVG-transform-Attribut für ihre Platzierung;
   ein CSS-"transform" würde diese Platzierung überschreiben und das Motiv zerlegen. */

.kfo-icon { display: block; width: 100%; height: 100%; }
.kfo-icon [data-move] {
  transform-box: fill-box;
  transform-origin: center;
}
/* Teile mit eigenem Drehpunkt (rotate(a cx cy)) liegen in einer ÄUSSEREN Gruppe;
   data-move sitzt auf einer inneren Gruppe ohne Platzierungsattribut. */

@keyframes kfo-wand  { 0% { translate:0 0; rotate:0deg } 45% { translate:5px -5px; rotate:-3deg } 100% { translate:0 0; rotate:0deg } }
@keyframes kfo-beam  { 0% { translate:0 0; opacity:1 } 40% { translate:5px 0; opacity:1 } 72% { translate:9px 0; opacity:0 } 73% { translate:-2px 0; opacity:0 } 100% { translate:0 0; opacity:1 } }
@keyframes kfo-pop   { 0% { scale:1 } 45% { scale:1.07 } 72% { scale:0.99 } 100% { scale:1 } }
@keyframes kfo-float { 0% { translate:0 0 } 45% { translate:0 -4px } 100% { translate:0 0 } }
@keyframes kfo-lift  { 0% { translate:0 0 } 45% { translate:0 -5px } 75% { translate:0 1px } 100% { translate:0 0 } }
@keyframes kfo-tilt  { 0% { translate:0 0; rotate:0deg } 45% { translate:-2px -3px; rotate:-5deg } 100% { translate:0 0; rotate:0deg } }
@keyframes kfo-plate { 0% { scale:1; opacity:1 } 20% { scale:1.01; opacity:0.6 } 45% { opacity:1 } 100% { scale:1; opacity:1 } }
@keyframes kfo-line  { 0% { scale:0.35 1; opacity:0 } 60% { scale:1 1; opacity:1 } 100% { scale:1 1; opacity:1 } }
@keyframes kfo-press { 0% { translate:0 0 } 50% { translate:0 3px } 100% { translate:0 0 } }
@keyframes kfo-flex  { 0% { translate:0 0; scale:1 1 } 45% { translate:0 2.5px; scale:1.015 1 } 100% { translate:0 0; scale:1 1 } }

/* Reine CSS-Variante: Hover auf dem Container startet die Bewegung.
   Für Wiederholbarkeit bei jedem Hover die JS-Variante nutzen (kfo-icons.js). */
.kfo-icon-hover:hover [data-move="wand"] { animation: kfo-wand 700ms cubic-bezier(.34,1.16,.44,1) both; }
.kfo-icon-hover:hover [data-move="beam"] { animation: kfo-beam 700ms cubic-bezier(.34,1.16,.44,1) both; }
.kfo-icon-hover:hover [data-move="plate"] { animation: kfo-plate 700ms cubic-bezier(.34,1.16,.44,1) both; }
.kfo-icon-hover:hover [data-move="corners"] { animation: kfo-pop 700ms cubic-bezier(.34,1.16,.44,1) both; }
.kfo-icon-hover:hover [data-move="bubble"] { animation: kfo-lift 700ms cubic-bezier(.34,1.16,.44,1) both; }
.kfo-icon-hover:hover [data-move="line"] { animation: kfo-line 700ms cubic-bezier(.34,1.16,.44,1) both; }
.kfo-icon-hover:hover [data-move="shell"] { animation: kfo-lift 700ms cubic-bezier(.34,1.16,.44,1) both; }
.kfo-icon-hover:hover [data-move="tray"] { animation: kfo-lift 700ms cubic-bezier(.34,1.16,.44,1) both; }
.kfo-icon-hover:hover [data-move="bracket"] { animation: kfo-pop 700ms cubic-bezier(.34,1.16,.44,1) both; }
.kfo-icon-hover:hover [data-move="crown"] { animation: kfo-float 700ms cubic-bezier(.34,1.16,.44,1) both; }
.kfo-icon-hover:hover [data-move="screw"] { animation: kfo-press 700ms cubic-bezier(.34,1.16,.44,1) both; }
.kfo-icon-hover:hover [data-move="wire"] { animation: kfo-flex 700ms cubic-bezier(.34,1.16,.44,1) both; }
.kfo-icon-hover:hover [data-move="moon"] { animation: kfo-tilt 700ms cubic-bezier(.34,1.16,.44,1) both; }
.kfo-icon-hover:hover [data-move="kit"] { animation: kfo-lift 700ms cubic-bezier(.34,1.16,.44,1) both; }
.kfo-icon-hover:hover [data-move="check"] { animation: kfo-pop 700ms cubic-bezier(.34,1.16,.44,1) both; }

@media (prefers-reduced-motion: reduce) {
  .kfo-icon [data-move] { animation: none !important; }
}