/* Animationsbibliothek des CMS
 *
 * Vokabular und Namen orientieren sich an Animate.css, weil SP Page Builder
 * dieselbe Sprache spricht - "fadeInUp", "zoomIn", "bounceIn" bedeuten hier
 * also genau das, was ein Umsteiger erwartet.
 *
 * Bewusst selbst geschrieben statt eingebunden: Animate.css bringt rund 90
 * Effekte mit, von denen ein Projekt eine Handvoll benutzt. Diese Datei
 * enthaelt nur die Effekte, die im Builder auch auswaehlbar sind.
 *
 * Steuerung ueber CSS-Variablen, die das Theme-JavaScript je Element setzt:
 *   --cms-duration   Dauer
 *   --cms-delay      Verzoegerung
 *   --cms-ease       Beschleunigungskurve
 *   --cms-distance   Weg fuer die gerichteten Effekte
 *   --cms-scale      Startgroesse fuer Zoom
 *   --cms-rotate     Startdrehung
 */

[data-cms-anim] {
  --cms-duration: 700ms;
  --cms-delay: 0ms;
  --cms-ease: cubic-bezier(.22, .61, .36, 1);
  --cms-distance: 55px;
  --cms-scale: .92;
  --cms-rotate: -8deg;
}

/* Einblend-Effekte sind von Anfang an unsichtbar.
 *
 * Wichtig: Diese Regel steht im Stylesheet, nicht im JavaScript. Würde erst
 * ein Skript die Startdeckkraft setzen, wäre das Element bis dahin schon
 * gezeichnet - es blitzt auf, verschwindet und kommt animiert zurück. Dieses
 * Aufblitzen ist der Grund, warum Einblendungen "hart" wirken.
 *
 * Die Markierung setzt der Renderer nur bei Effekten, die einblenden. Ohne
 * JavaScript greift das <noscript>-Gegenstück im Layout und macht alles
 * sichtbar - Inhalt darf niemals dauerhaft verborgen bleiben. */
[data-cms-anim-hidden]:not(.cms-anim-in) {
  opacity: 0;
}

.cms-anim-in {
  animation-name: var(--cms-anim-name);
  animation-duration: var(--cms-duration);
  animation-delay: var(--cms-delay);
  animation-timing-function: var(--cms-ease);
  animation-fill-mode: both;
}

/* Aufmerksamkeits-Effekte laufen auf sichtbaren Elementen und dürfen sich
   wiederholen. */
.cms-anim-loop { animation-iteration-count: infinite; }

/* Wer Bewegung reduziert haben möchte, bekommt den Inhalt sofort und
   vollständig. Niemals unsichtbar stehen bleibende Elemente. */
@media (prefers-reduced-motion: reduce) {
  [data-cms-anim],
  [data-cms-anim-hidden],
  .cms-anim-in {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }
}

/* Im Builder darf nichts unsichtbar sein - sonst bearbeitet man Luft. */
[data-builder-preview="1"] [data-cms-anim],
[data-builder-preview="1"] [data-cms-anim-hidden] {
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
}

/* ------------------------------------------------------------------ *
 * Einblenden
 * ------------------------------------------------------------------ */

@keyframes cmsFadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes cmsFadeInUp { from { opacity: 0; transform: translateY(var(--cms-distance)) } to { opacity: 1; transform: none } }
@keyframes cmsFadeInDown { from { opacity: 0; transform: translateY(calc(var(--cms-distance) * -1)) } to { opacity: 1; transform: none } }
@keyframes cmsFadeInLeft { from { opacity: 0; transform: translateX(calc(var(--cms-distance) * -1)) } to { opacity: 1; transform: none } }
@keyframes cmsFadeInRight { from { opacity: 0; transform: translateX(var(--cms-distance)) } to { opacity: 1; transform: none } }
@keyframes cmsFadeInUpBig { from { opacity: 0; transform: translateY(60vh) } to { opacity: 1; transform: none } }
@keyframes cmsFadeInDownBig { from { opacity: 0; transform: translateY(-60vh) } to { opacity: 1; transform: none } }
@keyframes cmsFadeInLeftBig { from { opacity: 0; transform: translateX(-60vw) } to { opacity: 1; transform: none } }
@keyframes cmsFadeInRightBig { from { opacity: 0; transform: translateX(60vw) } to { opacity: 1; transform: none } }

/* ------------------------------------------------------------------ *
 * Schieben - ohne Deckkraftwechsel
 * ------------------------------------------------------------------ */

@keyframes cmsSlideInUp { from { transform: translateY(var(--cms-distance)) } to { transform: none } }
@keyframes cmsSlideInDown { from { transform: translateY(calc(var(--cms-distance) * -1)) } to { transform: none } }
@keyframes cmsSlideInLeft { from { transform: translateX(calc(var(--cms-distance) * -1)) } to { transform: none } }
@keyframes cmsSlideInRight { from { transform: translateX(var(--cms-distance)) } to { transform: none } }

/* ------------------------------------------------------------------ *
 * Zoom
 * ------------------------------------------------------------------ */

@keyframes cmsZoomIn { from { opacity: 0; transform: scale(var(--cms-scale)) } to { opacity: 1; transform: none } }
@keyframes cmsZoomOut { from { opacity: 0; transform: scale(calc(2 - var(--cms-scale))) } to { opacity: 1; transform: none } }
@keyframes cmsZoomInUp { from { opacity: 0; transform: scale(var(--cms-scale)) translateY(var(--cms-distance)) } to { opacity: 1; transform: none } }
@keyframes cmsZoomInDown { from { opacity: 0; transform: scale(var(--cms-scale)) translateY(calc(var(--cms-distance) * -1)) } to { opacity: 1; transform: none } }
@keyframes cmsZoomInLeft { from { opacity: 0; transform: scale(var(--cms-scale)) translateX(calc(var(--cms-distance) * -1)) } to { opacity: 1; transform: none } }
@keyframes cmsZoomInRight { from { opacity: 0; transform: scale(var(--cms-scale)) translateX(var(--cms-distance)) } to { opacity: 1; transform: none } }

/* ------------------------------------------------------------------ *
 * Federn
 * ------------------------------------------------------------------ */

@keyframes cmsBounceIn {
  0% { opacity: 0; transform: scale(.3) }
  20% { transform: scale(1.1) }
  40% { transform: scale(.9) }
  60% { opacity: 1; transform: scale(1.03) }
  80% { transform: scale(.97) }
  100% { opacity: 1; transform: scale(1) }
}
@keyframes cmsBounceInUp {
  0% { opacity: 0; transform: translateY(calc(var(--cms-distance) * 2)) }
  60% { opacity: 1; transform: translateY(-14px) }
  80% { transform: translateY(6px) }
  100% { transform: none }
}
@keyframes cmsBounceInDown {
  0% { opacity: 0; transform: translateY(calc(var(--cms-distance) * -2)) }
  60% { opacity: 1; transform: translateY(14px) }
  80% { transform: translateY(-6px) }
  100% { transform: none }
}
@keyframes cmsBounceInLeft {
  0% { opacity: 0; transform: translateX(calc(var(--cms-distance) * -2)) }
  60% { opacity: 1; transform: translateX(14px) }
  80% { transform: translateX(-6px) }
  100% { transform: none }
}
@keyframes cmsBounceInRight {
  0% { opacity: 0; transform: translateX(calc(var(--cms-distance) * 2)) }
  60% { opacity: 1; transform: translateX(-14px) }
  80% { transform: translateX(6px) }
  100% { transform: none }
}

/* ------------------------------------------------------------------ *
 * Drehen und Kippen
 * ------------------------------------------------------------------ */

@keyframes cmsFlipInX {
  from { opacity: 0; transform: perspective(900px) rotateX(80deg) }
  60% { opacity: 1; transform: perspective(900px) rotateX(-12deg) }
  to { transform: perspective(900px) rotateX(0) }
}
@keyframes cmsFlipInY {
  from { opacity: 0; transform: perspective(900px) rotateY(80deg) }
  60% { opacity: 1; transform: perspective(900px) rotateY(-12deg) }
  to { transform: perspective(900px) rotateY(0) }
}
@keyframes cmsRotateIn { from { opacity: 0; transform: rotate(var(--cms-rotate)) } to { opacity: 1; transform: none } }
@keyframes cmsRotateInDownLeft { from { opacity: 0; transform-origin: left bottom; transform: rotate(-45deg) } to { opacity: 1; transform-origin: left bottom; transform: none } }
@keyframes cmsRotateInDownRight { from { opacity: 0; transform-origin: right bottom; transform: rotate(45deg) } to { opacity: 1; transform-origin: right bottom; transform: none } }
@keyframes cmsRotateInUpLeft { from { opacity: 0; transform-origin: left bottom; transform: rotate(45deg) } to { opacity: 1; transform-origin: left bottom; transform: none } }
@keyframes cmsRotateInUpRight { from { opacity: 0; transform-origin: right bottom; transform: rotate(-90deg) } to { opacity: 1; transform-origin: right bottom; transform: none } }
@keyframes cmsRollIn { from { opacity: 0; transform: translateX(-100%) rotate(-120deg) } to { opacity: 1; transform: none } }
@keyframes cmsLightSpeedInRight {
  from { opacity: 0; transform: translateX(100%) skewX(-30deg) }
  60% { opacity: 1; transform: skewX(20deg) }
  80% { transform: skewX(-5deg) }
  to { transform: none }
}
@keyframes cmsLightSpeedInLeft {
  from { opacity: 0; transform: translateX(-100%) skewX(30deg) }
  60% { opacity: 1; transform: skewX(-20deg) }
  80% { transform: skewX(5deg) }
  to { transform: none }
}
@keyframes cmsJackInTheBox {
  from { opacity: 0; transform-origin: center bottom; transform: scale(.1) rotate(30deg) }
  50% { transform: rotate(-10deg) }
  70% { transform: rotate(3deg) }
  to { opacity: 1; transform: scale(1) }
}

/* ------------------------------------------------------------------ *
 * Unschärfe
 * ------------------------------------------------------------------ */

@keyframes cmsBlurIn { from { opacity: 0; filter: blur(14px) } to { opacity: 1; filter: blur(0) } }

/* ------------------------------------------------------------------ *
 * Aufmerksamkeit - laufen auf bereits sichtbaren Elementen
 * ------------------------------------------------------------------ */

@keyframes cmsBounce {
  0%, 20%, 53%, 100% { transform: translateY(0) }
  40%, 43% { transform: translateY(-22px) }
  70% { transform: translateY(-11px) }
  90% { transform: translateY(-3px) }
}
@keyframes cmsFlash { 0%, 50%, 100% { opacity: 1 } 25%, 75% { opacity: 0 } }
@keyframes cmsPulse { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.06) } }
@keyframes cmsRubberBand {
  0% { transform: scale(1) } 30% { transform: scaleX(1.25) scaleY(.75) }
  40% { transform: scaleX(.75) scaleY(1.25) } 60% { transform: scaleX(1.15) scaleY(.85) }
  100% { transform: scale(1) }
}
@keyframes cmsShakeX {
  0%, 100% { transform: translateX(0) }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-9px) }
  20%, 40%, 60%, 80% { transform: translateX(9px) }
}
@keyframes cmsShakeY {
  0%, 100% { transform: translateY(0) }
  10%, 30%, 50%, 70%, 90% { transform: translateY(-9px) }
  20%, 40%, 60%, 80% { transform: translateY(9px) }
}
@keyframes cmsHeadShake {
  0% { transform: translateX(0) }
  6.5% { transform: translateX(-6px) rotateY(-9deg) }
  18.5% { transform: translateX(5px) rotateY(7deg) }
  31.5% { transform: translateX(-3px) rotateY(-5deg) }
  43.5% { transform: translateX(2px) rotateY(3deg) }
  50% { transform: translateX(0) }
}
@keyframes cmsSwing {
  20% { transform: rotate(15deg) } 40% { transform: rotate(-10deg) }
  60% { transform: rotate(5deg) } 80% { transform: rotate(-5deg) }
  100% { transform: rotate(0) }
}
@keyframes cmsTada {
  0% { transform: scale(1) }
  10%, 20% { transform: scale(.9) rotate(-3deg) }
  30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg) }
  40%, 60%, 80% { transform: scale(1.1) rotate(-3deg) }
  100% { transform: scale(1) }
}
@keyframes cmsWobble {
  0%, 100% { transform: none }
  15% { transform: translateX(-25%) rotate(-5deg) }
  30% { transform: translateX(20%) rotate(3deg) }
  45% { transform: translateX(-15%) rotate(-3deg) }
  60% { transform: translateX(10%) rotate(2deg) }
  75% { transform: translateX(-5%) rotate(-1deg) }
}
@keyframes cmsJello {
  0%, 11.1%, 100% { transform: none }
  22.2% { transform: skewX(-12.5deg) skewY(-12.5deg) }
  33.3% { transform: skewX(6.25deg) skewY(6.25deg) }
  44.4% { transform: skewX(-3.125deg) skewY(-3.125deg) }
  55.5% { transform: skewX(1.5deg) skewY(1.5deg) }
  66.6% { transform: skewX(-.8deg) skewY(-.8deg) }
}
@keyframes cmsHeartBeat {
  0%, 100% { transform: scale(1) }
  14% { transform: scale(1.3) } 28% { transform: scale(1) }
  42% { transform: scale(1.3) } 70% { transform: scale(1) }
}