/**
 * SiteClick keyframe animations (KF) — the `hover` trigger of ANI1.
 *
 * A node with `animation_trigger = hover` renders `data-sc-kf="{name}"` plus
 * the timing of its animation set (`data-sc-kf-dur`, `data-sc-kf-ease`);
 * sc-animation.js turns that into the class `.sc-kf-{name}` and the custom
 * properties `--sc-kf-dur` / `--sc-kf-ease`. The class carries the two values
 * that belong to the effect itself: the @keyframes name and its iteration
 * count. A style-hub tile previews an effect with the class plus
 * `.sc-ov-force-h` alone — no data attribute needed.
 *
 * Every effect animates `transform` only (BESLUITEN 2.3: transform = Animaties,
 * translate = Scroll, position = Sticky), so a keyframe never fights the scroll
 * or sticky engine over another property.
 *
 * `icon-*` effects animate the icon of a button, not its host: the host carries
 * the data attribute / class, `svg.button-icon-left` and `svg.button-icon-right`
 * inside it carry the animation. The button hub (DHB21) sets the same
 * `--sc-kf-*` properties on `.button-new-{id}`.
 */

/** DE HOST-ANIMATIE — hover op een aanwijsapparaat, of een geforceerde state. **/
[data-sc-kf]:not([data-sc-kf^="icon-"]).sc-ov-force-h,
[class*="sc-kf-"]:not([class*="sc-kf-icon-"]).sc-ov-force-h,
[data-sc-stk]:not(.content-row)[data-sc-kf]:not([data-sc-kf^="icon-"]).sc-ov-force-h > :is(.sc-stk-in, .sticky-in) {
    animation: var(--sc-kf-name) var(--sc-kf-dur, 1s) var(--sc-kf-ease, ease-in-out) var(--sc-kf-iter, 1);
}
/* A sticky host runs it on its mover (the last selector above): a transform
   on the host would make it the containing block of the fixed mover for as
   long as the animation runs. A row is its own mover. */
[data-sc-stk]:not(.content-row)[data-sc-kf]:not([data-sc-kf^="icon-"]).sc-ov-force-h {
    animation: none;
}
/* The hover play is gated on (hover: hover), the same test sc-sticky.js
   trapped() uses: body.no-touch is a UA sniff an iPad (desktop UA) passes. */
@media (hover: hover) {
    body.no-touch [data-sc-kf]:not([data-sc-kf^="icon-"]):hover,
    body.no-touch [data-sc-stk]:not(.content-row)[data-sc-kf]:not([data-sc-kf^="icon-"]):hover > :is(.sc-stk-in, .sticky-in) {
        animation: var(--sc-kf-name) var(--sc-kf-dur, 1s) var(--sc-kf-ease, ease-in-out) var(--sc-kf-iter, 1);
    }
    body.no-touch [data-sc-stk]:not(.content-row)[data-sc-kf]:not([data-sc-kf^="icon-"]):hover {
        animation: none;
    }
}

/** DE ICOON-ANIMATIE — het icoon van de knop of van een navigatie-item binnen de host. **/
body.no-touch [data-sc-kf^="icon-"]:hover svg.button-icon-left,
body.no-touch [data-sc-kf^="icon-"]:hover svg.button-icon-right,
body.no-touch [data-sc-kf^="icon-"]:hover svg.sc-nav-ico-svg,
[data-sc-kf^="icon-"].sc-ov-force-h svg.button-icon-left,
[data-sc-kf^="icon-"].sc-ov-force-h svg.button-icon-right,
[data-sc-kf^="icon-"].sc-ov-force-h svg.sc-nav-ico-svg,
[class*="sc-kf-icon-"].sc-ov-force-h svg.button-icon-left,
[class*="sc-kf-icon-"].sc-ov-force-h svg.button-icon-right {
    animation: var(--sc-kf-name) var(--sc-kf-dur, 1s) var(--sc-kf-ease, ease-in-out) var(--sc-kf-iter, 1);
}

/** DE EFFECTEN — naam + herhaling per effect. **/
.sc-kf-pulse { --sc-kf-name: sc-kf-pulse; --sc-kf-iter: infinite; }
.sc-kf-pulse-grow { --sc-kf-name: sc-kf-pulse-grow; --sc-kf-iter: infinite; }
.sc-kf-pulse-shrink { --sc-kf-name: sc-kf-pulse-shrink; --sc-kf-iter: infinite; }
.sc-kf-back-pulse { --sc-kf-name: sc-kf-back-pulse; --sc-kf-iter: infinite; }
.sc-kf-push { --sc-kf-name: sc-kf-push; --sc-kf-iter: 1; }
.sc-kf-pop { --sc-kf-name: sc-kf-pop; --sc-kf-iter: 1; }
.sc-kf-bob { --sc-kf-name: sc-kf-bob; --sc-kf-iter: infinite; }
.sc-kf-hang { --sc-kf-name: sc-kf-hang; --sc-kf-iter: infinite; }
.sc-kf-wobble-horizontal { --sc-kf-name: sc-kf-wobble-horizontal; --sc-kf-iter: infinite; }
.sc-kf-wobble-vertical { --sc-kf-name: sc-kf-wobble-vertical; --sc-kf-iter: infinite; }
.sc-kf-wobble-to-bottom-right { --sc-kf-name: sc-kf-wobble-to-bottom-right; --sc-kf-iter: infinite; }
.sc-kf-wobble-to-top-right { --sc-kf-name: sc-kf-wobble-to-top-right; --sc-kf-iter: infinite; }
/* De hoek-wobbles kantelen om een rand, niet om het midden. */
.sc-kf-wobble-top { --sc-kf-name: sc-kf-wobble-top; --sc-kf-iter: infinite; transform-origin: 0 100%; }
.sc-kf-wobble-bottom { --sc-kf-name: sc-kf-wobble-bottom; --sc-kf-iter: infinite; transform-origin: 100% 0; }
.sc-kf-wobble-skew { --sc-kf-name: sc-kf-wobble-skew; --sc-kf-iter: infinite; }
.sc-kf-buzz { --sc-kf-name: sc-kf-buzz; --sc-kf-iter: 1; }
.sc-kf-buzz-out { --sc-kf-name: sc-kf-buzz-out; --sc-kf-iter: infinite; }
.sc-kf-icon-push { --sc-kf-name: sc-kf-icon-push; --sc-kf-iter: 1; }
.sc-kf-icon-pop { --sc-kf-name: sc-kf-icon-pop; --sc-kf-iter: 1; }
.sc-kf-icon-bounce { --sc-kf-name: sc-kf-icon-bounce; --sc-kf-iter: 1; }
.sc-kf-icon-pulse { --sc-kf-name: sc-kf-icon-pulse; --sc-kf-iter: infinite; }
.sc-kf-icon-pulse-grow { --sc-kf-name: sc-kf-icon-pulse-grow; --sc-kf-iter: infinite; }
.sc-kf-icon-pulse-shrink { --sc-kf-name: sc-kf-icon-pulse-shrink; --sc-kf-iter: infinite; }
.sc-kf-icon-bob { --sc-kf-name: sc-kf-icon-bob; --sc-kf-iter: infinite; }
.sc-kf-icon-hang { --sc-kf-name: sc-kf-icon-hang; --sc-kf-iter: infinite; }
.sc-kf-icon-wobble-horizontal { --sc-kf-name: sc-kf-icon-wobble-horizontal; --sc-kf-iter: infinite; }
.sc-kf-icon-wobble-vertical { --sc-kf-name: sc-kf-icon-wobble-vertical; --sc-kf-iter: infinite; }
.sc-kf-icon-buzz { --sc-kf-name: sc-kf-icon-buzz; --sc-kf-iter: 1; }
.sc-kf-icon-buzz-out { --sc-kf-name: sc-kf-icon-buzz-out; --sc-kf-iter: infinite; }
.sc-kf-icon-float { --sc-kf-name: sc-kf-icon-float; --sc-kf-iter: 1; }
.sc-kf-icon-sink { --sc-kf-name: sc-kf-icon-sink; --sc-kf-iter: 1; }
.sc-kf-icon-float-away { --sc-kf-name: sc-kf-icon-float-away; --sc-kf-iter: 1; }
.sc-kf-icon-sink-away { --sc-kf-name: sc-kf-icon-sink-away; --sc-kf-iter: 1; }
.sc-kf-icon-drop { --sc-kf-name: sc-kf-icon-drop; --sc-kf-iter: 1; }

/** DE KEYFRAMES — elk effect eindigt op zijn uitgangsstand, zodat een
    eenmalige animatie geen fill-mode nodig heeft. **/
@keyframes sc-kf-pulse { 0%, 100% { transform: scale(1); } 35% { transform: scale(1.07); } 70% { transform: scale(0.97); } }
@keyframes sc-kf-pulse-grow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes sc-kf-pulse-shrink { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.88); } }
@keyframes sc-kf-back-pulse { 0%, 100% { transform: scale(1); } 45% { transform: scale(0.92); } 75% { transform: scale(1.05); } }
@keyframes sc-kf-push { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.85); } }
@keyframes sc-kf-pop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes sc-kf-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes sc-kf-hang { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@keyframes sc-kf-wobble-horizontal { 0%, 100% { transform: translateX(0); } 15% { transform: translateX(-9px); } 30% { transform: translateX(7px); } 45% { transform: translateX(-5px); } 60% { transform: translateX(3px); } 80% { transform: translateX(-2px); } }
@keyframes sc-kf-wobble-vertical { 0%, 100% { transform: translateY(0); } 15% { transform: translateY(-9px); } 30% { transform: translateY(7px); } 45% { transform: translateY(-5px); } 60% { transform: translateY(3px); } 80% { transform: translateY(-2px); } }
@keyframes sc-kf-wobble-to-bottom-right { 0%, 100% { transform: translate(0, 0); } 16% { transform: translate(8px, 8px); } 32% { transform: translate(-6px, -6px); } 48% { transform: translate(4px, 4px); } 64% { transform: translate(-3px, -3px); } 80% { transform: translate(2px, 2px); } }
@keyframes sc-kf-wobble-to-top-right { 0%, 100% { transform: translate(0, 0); } 16% { transform: translate(8px, -8px); } 32% { transform: translate(-6px, 6px); } 48% { transform: translate(4px, -4px); } 64% { transform: translate(-3px, 3px); } 80% { transform: translate(2px, -2px); } }
@keyframes sc-kf-wobble-top { 0%, 100% { transform: skewX(0); } 16% { transform: skewX(-9deg); } 32% { transform: skewX(7deg); } 48% { transform: skewX(-5deg); } 64% { transform: skewX(3deg); } 80% { transform: skewX(-2deg); } }
@keyframes sc-kf-wobble-bottom { 0%, 100% { transform: skewX(0); } 16% { transform: skewX(9deg); } 32% { transform: skewX(-7deg); } 48% { transform: skewX(5deg); } 64% { transform: skewX(-3deg); } 80% { transform: skewX(2deg); } }
@keyframes sc-kf-wobble-skew { 0%, 100% { transform: skewX(0); } 16% { transform: skewX(-8deg); } 32% { transform: skewX(6deg); } 48% { transform: skewX(-4deg); } 64% { transform: skewX(3deg); } 80% { transform: skewX(-2deg); } }
@keyframes sc-kf-buzz { 0%, 100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(3px) rotate(2deg); } 75% { transform: translateX(-3px) rotate(-2deg); } }
@keyframes sc-kf-buzz-out { 0%, 100% { transform: translateX(0) rotate(0); } 10% { transform: translateX(3px) rotate(2deg); } 30% { transform: translateX(-3px) rotate(-2deg); } 50% { transform: translateX(2px) rotate(1deg); } 70% { transform: translateX(-2px) rotate(-1deg); } 90% { transform: translateX(1px) rotate(0.5deg); } }
@keyframes sc-kf-icon-push { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.85); } }
@keyframes sc-kf-icon-pop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes sc-kf-icon-bounce { 0%, 100% { transform: translateY(0) scale(1); } 25% { transform: translateY(-6px) scale(1.1); } 50% { transform: translateY(0) scale(1); } 75% { transform: translateY(-3px) scale(1.05); } }
@keyframes sc-kf-icon-pulse { 0%, 100% { transform: scale(1); } 35% { transform: scale(1.07); } 70% { transform: scale(0.97); } }
@keyframes sc-kf-icon-pulse-grow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }
@keyframes sc-kf-icon-pulse-shrink { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.8); } }
@keyframes sc-kf-icon-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes sc-kf-icon-hang { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@keyframes sc-kf-icon-wobble-horizontal { 0%, 100% { transform: translateX(0); } 16% { transform: translateX(-6px); } 32% { transform: translateX(4px); } 48% { transform: translateX(-3px); } 64% { transform: translateX(2px); } 80% { transform: translateX(-1px); } }
@keyframes sc-kf-icon-wobble-vertical { 0%, 100% { transform: translateY(0); } 16% { transform: translateY(-6px); } 32% { transform: translateY(4px); } 48% { transform: translateY(-3px); } 64% { transform: translateY(2px); } 80% { transform: translateY(-1px); } }
@keyframes sc-kf-icon-buzz { 0%, 100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(2px) rotate(3deg); } 75% { transform: translateX(-2px) rotate(-3deg); } }
@keyframes sc-kf-icon-buzz-out { 0%, 100% { transform: translateX(0) rotate(0); } 10% { transform: translateX(2px) rotate(3deg); } 30% { transform: translateX(-2px) rotate(-3deg); } 50% { transform: translateX(1px) rotate(2deg); } 70% { transform: translateX(-1px) rotate(-2deg); } 90% { transform: translateX(1px) rotate(1deg); } }
@keyframes sc-kf-icon-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes sc-kf-icon-sink { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes sc-kf-icon-float-away { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-12px) scale(0.6); } }
@keyframes sc-kf-icon-sink-away { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(12px) scale(0.6); } }
@keyframes sc-kf-icon-drop { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-10px) rotate(-8deg); } 60% { transform: translateY(4px) rotate(4deg); } }