/* * semantic-animations/animate.css * * GENERATED FILE. Source lives in styles/animate/*.css; do not edit * styles/animate.css by hand. Run `npm run css:build` after changing a * source file, or adding a new one, under styles/animate/. * * A curated set of UI animations. Pure CSS, no build step, no JS required. * * import 'semantic-animations/animate.css'; *
Welcome
* * Put the class on any element. Every animation here is transform-, * opacity-, or filter-based (two exceptions noted per-class), so it * composites cheaply and works on any element regardless of its own * color, size, or content. * * Tune any animation with custom properties, on the element or on a parent: * * --sa-duration how long one run takes (default varies by class) * --sa-delay wait before the first run (default 0s) * --sa-timing the easing curve (default per class) * --sa-repeat how many runs (default varies by class) * --sa-distance travel distance for slide-* moves (default 20px) * --sa-stagger gap between children (sa-dots-bounce) (default 0.15s) * *
Toast
* * Classes that read `currentColor` (noted per-class) share the same * one-property contract `semantic-icons` uses for stroke color: set * `color` to tint them; nothing here otherwise assumes a color. */ [class*='sa-'] { --sa-delay: 0s; --sa-stagger: 0.15s; --sa-distance: 20px; } /* --------------------------------------------------------- reduced motion * A single generic rule, not a per-class list: it has to keep working as * the catalog grows past what anyone would hand-enumerate here. * * This is safe by construction, not by exception-listing: every entrance * and exit animation defines its start and end state inside its own * `@keyframes` (with `animation-fill-mode: both`), not on the class * selector itself. So when `animation: none` strips the animation, the * element falls back to its own plain CSS — which never set opacity or * transform at all — instead of getting stuck at a keyframe's start or * end state. A class that needs a *visual* fallback for a value it does * set directly (rare; check before adding one) must add its own * `@media (prefers-reduced-motion: reduce)` override nearby, in its own * source file, rather than growing this block. */ @media (prefers-reduced-motion: reduce) { [class*='sa-'], [class*='sa-'] > *, .sa-progress-sweep::after { animation: none !important; transition: none !important; } } .sa-shake-vertical { animation: sa-shake-vertical var(--sa-duration, 0.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-shake-vertical { 10%, 50% { transform: translateY(-6px); } 30%, 70% { transform: translateY(6px); } 90% { transform: translateY(-3px); } 0%, 100% { transform: translateY(0); } } .sa-shake-diagonal { animation: sa-shake-diagonal var(--sa-duration, 0.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-shake-diagonal { 10%, 50% { transform: translate(-6px, -6px); } 30%, 70% { transform: translate(6px, 6px); } 90% { transform: translate(-3px, -3px); } 0%, 100% { transform: translate(0, 0); } } .sa-jolt { animation: sa-jolt var(--sa-duration, 0.3s) var(--sa-timing, cubic-bezier(0.36, 0.07, 0.19, 0.97)) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-jolt { 0% { transform: translateX(0); } 20% { transform: translateX(var(--sa-distance, 14px)); } 100% { transform: translateX(0); } } .sa-jolt-down { animation: sa-jolt-down var(--sa-duration, 0.3s) var(--sa-timing, cubic-bezier(0.36, 0.07, 0.19, 0.97)) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-jolt-down { 0% { transform: translateY(0); } 25% { transform: translateY(var(--sa-distance, 12px)); } 100% { transform: translateY(0); } } .sa-jolt-up { animation: sa-jolt-up var(--sa-duration, 0.3s) var(--sa-timing, cubic-bezier(0.36, 0.07, 0.19, 0.97)) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-jolt-up { 0% { transform: translateY(0); } 20% { transform: translateY(calc(var(--sa-distance, 12px) * -1)); } 100% { transform: translateY(0); } } .sa-rattle-snap { animation: sa-rattle-snap var(--sa-duration, 0.45s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-rattle-snap { 0% { transform: translateX(0); } 30% { transform: translateX(var(--sa-distance, 10px)); } 55% { transform: translateX(calc(var(--sa-distance, 10px) * -0.5)); } 75% { transform: translateX(3px); } 100% { transform: translateX(0); } } .sa-judder { animation: sa-judder var(--sa-duration, 0.4s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-judder { 0%, 100% { transform: translateY(0); } 10% { transform: translateY(-3px); } 20% { transform: translateY(3px); } 30% { transform: translateY(-3px); } 40% { transform: translateY(3px); } 50% { transform: translateY(-2px); } 60% { transform: translateY(2px); } 70% { transform: translateY(-2px); } 80% { transform: translateY(1px); } 90% { transform: translateY(-1px); } } .sa-tremor-burst { animation: sa-tremor-burst var(--sa-duration, 0.4s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-tremor-burst { 0%, 100% { transform: translate(0, 0); } 15% { transform: translate(-2px, 1px); } 30% { transform: translate(2px, -1px); } 45% { transform: translate(-2px, 2px); } 60% { transform: translate(2px, -2px); } 75% { transform: translate(-1px, 1px); } 90% { transform: translate(1px, -1px); } } .sa-shudder { animation: sa-shudder var(--sa-duration, 0.5s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-shudder { 0%, 100% { transform: translateX(0) rotate(0deg); } 15% { transform: translateX(-4px) rotate(-1deg); } 30% { transform: translateX(4px) rotate(1deg); } 45% { transform: translateX(-3px) rotate(-0.8deg); } 60% { transform: translateX(3px) rotate(0.8deg); } 75% { transform: translateX(-1px) rotate(-0.3deg); } 90% { transform: translateX(1px) rotate(0.3deg); } } .sa-recoil { animation: sa-recoil var(--sa-duration, 0.35s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-recoil { 0% { transform: translateX(0); } 15% { transform: translateX(calc(var(--sa-distance, 14px) * -1)); } 40% { transform: translateX(3px); } 70% { transform: translateX(-1px); } 100% { transform: translateX(0); } } .sa-flinch { animation: sa-flinch var(--sa-duration, 0.2s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-flinch { 0% { transform: translateY(0); } 30% { transform: translateY(-3px); } 60% { transform: translateY(1px); } 100% { transform: translateY(0); } } .sa-stagger-step { animation: sa-stagger-step var(--sa-duration, 0.5s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-stagger-step { 0% { transform: translateX(0); } 12% { transform: translateX(-9px); } 28% { transform: translateX(5px); } 46% { transform: translateX(-6px); } 68% { transform: translateX(3px); } 100% { transform: translateX(0); } } .sa-rattle-double { animation: sa-rattle-double var(--sa-duration, 0.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-rattle-double { 0%, 40%, 100% { transform: translateX(0); } 8% { transform: translateX(-7px); } 16% { transform: translateX(7px); } 24% { transform: translateX(-4px); } 32% { transform: translateX(4px); } 55% { transform: translateX(-7px); } 63% { transform: translateX(7px); } 71% { transform: translateX(-4px); } 79% { transform: translateX(4px); } } .sa-shake-fade { animation: sa-shake-fade var(--sa-duration, 0.6s) var(--sa-timing, ease-in) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-shake-fade { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-2px); } 35% { transform: translateX(3px); } 50% { transform: translateX(-5px); } 65% { transform: translateX(7px); } 80% { transform: translateX(-9px); } 92% { transform: translateX(4px); } } .sa-quake-jolt { animation: sa-quake-jolt var(--sa-duration, 0.4s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-quake-jolt { 0% { transform: translate(0, 0); } 20% { transform: translate(var(--sa-distance, 16px), calc(var(--sa-distance, 16px) * 0.6)); } 50% { transform: translate(calc(var(--sa-distance, 16px) * -0.3), calc(var(--sa-distance, 16px) * -0.2)); } 100% { transform: translate(0, 0); } } .sa-buzz-off { animation: sa-buzz-off var(--sa-duration, 0.35s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-buzz-off { 0%, 100% { transform: translateX(0); } 10% { transform: translateX(-2px); } 20% { transform: translateX(2px); } 30% { transform: translateX(-2px); } 40% { transform: translateX(2px); } 50% { transform: translateX(-2px); } 60% { transform: translateX(2px); } 70% { transform: translateX(-1px); } 80% { transform: translateX(1px); } } .sa-knock { animation: sa-knock var(--sa-duration, 0.25s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-knock { 0% { transform: translateY(0); } 40% { transform: translateY(3px); } 100% { transform: translateY(0); } } .sa-twitch { animation: sa-twitch var(--sa-duration, 0.2s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-twitch { 0% { transform: rotate(0deg); } 50% { transform: rotate(-2deg); } 100% { transform: rotate(0deg); } } .sa-rattle-rotate { animation: sa-rattle-rotate var(--sa-duration, 0.5s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-rattle-rotate { 0%, 100% { transform: rotate(0deg); } 15% { transform: rotate(-4deg); } 30% { transform: rotate(4deg); } 45% { transform: rotate(-3deg); } 60% { transform: rotate(3deg); } 75% { transform: rotate(-1deg); } 90% { transform: rotate(1deg); } } .sa-shiver-burst { animation: sa-shiver-burst var(--sa-duration, 0.3s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-shiver-burst { 0%, 100% { transform: translate(0, 0); } 12% { transform: translate(-2px, -1px); } 24% { transform: translate(2px, 1px); } 36% { transform: translate(-2px, 1px); } 48% { transform: translate(2px, -1px); } 60% { transform: translate(-1px, 0); } 72% { transform: translate(1px, 0); } } .sa-vibrate-fine { animation: sa-vibrate-fine var(--sa-duration, 0.15s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-vibrate-fine { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-1px); } 50% { transform: translateX(1px); } 75% { transform: translateX(-1px); } } .sa-vibrate-buzz { animation: sa-vibrate-buzz var(--sa-duration, 0.18s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-vibrate-buzz { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-2px, 1px); } 50% { transform: translate(2px, -1px); } 75% { transform: translate(-1px, 1px); } } .sa-tremor-slow { animation: sa-tremor-slow var(--sa-duration, 2.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-tremor-slow { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(calc(var(--sa-distance, 10px) * -1.2), calc(var(--sa-distance, 10px) * 0.4)); } 50% { transform: translate(calc(var(--sa-distance, 10px) * 0.8), calc(var(--sa-distance, 10px) * -0.6)); } 75% { transform: translate(calc(var(--sa-distance, 10px) * -0.6), calc(var(--sa-distance, 10px) * 0.8)); } } .sa-tremor-deep { animation: sa-tremor-deep var(--sa-duration, 3.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-tremor-deep { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(var(--sa-distance, 14px), calc(var(--sa-distance, 14px) * -0.5)); } 45% { transform: translate(calc(var(--sa-distance, 14px) * -0.8), calc(var(--sa-distance, 14px) * 0.7)); } 70% { transform: translate(calc(var(--sa-distance, 14px) * 0.6), calc(var(--sa-distance, 14px) * -0.4)); } 90% { transform: translate(calc(var(--sa-distance, 14px) * -0.3), calc(var(--sa-distance, 14px) * 0.3)); } } .sa-rattle-loop { animation: sa-rattle-loop var(--sa-duration, 0.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-rattle-loop { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-3deg); } 50% { transform: rotate(0deg); } 75% { transform: rotate(3deg); } } .sa-rattle-tilt { animation: sa-rattle-tilt var(--sa-duration, 0.3s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-rattle-tilt { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-2deg); } 75% { transform: rotate(2deg); } } .sa-shake-two-axis { animation: sa-shake-two-axis var(--sa-duration, 0.5s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-shake-two-axis { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(var(--sa-distance, 6px), calc(var(--sa-distance, 6px) * -0.5)); } 50% { transform: translate(0, var(--sa-distance, 6px)); } 75% { transform: translate(calc(var(--sa-distance, 6px) * -1), calc(var(--sa-distance, 6px) * -0.5)); } } .sa-shake-orbit { animation: sa-shake-orbit var(--sa-duration, 0.8s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-shake-orbit { 0% { transform: translate(0, 0); } 25% { transform: translate(var(--sa-distance, 5px), calc(var(--sa-distance, 5px) * -1)); } 50% { transform: translate(calc(var(--sa-distance, 5px) * -1), calc(var(--sa-distance, 5px) * -1)); } 75% { transform: translate(calc(var(--sa-distance, 5px) * -1), var(--sa-distance, 5px)); } 100% { transform: translate(0, 0); } } .sa-tremble-vertical { animation: sa-tremble-vertical var(--sa-duration, 0.25s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-tremble-vertical { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-3px); } 60% { transform: translateY(3px); } 85% { transform: translateY(-1px); } } .sa-tremble-horizontal { animation: sa-tremble-horizontal var(--sa-duration, 0.22s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-tremble-horizontal { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-3px); } 60% { transform: translateX(3px); } 85% { transform: translateX(-1px); } } .sa-nervous-jitter { animation: sa-nervous-jitter var(--sa-duration, 0.4s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-nervous-jitter { 0%, 100% { transform: translate(0, 0); } 13% { transform: translate(-2px, 1px); } 27% { transform: translate(3px, -2px); } 41% { transform: translate(-1px, 2px); } 58% { transform: translate(2px, -1px); } 72% { transform: translate(-3px, 1px); } 89% { transform: translate(1px, -2px); } } .sa-alert-vibrate { animation: sa-alert-vibrate var(--sa-duration, 0.35s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-alert-vibrate { 0%, 100% { transform: translateX(0) rotate(0deg); } 25% { transform: translateX(-2px) rotate(-2deg); } 50% { transform: translateX(0) rotate(0deg); } 75% { transform: translateX(2px) rotate(2deg); } } .sa-earthquake { animation: sa-earthquake var(--sa-duration, 0.5s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-earthquake { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 20% { transform: translate(calc(var(--sa-distance, 12px) * -1), calc(var(--sa-distance, 12px) * 0.5)) rotate(-1deg); } 40% { transform: translate(var(--sa-distance, 12px), calc(var(--sa-distance, 12px) * -0.5)) rotate(1deg); } 60% { transform: translate(calc(var(--sa-distance, 12px) * -0.6), var(--sa-distance, 12px)) rotate(-0.5deg); } 80% { transform: translate(calc(var(--sa-distance, 12px) * 0.6), calc(var(--sa-distance, 12px) * -0.6)) rotate(0.5deg); } } .sa-rumble { animation: sa-rumble var(--sa-duration, 0.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-rumble { 0%, 100% { transform: translateY(0); } 20% { transform: translateY(-2px); } 40% { transform: translateY(2px); } 60% { transform: translateY(-3px); } 80% { transform: translateY(1px); } } .sa-chatter { animation: sa-chatter var(--sa-duration, 0.12s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-chatter { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } .sa-flutter-shake { animation: sa-flutter-shake var(--sa-duration, 0.3s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-flutter-shake { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-2px) rotate(3deg); } 50% { transform: translateY(0) rotate(0deg); } 75% { transform: translateY(2px) rotate(-3deg); } } .sa-dread-tremor { animation: sa-dread-tremor var(--sa-duration, 3s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-dread-tremor { 0%, 60% { transform: translate(0, 0); } 70% { transform: translate(calc(var(--sa-distance, 10px) * -1), calc(var(--sa-distance, 10px) * 0.5)); } 80% { transform: translate(var(--sa-distance, 10px), calc(var(--sa-distance, 10px) * -0.5)); } 90% { transform: translate(calc(var(--sa-distance, 10px) * -0.4), calc(var(--sa-distance, 10px) * 0.3)); } 100% { transform: translate(0, 0); } } .sa-crescendo-shake { animation: sa-crescendo-shake var(--sa-duration, 1s) var(--sa-timing, ease-in) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-crescendo-shake { 0% { transform: translateX(0); } 20% { transform: translateX(-1px); } 40% { transform: translateX(2px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(7px); } 100% { transform: translateX(0); } } .sa-simmer-shake { animation: sa-simmer-shake var(--sa-duration, 0.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-simmer-shake { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-1px, 1px); } 50% { transform: translate(1px, -1px); } 75% { transform: translate(-1px, 0); } } .sa-rattle-cage { animation: sa-rattle-cage var(--sa-duration, 0.45s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-rattle-cage { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 20% { transform: translate(var(--sa-distance, 8px), 0) rotate(2deg); } 40% { transform: translate(calc(var(--sa-distance, 8px) * -1), 0) rotate(-2deg); } 60% { transform: translate(calc(var(--sa-distance, 8px) * 0.6), 0) rotate(1deg); } 80% { transform: translate(calc(var(--sa-distance, 8px) * -0.6), 0) rotate(-1deg); } } .sa-panic-vibrate { animation: sa-panic-vibrate var(--sa-duration, 0.18s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-panic-vibrate { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-3px, 2px); } 40% { transform: translate(2px, -3px); } 60% { transform: translate(-2px, -1px); } 80% { transform: translate(3px, 1px); } } .sa-static-buzz { animation: sa-static-buzz var(--sa-duration, 0.1s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-static-buzz { 0%, 100% { transform: translateX(0); opacity: 1; } 50% { transform: translateX(1px); opacity: 0.92; } } .sa-jitter-diagonal { animation: sa-jitter-diagonal var(--sa-duration, 0.2s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-jitter-diagonal { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(2px, 2px); } 66% { transform: translate(-2px, -2px); } } .sa-quiver { animation: sa-quiver var(--sa-duration, 0.35s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-quiver { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-1.5px) rotate(-0.5deg); } 75% { transform: translateY(1.5px) rotate(0.5deg); } } .sa-teeter-rattle { animation: sa-teeter-rattle var(--sa-duration, 1.2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-teeter-rattle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } } .sa-rattle-fast { animation: sa-rattle-fast var(--sa-duration, 0.15s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-rattle-fast { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-3deg); } } .sa-alert-ring-shake { animation: sa-alert-ring-shake var(--sa-duration, 1.2s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-alert-ring-shake { 0% { transform: translateX(0); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.35); } 8% { transform: translateX(-3px); } 16% { transform: translateX(3px); } 24% { transform: translateX(0); } 100% { transform: translateX(0); box-shadow: 0 0 0 12px rgba(0, 0, 0, 0); } } .sa-tremor-diagonal { animation: sa-tremor-diagonal var(--sa-duration, 1.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-tremor-diagonal { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(calc(var(--sa-distance, 8px) * -1), calc(var(--sa-distance, 8px) * -1)); } 65% { transform: translate(calc(var(--sa-distance, 8px) * 0.7), calc(var(--sa-distance, 8px) * 0.7)); } } .sa-vibrate-hum { animation: sa-vibrate-hum var(--sa-duration, 0.25s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-vibrate-hum { 0%, 100% { transform: translateX(0); filter: brightness(1); } 50% { transform: translateX(1.5px); filter: brightness(1.08); } } .sa-shudder-cold { animation: sa-shudder-cold var(--sa-duration, 0.3s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-shudder-cold { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-2px, 1px); } 40% { transform: translate(2px, -1px); } 60% { transform: translate(-1px, 2px); } 80% { transform: translate(1px, -2px); } } .sa-pulse-fast { animation: sa-pulse-fast var(--sa-duration, 0.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-pulse-fast { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } } .sa-pulse-overshoot { animation: sa-pulse-overshoot var(--sa-duration, 1.1s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-pulse-overshoot { 0% { transform: scale(1); } 55% { transform: scale(1.3); } 75% { transform: scale(1.08); } 100% { transform: scale(1); } } .sa-pulse-anticipate { animation: sa-pulse-anticipate var(--sa-duration, 1.2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-pulse-anticipate { 0% { transform: scale(1); } 20% { transform: scale(0.92); } 60% { transform: scale(1.22); } 100% { transform: scale(1); } } .sa-pulse-strobe-scale { animation: sa-pulse-strobe-scale var(--sa-duration, 0.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-pulse-strobe-scale { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.2); } 50% { transform: scale(1); } 75% { transform: scale(1.2); } } .sa-pulse-fade { animation: sa-pulse-fade var(--sa-duration, 1.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-pulse-fade { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.15); opacity: 0.55; } } .sa-pulse-flash-scale { animation: sa-pulse-flash-scale var(--sa-duration, 0.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-pulse-flash-scale { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2); opacity: 0.2; } } .sa-pulse-warning { animation: sa-pulse-warning var(--sa-duration, 0.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-pulse-warning { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.3; } } .sa-pulse-flicker { animation: sa-pulse-flicker var(--sa-duration, 0.9s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-pulse-flicker { 0%, 100% { transform: scale(1); opacity: 1; } 10% { transform: scale(1.03); opacity: 0.6; } 20% { transform: scale(1); opacity: 1; } 30% { transform: scale(1.03); opacity: 0.6; } 40% { transform: scale(1); opacity: 1; } } .sa-pulse-ghost { animation: sa-pulse-ghost var(--sa-duration, 2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-pulse-ghost { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.9); opacity: 0.4; } } .sa-throb-snap { animation: sa-throb-snap var(--sa-duration, 1.4s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-throb-snap { 0% { transform: scale(1); } 15% { transform: scale(1.25); } 100% { transform: scale(1); } } .sa-throb-linger { animation: sa-throb-linger var(--sa-duration, 1.6s) var(--sa-timing, ease-in) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-throb-linger { 0% { transform: scale(1); } 70% { transform: scale(1.22); } 100% { transform: scale(1); } } .sa-throb-hold { animation: sa-throb-hold var(--sa-duration, 1.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-throb-hold { 0% { transform: scale(1); } 20% { transform: scale(1.2); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } } .sa-throb-heavy { animation: sa-throb-heavy var(--sa-duration, 2.4s) var(--sa-timing, ease-in) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-throb-heavy { 0% { transform: scale(1); } 75% { transform: scale(1.4); } 100% { transform: scale(1); } } .sa-glow-ring { animation: sa-glow-ring var(--sa-duration, 1.6s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-glow-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 50%, transparent); } 50% { box-shadow: 0 0 0 8px color-mix(in srgb, currentColor 15%, transparent); } 100% { box-shadow: 0 0 0 14px color-mix(in srgb, currentColor 0%, transparent); } } .sa-pulse-double { animation: sa-pulse-double var(--sa-duration, 1.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-pulse-double { 0%, 100% { transform: scale(1); } 10% { transform: scale(1.18); } 20% { transform: scale(1); } 30% { transform: scale(1.18); } 40% { transform: scale(1); } } .sa-pulse-triple { animation: sa-pulse-triple var(--sa-duration, 2.2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-pulse-triple { 0%, 100% { transform: scale(1); } 8% { transform: scale(1.15); } 16% { transform: scale(1); } 24% { transform: scale(1.15); } 32% { transform: scale(1); } 40% { transform: scale(1.15); } 48% { transform: scale(1); } } .sa-pulse-heartbeat { animation: sa-pulse-heartbeat var(--sa-duration, 1.3s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-pulse-heartbeat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.22); } 28% { transform: scale(1); } 42% { transform: scale(1.12); } 56% { transform: scale(1); } } .sa-pulse-double-fade { animation: sa-pulse-double-fade var(--sa-duration, 1.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-pulse-double-fade { 0%, 100% { transform: scale(1); opacity: 1; } 10% { transform: scale(1.15); opacity: 0.5; } 20% { transform: scale(1); opacity: 1; } 30% { transform: scale(1.15); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } } .sa-glow-build { animation: sa-glow-build var(--sa-duration, 3s) var(--sa-timing, ease-in) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-glow-build { 0% { filter: drop-shadow(0 0 0 transparent); } 85% { filter: drop-shadow(0 0 14px currentColor); } 100% { filter: drop-shadow(0 0 0 transparent); } } .sa-glow-fuse { animation: sa-glow-fuse var(--sa-duration, 4s) var(--sa-timing, ease-in) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-glow-fuse { 0% { filter: drop-shadow(0 0 0 transparent); } 60% { filter: drop-shadow(0 0 3px currentColor); } 85% { filter: drop-shadow(0 0 8px currentColor); } 96% { filter: drop-shadow(0 0 18px currentColor); } 100% { filter: drop-shadow(0 0 0 transparent); } } .sa-glow-charge { animation: sa-glow-charge var(--sa-duration, 2.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-glow-charge { 0% { filter: drop-shadow(0 0 0 transparent); } 60% { filter: drop-shadow(0 0 10px currentColor); } 75% { filter: drop-shadow(0 0 10px currentColor); } 100% { filter: drop-shadow(0 0 0 transparent); } } .sa-pulse-corner-tl { animation: sa-pulse-corner-tl var(--sa-duration, 1.3s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: top left; } @keyframes sa-pulse-corner-tl { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } } .sa-pulse-corner-tr { animation: sa-pulse-corner-tr var(--sa-duration, 1.3s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: top right; } @keyframes sa-pulse-corner-tr { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } } .sa-pulse-corner-bl { animation: sa-pulse-corner-bl var(--sa-duration, 1.3s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: bottom left; } @keyframes sa-pulse-corner-bl { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } } .sa-pulse-corner-br { animation: sa-pulse-corner-br var(--sa-duration, 1.3s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: bottom right; } @keyframes sa-pulse-corner-br { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } } .sa-pulse-edge-top { animation: sa-pulse-edge-top var(--sa-duration, 1.3s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: top; } @keyframes sa-pulse-edge-top { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } } .sa-pulse-edge-bottom { animation: sa-pulse-edge-bottom var(--sa-duration, 1.3s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: bottom; } @keyframes sa-pulse-edge-bottom { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } } .sa-pulse-edge-left { animation: sa-pulse-edge-left var(--sa-duration, 1.3s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: left; } @keyframes sa-pulse-edge-left { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } } .sa-pulse-edge-right { animation: sa-pulse-edge-right var(--sa-duration, 1.3s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: right; } @keyframes sa-pulse-edge-right { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } } .sa-glow-brighten { animation: sa-glow-brighten var(--sa-duration, 1.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-glow-brighten { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.6); } } .sa-glow-saturate { animation: sa-glow-saturate var(--sa-duration, 2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-glow-saturate { 0%, 100% { filter: saturate(1); } 50% { filter: saturate(2.2); } } .sa-glow-deep { animation: sa-glow-deep var(--sa-duration, 2.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-glow-deep { 0%, 100% { filter: drop-shadow(0 0 0 transparent); } 50% { filter: drop-shadow(0 0 20px currentColor); } } .sa-glow-tight { animation: sa-glow-tight var(--sa-duration, 0.7s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-glow-tight { 0%, 100% { filter: drop-shadow(0 0 0 transparent); } 25% { filter: drop-shadow(0 0 3px currentColor); } 50% { filter: drop-shadow(0 0 0 transparent); } 75% { filter: drop-shadow(0 0 3px currentColor); } } .sa-glow-layered { animation: sa-glow-layered var(--sa-duration, 2.2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-glow-layered { 0%, 100% { filter: drop-shadow(0 0 0 transparent) drop-shadow(0 0 0 transparent); } 50% { filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 16px currentColor); } } .sa-glow-contrast { animation: sa-glow-contrast var(--sa-duration, 1.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-glow-contrast { 0%, 100% { filter: contrast(1); } 50% { filter: contrast(1.8); } } .sa-glow-pulse-sync { animation: sa-glow-pulse-sync var(--sa-duration, 1.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-glow-pulse-sync { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); } 50% { transform: scale(1.15); filter: drop-shadow(0 0 10px currentColor); } } .sa-glow-pulse-offset { animation: sa-glow-pulse-offset var(--sa-duration, 1.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-glow-pulse-offset { 0% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); } 25% { transform: scale(1.15); filter: drop-shadow(0 0 0 transparent); } 50% { transform: scale(1); filter: drop-shadow(0 0 12px currentColor); } 75% { transform: scale(0.95); filter: drop-shadow(0 0 0 transparent); } 100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); } } .sa-pulse-corner-glow { animation: sa-pulse-corner-glow var(--sa-duration, 1.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: bottom right; } @keyframes sa-pulse-corner-glow { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); } 50% { transform: scale(1.2); filter: drop-shadow(0 0 8px currentColor); } } .sa-throb-glow { animation: sa-throb-glow var(--sa-duration, 2s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-throb-glow { 0% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); } 20% { transform: scale(1.25); filter: drop-shadow(0 0 12px currentColor); } 100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); } } .sa-pulse-urgent-triple-flash { animation: sa-pulse-urgent-triple-flash var(--sa-duration, 1.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-pulse-urgent-triple-flash { 0%, 100% { transform: scale(1); opacity: 1; } 8% { transform: scale(1.15); opacity: 0.35; } 16% { transform: scale(1); opacity: 1; } 24% { transform: scale(1.15); opacity: 0.35; } 32% { transform: scale(1); opacity: 1; } 40% { transform: scale(1.15); opacity: 0.35; } 48% { transform: scale(1); opacity: 1; } } .sa-pulse-squash { animation: sa-pulse-squash var(--sa-duration, 1.2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-pulse-squash { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.2, 0.85); } } .sa-pulse-stretch-vertical { animation: sa-pulse-stretch-vertical var(--sa-duration, 1.2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-pulse-stretch-vertical { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(0.92, 1.22); } } .sa-pulse-stretch-horizontal { animation: sa-pulse-stretch-horizontal var(--sa-duration, 1.2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-pulse-stretch-horizontal { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.22, 0.92); } } .sa-pulse-diagonal-corner { animation: sa-pulse-diagonal-corner var(--sa-duration, 1.3s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: bottom right; } @keyframes sa-pulse-diagonal-corner { 0%, 100% { transform: scale(1) translate(0, 0); } 50% { transform: scale(1.18) translate(-2px, -2px); } } .sa-pulse-fade-deep { animation: sa-pulse-fade-deep var(--sa-duration, 2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-pulse-fade-deep { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: 0.15; } } .sa-glow-pulse-warning { animation: sa-glow-pulse-warning var(--sa-duration, 0.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-glow-pulse-warning { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); } 50% { transform: scale(1.08); filter: drop-shadow(0 0 10px currentColor); } } .sa-pulse-quick-release-corner { animation: sa-pulse-quick-release-corner var(--sa-duration, 1.3s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: top left; } @keyframes sa-pulse-quick-release-corner { 0% { transform: scale(1); } 15% { transform: scale(1.25); } 100% { transform: scale(1); } } .sa-pulse-slow-build-scale { animation: sa-pulse-slow-build-scale var(--sa-duration, 3s) var(--sa-timing, ease-in) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-pulse-slow-build-scale { 0% { transform: scale(1); } 85% { transform: scale(1.3); } 100% { transform: scale(1); } } .sa-pulse-double-corner { animation: sa-pulse-double-corner var(--sa-duration, 1.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: bottom left; } @keyframes sa-pulse-double-corner { 0%, 100% { transform: scale(1); } 10% { transform: scale(1.18); } 20% { transform: scale(1); } 30% { transform: scale(1.18); } 40% { transform: scale(1); } } .sa-throb-whisper { animation: sa-throb-whisper var(--sa-duration, 2.6s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-throb-whisper { 0% { transform: scale(1); } 30% { transform: scale(1.05); } 100% { transform: scale(1); } } .sa-base-rock { animation: sa-base-rock var(--sa-duration, 2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 50% 100%; } @keyframes sa-base-rock { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(6deg); } 75% { transform: rotate(-6deg); } } .sa-bottom-tip { animation: sa-bottom-tip var(--sa-duration, 2.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 50% 100%; } @keyframes sa-bottom-tip { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(9deg); } 40% { transform: rotate(-4deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-2deg); } } .sa-seesaw-tip { animation: sa-seesaw-tip var(--sa-duration, 1.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 50% 100%; } @keyframes sa-seesaw-tip { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } } .sa-roly-poly { animation: sa-roly-poly var(--sa-duration, 2.2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 50% 100%; } @keyframes sa-roly-poly { 0%, 100% { transform: rotate(0deg); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-9deg); } 45% { transform: rotate(6deg); } 60% { transform: rotate(-3deg); } 75% { transform: rotate(1deg); } } .sa-foot-rock { animation: sa-foot-rock var(--sa-duration, 1.6s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 50% 95%; } @keyframes sa-foot-rock { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(5deg); } 50% { transform: rotate(0deg); } 75% { transform: rotate(-5deg); } } .sa-anchor-rock { animation: sa-anchor-rock var(--sa-duration, 2.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 50% 100%; } @keyframes sa-anchor-rock { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(8deg); } 70% { transform: rotate(-8deg); } } .sa-baseline-teeter { animation: sa-baseline-teeter var(--sa-duration, 2s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 50% 100%; } @keyframes sa-baseline-teeter { 0%, 50%, 100% { transform: rotate(0deg); } 10% { transform: rotate(4deg); } 20% { transform: rotate(-3deg); } 30% { transform: rotate(2deg); } 40% { transform: rotate(-1deg); } } .sa-slow-lean { animation: sa-slow-lean var(--sa-duration, 3.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 50% 100%; } @keyframes sa-slow-lean { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(6deg); } } .sa-gentle-lean { animation: sa-gentle-lean var(--sa-duration, 4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 50% 50%; } @keyframes sa-gentle-lean { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-5deg); } } .sa-calm-tilt { animation: sa-calm-tilt var(--sa-duration, 3.2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 50% 0%; } @keyframes sa-calm-tilt { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(7deg); } } .sa-lean-back { animation: sa-lean-back var(--sa-duration, 3.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 50% 100%; } @keyframes sa-lean-back { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-6deg); } } .sa-easy-lean { animation: sa-easy-lean var(--sa-duration, 4.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 30% 100%; } @keyframes sa-easy-lean { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(5deg); } } .sa-soft-incline { animation: sa-soft-incline var(--sa-duration, 3.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 50% 50%; } @keyframes sa-soft-incline { 0%, 100% { transform: rotate(0deg); } 40% { transform: rotate(4deg); } 70% { transform: rotate(2deg); } } .sa-quick-teeter { animation: sa-quick-teeter var(--sa-duration, 0.4s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 50% 50%; } @keyframes sa-quick-teeter { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(3deg); } 50% { transform: rotate(0deg); } 75% { transform: rotate(-3deg); } } .sa-jitter-tilt { animation: sa-jitter-tilt var(--sa-duration, 0.5s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 50% 100%; } @keyframes sa-jitter-tilt { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(-2deg); } 40% { transform: rotate(2deg); } 60% { transform: rotate(-2deg); } 80% { transform: rotate(2deg); } } .sa-nervous-teeter { animation: sa-nervous-teeter var(--sa-duration, 0.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 50% 50%; } @keyframes sa-nervous-teeter { 0%, 100% { transform: rotate(0deg); } 15% { transform: rotate(4deg); } 30% { transform: rotate(-4deg); } 45% { transform: rotate(3deg); } 60% { transform: rotate(-3deg); } 75% { transform: rotate(2deg); } 90% { transform: rotate(-2deg); } } .sa-fidget-tilt { animation: sa-fidget-tilt var(--sa-duration, 1.2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 50% 100%; } @keyframes sa-fidget-tilt { 0%, 50%, 100% { transform: rotate(0deg); } 10% { transform: rotate(-3deg); } 20% { transform: rotate(3deg); } 30% { transform: rotate(-2deg); } 40% { transform: rotate(2deg); } } .sa-flutter-teeter { animation: sa-flutter-teeter var(--sa-duration, 0.7s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 50% 0%; } @keyframes sa-flutter-teeter { 0%, 100% { transform: rotate(0deg); } 12% { transform: rotate(3deg); } 24% { transform: rotate(-3deg); } 36% { transform: rotate(3deg); } 48% { transform: rotate(-3deg); } 60% { transform: rotate(2deg); } 72% { transform: rotate(-2deg); } 84% { transform: rotate(1deg); } } .sa-twitch-tilt { animation: sa-twitch-tilt var(--sa-duration, 1s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 50% 50%; } @keyframes sa-twitch-tilt { 0%, 10%, 100% { transform: rotate(0deg); } 5% { transform: rotate(5deg); } } .sa-rapid-teeter { animation: sa-rapid-teeter var(--sa-duration, 0.3s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 50% 100%; } @keyframes sa-rapid-teeter { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(3deg); } } .sa-lean-in { animation: sa-lean-in var(--sa-duration, 2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 50% 100%; } @keyframes sa-lean-in { 0%, 100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(6deg) scale(1.05); } } .sa-tilt-forward { animation: sa-tilt-forward var(--sa-duration, 2.2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 50% 100%; } @keyframes sa-tilt-forward { 0%, 100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(-8deg) scale(1.06); } } .sa-press-lean { animation: sa-press-lean var(--sa-duration, 1.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 50% 50%; } @keyframes sa-press-lean { 0%, 100% { transform: rotate(0deg) scale(1); } 40% { transform: rotate(5deg) scale(1.04); } 70% { transform: rotate(2deg) scale(1.02); } } .sa-approach-tilt { animation: sa-approach-tilt var(--sa-duration, 2.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 30% 100%; } @keyframes sa-approach-tilt { 0%, 100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(7deg) scale(1.07); } } .sa-lean-close { animation: sa-lean-close var(--sa-duration, 2.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 50% 50%; } @keyframes sa-lean-close { 0%, 100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(-4deg) scale(1.03); } } .sa-tilt-loom { animation: sa-tilt-loom var(--sa-duration, 2.1s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 70% 100%; } @keyframes sa-tilt-loom { 0%, 100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(9deg) scale(1.08); } } .sa-corner-tilt { animation: sa-corner-tilt var(--sa-duration, 2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 0% 0%; } @keyframes sa-corner-tilt { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(8deg); } } .sa-diagonal-tip { animation: sa-diagonal-tip var(--sa-duration, 1.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 100% 0%; } @keyframes sa-diagonal-tip { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-8deg); } } .sa-corner-pivot { animation: sa-corner-pivot var(--sa-duration, 2.2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 0% 100%; } @keyframes sa-corner-pivot { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(9deg); } } .sa-angled-tilt { animation: sa-angled-tilt var(--sa-duration, 2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 100% 100%; } @keyframes sa-angled-tilt { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-9deg); } } .sa-edge-tilt { animation: sa-edge-tilt var(--sa-duration, 1.9s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 15% 15%; } @keyframes sa-edge-tilt { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(7deg); } } .sa-diagonal-rock { animation: sa-diagonal-rock var(--sa-duration, 2.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 85% 85%; } @keyframes sa-diagonal-rock { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(6deg); } 50% { transform: rotate(0deg); } 75% { transform: rotate(-6deg); } } .sa-pendulum-swing { animation: sa-pendulum-swing var(--sa-duration, 3s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 50% 0%; } @keyframes sa-pendulum-swing { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(22deg); } 50% { transform: rotate(0deg); } 75% { transform: rotate(-22deg); } } .sa-wide-swing { animation: sa-wide-swing var(--sa-duration, 3.4s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 50% 8%; } @keyframes sa-wide-swing { 0%, 100% { transform: rotate(0deg); } 22% { transform: rotate(26deg); } 50% { transform: rotate(0deg); } 78% { transform: rotate(-24deg); } } .sa-long-swing { animation: sa-long-swing var(--sa-duration, 3.2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 50% 0%; } @keyframes sa-long-swing { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(20deg); } 70% { transform: rotate(-20deg); } } .sa-slow-pendulum { animation: sa-slow-pendulum var(--sa-duration, 3.6s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 50% 0%; } @keyframes sa-slow-pendulum { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(18deg); } 50% { transform: rotate(0deg); } 75% { transform: rotate(-18deg); } } .sa-grand-swing { animation: sa-grand-swing var(--sa-duration, 2.8s) var(--sa-timing, ease) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 50% 3%; } @keyframes sa-grand-swing { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(28deg); } 50% { transform: rotate(0deg); } 80% { transform: rotate(-28deg); } } .sa-arc-swing { animation: sa-arc-swing var(--sa-duration, 3s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 50% 10%; } @keyframes sa-arc-swing { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(20deg); } 50% { transform: rotate(-5deg); } 80% { transform: rotate(-20deg); } } .sa-double-tilt { animation: sa-double-tilt var(--sa-duration, 2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 50% 100%; } @keyframes sa-double-tilt { 0%, 45%, 100% { transform: rotate(0deg); } 15% { transform: rotate(10deg); } 30% { transform: rotate(-10deg); } } .sa-tilt-tilt { animation: sa-tilt-tilt var(--sa-duration, 2.2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 50% 50%; } @keyframes sa-tilt-tilt { 0%, 24%, 48%, 100% { transform: rotate(0deg); } 12% { transform: rotate(8deg); } 36% { transform: rotate(-8deg); } } .sa-two-step-tilt { animation: sa-two-step-tilt var(--sa-duration, 1.8s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 50% 100%; } @keyframes sa-two-step-tilt { 0%, 65%, 100% { transform: rotate(0deg); } 20% { transform: rotate(9deg); } 40% { transform: rotate(-6deg); } 55% { transform: rotate(3deg); } } .sa-see-tilt-saw { animation: sa-see-tilt-saw var(--sa-duration, 2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 50% 50%; } @keyframes sa-see-tilt-saw { 0%, 50%, 100% { transform: rotate(0deg); } 18% { transform: rotate(-9deg); } 36% { transform: rotate(9deg); } } .sa-dual-tip { animation: sa-dual-tip var(--sa-duration, 2.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 50% 100%; } @keyframes sa-dual-tip { 0%, 20%, 40%, 100% { transform: rotate(0deg); } 10% { transform: rotate(7deg); } 30% { transform: rotate(-7deg); } } .sa-alt-tilt { animation: sa-alt-tilt var(--sa-duration, 1.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 50% 50%; } @keyframes sa-alt-tilt { 0%, 100% { transform: rotate(0deg); } 10% { transform: rotate(5deg); } 20% { transform: rotate(-5deg); } 30% { transform: rotate(2deg); } } .sa-twin-tilt { animation: sa-twin-tilt var(--sa-duration, 2.1s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 50% 100%; } @keyframes sa-twin-tilt { 0%, 60%, 100% { transform: rotate(0deg); } 16% { transform: rotate(8deg); } 32% { transform: rotate(-8deg); } 48% { transform: rotate(4deg); } } .sa-faint-tilt { animation: sa-faint-tilt var(--sa-duration, 5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 50% 50%; } @keyframes sa-faint-tilt { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(2deg); } } .sa-whisper-tilt { animation: sa-whisper-tilt var(--sa-duration, 4.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 50% 100%; } @keyframes sa-whisper-tilt { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-1.5deg); } } .sa-idle-tilt { animation: sa-idle-tilt var(--sa-duration, 5.5s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 50% 50%; } @keyframes sa-idle-tilt { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(1.5deg); } } .sa-hover-tilt { animation: sa-hover-tilt var(--sa-duration, 4.8s) var(--sa-timing, ease) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 50% 0%; } @keyframes sa-hover-tilt { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(1.8deg); } } .sa-drift-tilt { animation: sa-drift-tilt var(--sa-duration, 6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 40% 100%; } @keyframes sa-drift-tilt { 0%, 100% { transform: rotate(0deg); } 33% { transform: rotate(1deg); } 66% { transform: rotate(-1deg); } } .sa-hard-blink { animation: sa-hard-blink var(--sa-duration, 1s) var(--sa-timing, steps(1, end)) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-hard-blink { 0% { opacity: 1; } 49% { opacity: 1; } 50% { opacity: 0; } 99% { opacity: 0; } 100% { opacity: 1; } } .sa-strict-strobe { animation: sa-strict-strobe var(--sa-duration, 0.9s) var(--sa-timing, steps(1, end)) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-strict-strobe { 0% { opacity: 1; } 49% { opacity: 1; } 50% { opacity: 0.08; } 99% { opacity: 0.08; } 100% { opacity: 1; } } .sa-bare-blink { animation: sa-bare-blink var(--sa-duration, 0.8s) var(--sa-timing, steps(1, end)) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-bare-blink { 0% { opacity: 1; } 49% { opacity: 1; } 50% { opacity: 0.5; } 99% { opacity: 0.5; } 100% { opacity: 1; } } .sa-crisp-toggle { animation: sa-crisp-toggle var(--sa-duration, 1.2s) var(--sa-timing, steps(1, end)) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-crisp-toggle { 0% { opacity: 1; } 24% { opacity: 1; } 25% { opacity: 0.2; } 49% { opacity: 0.2; } 50% { opacity: 1; } 74% { opacity: 1; } 75% { opacity: 0.2; } 99% { opacity: 0.2; } 100% { opacity: 1; } } .sa-instant-flicker { animation: sa-instant-flicker var(--sa-duration, 0.5s) var(--sa-timing, steps(1, end)) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-instant-flicker { 0% { opacity: 1; } 59% { opacity: 1; } 60% { opacity: 0; } 79% { opacity: 0; } 80% { opacity: 1; } 100% { opacity: 1; } } .sa-square-blink { animation: sa-square-blink var(--sa-duration, 1s) var(--sa-timing, steps(1, end)) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-square-blink { 0% { opacity: 1; } 69% { opacity: 1; } 70% { opacity: 0.15; } 89% { opacity: 0.15; } 90% { opacity: 1; } 100% { opacity: 1; } } .sa-shutter-blink { animation: sa-shutter-blink var(--sa-duration, 1.5s) var(--sa-timing, steps(1, end)) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-shutter-blink { 0% { opacity: 1; } 94% { opacity: 1; } 95% { opacity: 0; } 96% { opacity: 1; } 100% { opacity: 1; } } .sa-failing-bulb { animation: sa-failing-bulb var(--sa-duration, 2.6s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-failing-bulb { 0% { opacity: 1; } 8% { opacity: 0.4; } 9% { opacity: 1; } 23% { opacity: 1; } 24% { opacity: 0.2; } 28% { opacity: 0.9; } 55% { opacity: 1; } 56% { opacity: 0.6; } 62% { opacity: 1; } 80% { opacity: 0.3; } 83% { opacity: 1; } 100% { opacity: 1; } } .sa-dying-fluorescent { animation: sa-dying-fluorescent var(--sa-duration, 3.4s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-dying-fluorescent { 0% { opacity: 1; } 12% { opacity: 1; } 13% { opacity: 0.15; } 16% { opacity: 0.7; } 17% { opacity: 0.1; } 22% { opacity: 1; } 61% { opacity: 1; } 63% { opacity: 0.35; } 67% { opacity: 1; } 90% { opacity: 1; } 91% { opacity: 0.25; } 95% { opacity: 1; } 100% { opacity: 1; } } .sa-loose-connection { animation: sa-loose-connection var(--sa-duration, 2.2s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-loose-connection { 0% { opacity: 1; } 17% { opacity: 1; } 18% { opacity: 0.05; } 20% { opacity: 1; } 63% { opacity: 1; } 64% { opacity: 0.05; } 65% { opacity: 1; } 88% { opacity: 1; } 89% { opacity: 0.05; } 91% { opacity: 1; } 100% { opacity: 1; } } .sa-static-flicker { animation: sa-static-flicker var(--sa-duration, 1.1s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-static-flicker { 0% { opacity: 1; } 10% { opacity: 0.75; } 18% { opacity: 1; } 27% { opacity: 0.85; } 35% { opacity: 1; } 44% { opacity: 0.7; } 52% { opacity: 1; } 61% { opacity: 0.8; } 70% { opacity: 1; } 78% { opacity: 0.9; } 86% { opacity: 1; } 95% { opacity: 0.75; } 100% { opacity: 1; } } .sa-faulty-wire { animation: sa-faulty-wire var(--sa-duration, 3s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-faulty-wire { 0% { opacity: 1; } 38% { opacity: 1; } 40% { opacity: 0; } 43% { opacity: 0.6; } 46% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 1; } } .sa-candle-flicker { animation: sa-candle-flicker var(--sa-duration, 2.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-candle-flicker { 0% { opacity: 0.95; transform: scale(1); } 14% { opacity: 0.8; transform: scale(0.99); } 27% { opacity: 1; transform: scale(1.01); } 41% { opacity: 0.85; transform: scale(1); } 58% { opacity: 0.97; transform: scale(1.01); } 73% { opacity: 0.82; transform: scale(0.99); } 89% { opacity: 1; transform: scale(1); } 100% { opacity: 0.95; transform: scale(1); } } .sa-old-tv-flicker { animation: sa-old-tv-flicker var(--sa-duration, 0.9s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-old-tv-flicker { 0% { opacity: 1; } 9% { opacity: 0.88; } 19% { opacity: 1; } 26% { opacity: 0.6; } 33% { opacity: 1; } 47% { opacity: 0.92; } 58% { opacity: 1; } 66% { opacity: 0.7; } 77% { opacity: 1; } 84% { opacity: 0.9; } 100% { opacity: 1; } } .sa-glitch-flicker { animation: sa-glitch-flicker var(--sa-duration, 1.6s) var(--sa-timing, steps(1, end)) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-glitch-flicker { 0% { opacity: 1; } 7% { opacity: 1; } 8% { opacity: 0; } 11% { opacity: 1; } 34% { opacity: 1; } 35% { opacity: 0; } 36% { opacity: 1; } 37% { opacity: 0; } 39% { opacity: 1; } 72% { opacity: 1; } 73% { opacity: 0; } 77% { opacity: 1; } 100% { opacity: 1; } } .sa-haunted-flicker { animation: sa-haunted-flicker var(--sa-duration, 4.2s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-haunted-flicker { 0% { opacity: 1; } 70% { opacity: 1; } 72% { opacity: 0.2; } 74% { opacity: 0.8; } 76% { opacity: 0.1; } 79% { opacity: 1; } 92% { opacity: 1; } 93% { opacity: 0.4; } 96% { opacity: 1; } 100% { opacity: 1; } } .sa-gentle-fade-flicker { animation: sa-gentle-fade-flicker var(--sa-duration, 4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-gentle-fade-flicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.85; } } .sa-soft-dim-flicker { animation: sa-soft-dim-flicker var(--sa-duration, 5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-soft-dim-flicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.78; } } .sa-faint-flicker { animation: sa-faint-flicker var(--sa-duration, 3.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-faint-flicker { 0%, 100% { opacity: 1; } 30% { opacity: 0.9; } 55% { opacity: 1; } 75% { opacity: 0.82; } } .sa-subtle-dim-pulse { animation: sa-subtle-dim-pulse var(--sa-duration, 6.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-subtle-dim-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } .sa-whisper-flicker { animation: sa-whisper-flicker var(--sa-duration, 4.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-whisper-flicker { 0% { opacity: 1; } 20% { opacity: 0.83; } 100% { opacity: 1; } } .sa-low-flicker { animation: sa-low-flicker var(--sa-duration, 3s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-low-flicker { 0%, 100% { opacity: 1; } 40% { opacity: 0.88; } 60% { opacity: 0.88; } } .sa-urgent-strobe { animation: sa-urgent-strobe var(--sa-duration, 0.25s) var(--sa-timing, steps(1, end)) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-urgent-strobe { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } .sa-rapid-strobe { animation: sa-rapid-strobe var(--sa-duration, 0.15s) var(--sa-timing, steps(1, end)) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-rapid-strobe { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } .sa-panic-strobe { animation: sa-panic-strobe var(--sa-duration, 0.3s) var(--sa-timing, steps(1, end)) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-panic-strobe { 0%, 19% { opacity: 1; } 20%, 100% { opacity: 0.1; } } .sa-emergency-strobe { animation: sa-emergency-strobe var(--sa-duration, 0.22s) var(--sa-timing, steps(1, end)) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-emergency-strobe { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.18; } } .sa-alarm-strobe { animation: sa-alarm-strobe var(--sa-duration, 0.36s) var(--sa-timing, steps(1, end)) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-alarm-strobe { 0%, 13% { opacity: 1; } 14%, 27% { opacity: 0; } 28%, 41% { opacity: 1; } 42%, 100% { opacity: 0; } } .sa-warning-strobe { animation: sa-warning-strobe var(--sa-duration, 0.4s) var(--sa-timing, steps(1, end)) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-warning-strobe { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.05; } } .sa-double-blink { animation: sa-double-blink var(--sa-duration, 2s) var(--sa-timing, steps(1, end)) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-double-blink { 0%, 4% { opacity: 0; } 5%, 14% { opacity: 1; } 15%, 19% { opacity: 0; } 20%, 100% { opacity: 1; } } .sa-text-notification-blink { animation: sa-text-notification-blink var(--sa-duration, 1.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-text-notification-blink { 0% { opacity: 1; } 6% { opacity: 0.15; } 12% { opacity: 1; } 18% { opacity: 0.15; } 24% { opacity: 1; } 100% { opacity: 1; } } .sa-two-tap-flicker { animation: sa-two-tap-flicker var(--sa-duration, 2.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-two-tap-flicker { 0% { opacity: 1; } 8% { opacity: 0.3; } 16% { opacity: 1; } 24% { opacity: 0.3; } 32% { opacity: 1; } 100% { opacity: 1; } } .sa-paired-flash { animation: sa-paired-flash var(--sa-duration, 2.2s) var(--sa-timing, steps(1, end)) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-paired-flash { 0%, 5% { opacity: 0; } 6%, 22% { opacity: 1; } 23%, 28% { opacity: 0; } 29%, 100% { opacity: 1; } } .sa-heartbeat-blink { animation: sa-heartbeat-blink var(--sa-duration, 1.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-heartbeat-blink { 0% { opacity: 1; } 7% { opacity: 0.4; } 14% { opacity: 1; } 21% { opacity: 0.15; } 30% { opacity: 1; } 100% { opacity: 1; } } .sa-quick-double-flicker { animation: sa-quick-double-flicker var(--sa-duration, 1.4s) var(--sa-timing, steps(1, end)) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-quick-double-flicker { 0%, 6% { opacity: 0; } 7%, 17% { opacity: 1; } 18%, 24% { opacity: 0; } 25%, 100% { opacity: 1; } } .sa-blink-blink-pause { animation: sa-blink-blink-pause var(--sa-duration, 3s) var(--sa-timing, steps(1, end)) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-blink-blink-pause { 0%, 3% { opacity: 0; } 4%, 9% { opacity: 1; } 10%, 13% { opacity: 0; } 14%, 100% { opacity: 1; } } .sa-electric-flicker { animation: sa-electric-flicker var(--sa-duration, 2s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-electric-flicker { 0% { opacity: 1; filter: brightness(1); } 11% { opacity: 0.5; filter: brightness(1.2); } 14% { opacity: 1; filter: brightness(1); } 47% { opacity: 0.7; filter: brightness(1.15); } 52% { opacity: 1; filter: brightness(1); } 81% { opacity: 0.4; filter: brightness(1.25); } 85% { opacity: 1; filter: brightness(1); } 100% { opacity: 1; filter: brightness(1); } } .sa-charged-flicker { animation: sa-charged-flicker var(--sa-duration, 1.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-charged-flicker { 0% { opacity: 0.9; filter: brightness(1); } 20% { opacity: 1; filter: brightness(1.18); } 38% { opacity: 0.85; filter: brightness(1); } 63% { opacity: 1; filter: brightness(1.1); } 79% { opacity: 0.9; filter: brightness(1); } 100% { opacity: 0.9; filter: brightness(1); } } .sa-static-charge { animation: sa-static-charge var(--sa-duration, 2.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-static-charge { 0%, 100% { opacity: 0.95; filter: brightness(1); } 50% { opacity: 0.9; filter: brightness(1.3); } } .sa-power-surge-flicker { animation: sa-power-surge-flicker var(--sa-duration, 2.8s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-power-surge-flicker { 0% { opacity: 1; filter: brightness(1); } 55% { opacity: 1; filter: brightness(1); } 58% { opacity: 0.15; filter: brightness(1); } 62% { opacity: 1; filter: brightness(1.35); } 68% { opacity: 0.6; filter: brightness(1); } 75% { opacity: 1; filter: brightness(1); } 100% { opacity: 1; filter: brightness(1); } } .sa-live-wire-flicker { animation: sa-live-wire-flicker var(--sa-duration, 0.7s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-live-wire-flicker { 0% { opacity: 1; filter: brightness(1); } 15% { opacity: 0.8; filter: brightness(1.15); } 30% { opacity: 1; filter: brightness(1); } 45% { opacity: 0.85; filter: brightness(1.1); } 60% { opacity: 1; filter: brightness(1); } 80% { opacity: 0.75; filter: brightness(1.2); } 100% { opacity: 1; filter: brightness(1); } } .sa-voltage-flicker { animation: sa-voltage-flicker var(--sa-duration, 3.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-voltage-flicker { 0%, 100% { opacity: 0.92; filter: brightness(1); } 50% { opacity: 0.85; filter: brightness(1.22); } } .sa-current-flicker { animation: sa-current-flicker var(--sa-duration, 1.9s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-current-flicker { 0% { opacity: 1; filter: brightness(1); } 9% { opacity: 0.6; filter: brightness(1.2); } 13% { opacity: 1; filter: brightness(1); } 41% { opacity: 0.75; filter: brightness(1.1); } 46% { opacity: 1; filter: brightness(1); } 72% { opacity: 0.5; filter: brightness(1.25); } 78% { opacity: 1; filter: brightness(1); } 100% { opacity: 1; filter: brightness(1); } } .sa-dramatic-flash { animation: sa-dramatic-flash var(--sa-duration, 0.6s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1); } @keyframes sa-dramatic-flash { 0% { opacity: 0.15; } 10% { opacity: 1; } 30% { opacity: 0.4; } 100% { opacity: 1; } } .sa-sudden-flash { animation: sa-sudden-flash var(--sa-duration, 0.9s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1); } @keyframes sa-sudden-flash { 0% { opacity: 0.4; filter: brightness(1); } 20% { opacity: 1; filter: brightness(1.5); } 45% { opacity: 0.7; filter: brightness(1); } 100% { opacity: 1; filter: brightness(1); } } .sa-quiet-pulse { animation: sa-quiet-pulse var(--sa-duration, 3s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-quiet-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .sa-standby-pulse { animation: sa-standby-pulse var(--sa-duration, 4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-standby-pulse { 0%, 100% { opacity: 0.95; } 50% { opacity: 0.6; } } .sa-idle-glimmer { animation: sa-idle-glimmer var(--sa-duration, 3.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-idle-glimmer { 0%, 100% { opacity: 0.85; } 50% { opacity: 0.55; } } .sa-steady-alive-pulse { animation: sa-steady-alive-pulse var(--sa-duration, 5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-steady-alive-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.65; } } .sa-resting-pulse { animation: sa-resting-pulse var(--sa-duration, 4.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-resting-pulse { 0%, 100% { opacity: 0.75; } 50% { opacity: 0.4; } } .sa-low-power-pulse { animation: sa-low-power-pulse var(--sa-duration, 6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-low-power-pulse { 0%, 100% { opacity: 0.8; } 50% { opacity: 0.45; } } /* ================================================================ attention Draw the eye without changing whether the element is present. Loop by default except `sa-shake`, which reads as broken if it repeats forever. */ .sa-pulse { animation: sa-pulse var(--sa-duration, 1.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } } .sa-beat { animation: sa-beat var(--sa-duration, 1.2s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-beat { 0%, 40%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 28% { transform: scale(1.05); } } .sa-flash { animation: sa-flash var(--sa-duration, 1.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-flash { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .sa-wobble { animation: sa-wobble var(--sa-duration, 1.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 50% 15%; } @keyframes sa-wobble { 0%, 55%, 100% { transform: rotate(0deg); } 10% { transform: rotate(11deg); } 20% { transform: rotate(-9deg); } 30% { transform: rotate(6deg); } 40% { transform: rotate(-3deg); } } .sa-shake { animation: sa-shake var(--sa-duration, 0.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-shake { 10%, 50% { transform: translateX(-6px); } 30%, 70% { transform: translateX(6px); } 90% { transform: translateX(-3px); } 0%, 100% { transform: translateX(0); } } .sa-jiggle { animation: sa-jiggle var(--sa-duration, 0.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: 50% 100%; } @keyframes sa-jiggle { 0%, 100% { transform: rotate(0deg) scale(1); } 25% { transform: rotate(-4deg) scale(1.03); } 75% { transform: rotate(4deg) scale(1.03); } } /* The one exception to the transform/opacity-only rule: box-shadow, to draw an expanding ring. Fine for one element; wrong for a whole list. Reads `currentColor`. */ .sa-ring { animation: sa-ring var(--sa-duration, 1.6s) var(--sa-timing, cubic-bezier(0.2, 0.6, 0.4, 1)) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-ring { 0% { box-shadow: 0 0 0 0 currentColor; opacity: 1; } 70% { opacity: 0.35; } 100% { box-shadow: 0 0 0 14px transparent; opacity: 0; } } .sa-corner-in-top-left { animation: sa-corner-in-top-left var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.16, 1, 0.3, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-corner-in-top-left { from { opacity: 0; transform: translate(calc(var(--sa-distance) * -1), calc(var(--sa-distance) * -1)); } to { opacity: 1; transform: translate(0, 0); } } .sa-corner-in-top-right { animation: sa-corner-in-top-right var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.16, 1, 0.3, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-corner-in-top-right { from { opacity: 0; transform: translate(var(--sa-distance), calc(var(--sa-distance) * -1)); } to { opacity: 1; transform: translate(0, 0); } } .sa-corner-in-bottom-left { animation: sa-corner-in-bottom-left var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.16, 1, 0.3, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-corner-in-bottom-left { from { opacity: 0; transform: translate(calc(var(--sa-distance) * -1), var(--sa-distance)); } to { opacity: 1; transform: translate(0, 0); } } .sa-corner-in-bottom-right { animation: sa-corner-in-bottom-right var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.16, 1, 0.3, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-corner-in-bottom-right { from { opacity: 0; transform: translate(var(--sa-distance), var(--sa-distance)); } to { opacity: 1; transform: translate(0, 0); } } .sa-dock-in-left { animation: sa-dock-in-left var(--sa-duration, 0.6s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-dock-in-left { 0% { opacity: 0; transform: translateX(calc(var(--sa-distance) * -2)); } 70% { opacity: 1; transform: translateX(calc(var(--sa-distance) * 0.08)); } 100% { opacity: 1; transform: translateX(0); } } .sa-dock-in-right { animation: sa-dock-in-right var(--sa-duration, 0.6s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-dock-in-right { 0% { opacity: 0; transform: translateX(calc(var(--sa-distance) * 2)); } 70% { opacity: 1; transform: translateX(calc(var(--sa-distance) * -0.08)); } 100% { opacity: 1; transform: translateX(0); } } .sa-dock-in-top { animation: sa-dock-in-top var(--sa-duration, 0.6s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-dock-in-top { 0% { opacity: 0; transform: translateY(calc(var(--sa-distance) * -2)); } 70% { opacity: 1; transform: translateY(calc(var(--sa-distance) * 0.08)); } 100% { opacity: 1; transform: translateY(0); } } .sa-dock-in-bottom { animation: sa-dock-in-bottom var(--sa-duration, 0.6s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-dock-in-bottom { 0% { opacity: 0; transform: translateY(calc(var(--sa-distance) * 2)); } 70% { opacity: 1; transform: translateY(calc(var(--sa-distance) * -0.08)); } 100% { opacity: 1; transform: translateY(0); } } .sa-arc-in-from-left { animation: sa-arc-in-from-left var(--sa-duration, 0.6s) var(--sa-timing, cubic-bezier(0.33, 1, 0.68, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-arc-in-from-left { 0% { opacity: 0; transform: translate(calc(var(--sa-distance) * -1), 0); } 55% { opacity: 1; transform: translate(calc(var(--sa-distance) * -0.25), calc(var(--sa-distance) * 0.35)); } 100% { opacity: 1; transform: translate(0, 0); } } .sa-arc-in-from-right { animation: sa-arc-in-from-right var(--sa-duration, 0.6s) var(--sa-timing, cubic-bezier(0.33, 1, 0.68, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-arc-in-from-right { 0% { opacity: 0; transform: translate(var(--sa-distance), 0); } 55% { opacity: 1; transform: translate(calc(var(--sa-distance) * 0.25), calc(var(--sa-distance) * -0.35)); } 100% { opacity: 1; transform: translate(0, 0); } } .sa-arc-in-from-top { animation: sa-arc-in-from-top var(--sa-duration, 0.6s) var(--sa-timing, cubic-bezier(0.33, 1, 0.68, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-arc-in-from-top { 0% { opacity: 0; transform: translate(0, calc(var(--sa-distance) * -1)); } 55% { opacity: 1; transform: translate(calc(var(--sa-distance) * 0.35), calc(var(--sa-distance) * -0.25)); } 100% { opacity: 1; transform: translate(0, 0); } } .sa-arc-in-from-bottom { animation: sa-arc-in-from-bottom var(--sa-duration, 0.6s) var(--sa-timing, cubic-bezier(0.33, 1, 0.68, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-arc-in-from-bottom { 0% { opacity: 0; transform: translate(0, var(--sa-distance)); } 55% { opacity: 1; transform: translate(calc(var(--sa-distance) * -0.35), calc(var(--sa-distance) * 0.25)); } 100% { opacity: 1; transform: translate(0, 0); } } .sa-swoop-in-top-left { transform-origin: center; animation: sa-swoop-in-top-left var(--sa-duration, 0.65s) var(--sa-timing, cubic-bezier(0.22, 1, 0.36, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-swoop-in-top-left { 0% { opacity: 0; transform: translate(calc(var(--sa-distance) * -1.4), calc(var(--sa-distance) * -1.4)) rotate(-18deg); } 100% { opacity: 1; transform: translate(0, 0) rotate(0deg); } } .sa-swoop-in-bottom-right { transform-origin: center; animation: sa-swoop-in-bottom-right var(--sa-duration, 0.65s) var(--sa-timing, cubic-bezier(0.22, 1, 0.36, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-swoop-in-bottom-right { 0% { opacity: 0; transform: translate(calc(var(--sa-distance) * 1.4), calc(var(--sa-distance) * 1.4)) rotate(18deg); } 100% { opacity: 1; transform: translate(0, 0) rotate(0deg); } } .sa-spiral-in { transform-origin: center; animation: sa-spiral-in var(--sa-duration, 0.7s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-spiral-in { 0% { opacity: 0; transform: translate(calc(var(--sa-distance) * -0.6), calc(var(--sa-distance) * 0.6)) rotate(-160deg) scale(0.3); } 100% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); } } .sa-corkscrew-in-left { transform-origin: center; animation: sa-corkscrew-in-left var(--sa-duration, 0.65s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-corkscrew-in-left { 0% { opacity: 0; transform: translateX(calc(var(--sa-distance) * -1)) rotate(0deg); } 35% { opacity: 1; transform: translateX(calc(var(--sa-distance) * -0.6)) rotate(14deg); } 65% { transform: translateX(calc(var(--sa-distance) * -0.25)) rotate(-8deg); } 100% { transform: translateX(0) rotate(0deg); } } .sa-two-phase-in-left { animation: sa-two-phase-in-left var(--sa-duration, 0.8s) var(--sa-timing, ease) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-two-phase-in-left { 0% { opacity: 0; transform: translateX(calc(var(--sa-distance) * -1)); } 45% { opacity: 1; transform: translateX(calc(var(--sa-distance) * -0.4)); } 60% { transform: translateX(calc(var(--sa-distance) * -0.4)); } 100% { transform: translateX(0); } } .sa-two-phase-in-right { animation: sa-two-phase-in-right var(--sa-duration, 0.8s) var(--sa-timing, ease) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-two-phase-in-right { 0% { opacity: 0; transform: translateX(var(--sa-distance)); } 45% { opacity: 1; transform: translateX(calc(var(--sa-distance) * 0.4)); } 60% { transform: translateX(calc(var(--sa-distance) * 0.4)); } 100% { transform: translateX(0); } } .sa-two-phase-in-top { animation: sa-two-phase-in-top var(--sa-duration, 0.8s) var(--sa-timing, ease) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-two-phase-in-top { 0% { opacity: 0; transform: translateY(calc(var(--sa-distance) * -1)); } 45% { opacity: 1; transform: translateY(calc(var(--sa-distance) * -0.4)); } 60% { transform: translateY(calc(var(--sa-distance) * -0.4)); } 100% { transform: translateY(0); } } .sa-two-phase-in-bottom { animation: sa-two-phase-in-bottom var(--sa-duration, 0.8s) var(--sa-timing, ease) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-two-phase-in-bottom { 0% { opacity: 0; transform: translateY(var(--sa-distance)); } 45% { opacity: 1; transform: translateY(calc(var(--sa-distance) * 0.4)); } 60% { transform: translateY(calc(var(--sa-distance) * 0.4)); } 100% { transform: translateY(0); } } .sa-creep-then-dash-left { animation: sa-creep-then-dash-left var(--sa-duration, 0.7s) var(--sa-timing, cubic-bezier(0.55, 0, 1, 0.45)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-creep-then-dash-left { 0% { opacity: 0; transform: translateX(calc(var(--sa-distance) * -1)); } 70% { opacity: 1; transform: translateX(calc(var(--sa-distance) * -0.85)); } 100% { transform: translateX(0); } } .sa-creep-then-dash-right { animation: sa-creep-then-dash-right var(--sa-duration, 0.7s) var(--sa-timing, cubic-bezier(0.55, 0, 1, 0.45)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-creep-then-dash-right { 0% { opacity: 0; transform: translateX(var(--sa-distance)); } 70% { opacity: 1; transform: translateX(calc(var(--sa-distance) * 0.85)); } 100% { transform: translateX(0); } } .sa-dash-then-settle-top { animation: sa-dash-then-settle-top var(--sa-duration, 0.55s) var(--sa-timing, cubic-bezier(0, 0, 0.2, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-dash-then-settle-top { 0% { opacity: 0; transform: translateY(calc(var(--sa-distance) * -1)); } 30% { opacity: 1; transform: translateY(calc(var(--sa-distance) * 0.05)); } 100% { transform: translateY(0); } } .sa-dash-then-settle-bottom { animation: sa-dash-then-settle-bottom var(--sa-duration, 0.55s) var(--sa-timing, cubic-bezier(0, 0, 0.2, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-dash-then-settle-bottom { 0% { opacity: 0; transform: translateY(var(--sa-distance)); } 30% { opacity: 1; transform: translateY(calc(var(--sa-distance) * -0.05)); } 100% { transform: translateY(0); } } .sa-snap-in-from-left { transform-origin: center; animation: sa-snap-in-from-left var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-snap-in-from-left { 0% { opacity: 0; transform: translateX(calc(var(--sa-distance) * -1)) scale(0.9); } 80% { opacity: 1; transform: translateX(calc(var(--sa-distance) * 0.06)) scale(1.03); } 100% { transform: translateX(0) scale(1); } } .sa-snap-in-from-right { transform-origin: center; animation: sa-snap-in-from-right var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-snap-in-from-right { 0% { opacity: 0; transform: translateX(var(--sa-distance)) scale(0.9); } 80% { opacity: 1; transform: translateX(calc(var(--sa-distance) * -0.06)) scale(1.03); } 100% { transform: translateX(0) scale(1); } } .sa-glide-in-lower-left { animation: sa-glide-in-lower-left var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.16, 1, 0.3, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-glide-in-lower-left { from { opacity: 0; transform: translate(calc(var(--sa-distance) * -1), calc(var(--sa-distance) * 0.25)); } to { opacity: 1; transform: translate(0, 0); } } .sa-glide-in-upper-right { animation: sa-glide-in-upper-right var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.16, 1, 0.3, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-glide-in-upper-right { from { opacity: 0; transform: translate(var(--sa-distance), calc(var(--sa-distance) * -0.25)); } to { opacity: 1; transform: translate(0, 0); } } .sa-glide-in-upper-left { animation: sa-glide-in-upper-left var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.16, 1, 0.3, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-glide-in-upper-left { from { opacity: 0; transform: translate(calc(var(--sa-distance) * 0.25), calc(var(--sa-distance) * -1)); } to { opacity: 1; transform: translate(0, 0); } } .sa-glide-in-lower-right { animation: sa-glide-in-lower-right var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.16, 1, 0.3, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-glide-in-lower-right { from { opacity: 0; transform: translate(calc(var(--sa-distance) * -0.25), var(--sa-distance)); } to { opacity: 1; transform: translate(0, 0); } } .sa-drop-then-slide-right { animation: sa-drop-then-slide-right var(--sa-duration, 0.7s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-drop-then-slide-right { 0% { opacity: 0; transform: translate(calc(var(--sa-distance) * -1), calc(var(--sa-distance) * -1)); } 50% { opacity: 1; transform: translate(calc(var(--sa-distance) * -1), 0); } 100% { transform: translate(0, 0); } } .sa-drop-then-slide-left { animation: sa-drop-then-slide-left var(--sa-duration, 0.7s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-drop-then-slide-left { 0% { opacity: 0; transform: translate(var(--sa-distance), calc(var(--sa-distance) * -1)); } 50% { opacity: 1; transform: translate(var(--sa-distance), 0); } 100% { transform: translate(0, 0); } } .sa-rise-and-drift-right { animation: sa-rise-and-drift-right var(--sa-duration, 0.7s) var(--sa-timing, cubic-bezier(0.33, 1, 0.68, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-rise-and-drift-right { 0% { opacity: 0; transform: translate(0, var(--sa-distance)); } 50% { opacity: 1; transform: translate(calc(var(--sa-distance) * 0.3), calc(var(--sa-distance) * 0.15)); } 100% { transform: translate(0, 0); } } .sa-rise-and-drift-left { animation: sa-rise-and-drift-left var(--sa-duration, 0.7s) var(--sa-timing, cubic-bezier(0.33, 1, 0.68, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-rise-and-drift-left { 0% { opacity: 0; transform: translate(0, var(--sa-distance)); } 50% { opacity: 1; transform: translate(calc(var(--sa-distance) * -0.3), calc(var(--sa-distance) * 0.15)); } 100% { transform: translate(0, 0); } } .sa-streak-in-from-left { animation: sa-streak-in-from-left var(--sa-duration, 0.45s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-streak-in-from-left { 0% { opacity: 0; filter: blur(6px); transform: translateX(calc(var(--sa-distance) * -1.5)); } 60% { opacity: 1; filter: blur(1px); transform: translateX(calc(var(--sa-distance) * 0.05)); } 100% { filter: blur(0); transform: translateX(0); } } .sa-streak-in-from-right { animation: sa-streak-in-from-right var(--sa-duration, 0.45s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-streak-in-from-right { 0% { opacity: 0; filter: blur(6px); transform: translateX(calc(var(--sa-distance) * 1.5)); } 60% { opacity: 1; filter: blur(1px); transform: translateX(calc(var(--sa-distance) * -0.05)); } 100% { filter: blur(0); transform: translateX(0); } } .sa-streak-in-from-top { animation: sa-streak-in-from-top var(--sa-duration, 0.45s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-streak-in-from-top { 0% { opacity: 0; filter: blur(6px); transform: translateY(calc(var(--sa-distance) * -1.5)); } 60% { opacity: 1; filter: blur(1px); transform: translateY(calc(var(--sa-distance) * 0.05)); } 100% { filter: blur(0); transform: translateY(0); } } .sa-streak-in-from-bottom { animation: sa-streak-in-from-bottom var(--sa-duration, 0.45s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-streak-in-from-bottom { 0% { opacity: 0; filter: blur(6px); transform: translateY(calc(var(--sa-distance) * 1.5)); } 60% { opacity: 1; filter: blur(1px); transform: translateY(calc(var(--sa-distance) * -0.05)); } 100% { filter: blur(0); transform: translateY(0); } } .sa-hop-in-from-left { animation: sa-hop-in-from-left var(--sa-duration, 0.75s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-hop-in-from-left { 0% { opacity: 0; transform: translate(calc(var(--sa-distance) * -1), 0); } 25% { transform: translate(calc(var(--sa-distance) * -0.62), calc(var(--sa-distance) * -0.35)); } 50% { opacity: 1; transform: translate(calc(var(--sa-distance) * -0.3), 0); } 75% { transform: translate(calc(var(--sa-distance) * -0.08), calc(var(--sa-distance) * -0.2)); } 100% { transform: translate(0, 0); } } .sa-hop-in-from-right { animation: sa-hop-in-from-right var(--sa-duration, 0.75s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-hop-in-from-right { 0% { opacity: 0; transform: translate(var(--sa-distance), 0); } 25% { transform: translate(calc(var(--sa-distance) * 0.62), calc(var(--sa-distance) * -0.35)); } 50% { opacity: 1; transform: translate(calc(var(--sa-distance) * 0.3), 0); } 75% { transform: translate(calc(var(--sa-distance) * 0.08), calc(var(--sa-distance) * -0.2)); } 100% { transform: translate(0, 0); } } .sa-swing-in-from-top-left { transform-origin: top left; animation: sa-swing-in-from-top-left var(--sa-duration, 0.7s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-swing-in-from-top-left { 0% { opacity: 0; transform: translate(calc(var(--sa-distance) * -1), calc(var(--sa-distance) * -1)) rotate(-35deg); } 60% { opacity: 1; transform: translate(calc(var(--sa-distance) * 0.05), calc(var(--sa-distance) * 0.05)) rotate(6deg); } 100% { transform: translate(0, 0) rotate(0deg); } } .sa-swing-in-from-top-right { transform-origin: top right; animation: sa-swing-in-from-top-right var(--sa-duration, 0.7s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-swing-in-from-top-right { 0% { opacity: 0; transform: translate(var(--sa-distance), calc(var(--sa-distance) * -1)) rotate(35deg); } 60% { opacity: 1; transform: translate(calc(var(--sa-distance) * -0.05), calc(var(--sa-distance) * 0.05)) rotate(-6deg); } 100% { transform: translate(0, 0) rotate(0deg); } } .sa-orbit-in { transform-origin: center; animation: sa-orbit-in var(--sa-duration, 0.8s) var(--sa-timing, cubic-bezier(0.65, 0, 0.35, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-orbit-in { 0% { opacity: 0; transform: translate(calc(var(--sa-distance) * -1), 0) rotate(-90deg) scale(0.6); } 50% { opacity: 1; transform: translate(0, calc(var(--sa-distance) * -1)) rotate(-180deg) scale(0.85); } 100% { transform: translate(0, 0) rotate(-360deg) scale(1); } } .sa-peek-in-from-left { animation: sa-peek-in-from-left var(--sa-duration, 0.75s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-peek-in-from-left { 0% { opacity: 0; filter: blur(3px); transform: translateX(calc(var(--sa-distance) * -1)); } 35% { opacity: 0.6; filter: blur(1px); transform: translateX(calc(var(--sa-distance) * -0.7)); } 55% { opacity: 0.6; transform: translateX(calc(var(--sa-distance) * -0.7)); } 100% { opacity: 1; filter: blur(0); transform: translateX(0); } } .sa-peek-in-from-right { animation: sa-peek-in-from-right var(--sa-duration, 0.75s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-peek-in-from-right { 0% { opacity: 0; filter: blur(3px); transform: translateX(var(--sa-distance)); } 35% { opacity: 0.6; filter: blur(1px); transform: translateX(calc(var(--sa-distance) * 0.7)); } 55% { opacity: 0.6; transform: translateX(calc(var(--sa-distance) * 0.7)); } 100% { opacity: 1; filter: blur(0); transform: translateX(0); } } .sa-cross-in-from-bottom-right { animation: sa-cross-in-from-bottom-right var(--sa-duration, 0.6s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-cross-in-from-bottom-right { 0% { opacity: 0; transform: translate(var(--sa-distance), var(--sa-distance)); } 65% { opacity: 1; transform: translate(calc(var(--sa-distance) * -0.12), calc(var(--sa-distance) * -0.12)); } 100% { transform: translate(0, 0); } } .sa-wide-arc-in-from-right { animation: sa-wide-arc-in-from-right var(--sa-duration, 0.75s) var(--sa-timing, cubic-bezier(0.65, 0, 0.35, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-wide-arc-in-from-right { 0% { opacity: 0; transform: translate(calc(var(--sa-distance) * 1.5), calc(var(--sa-distance) * -0.8)); } 50% { opacity: 1; transform: translate(calc(var(--sa-distance) * 0.15), calc(var(--sa-distance) * -0.8)); } 100% { transform: translate(0, 0); } } .sa-wide-arc-in-from-left { animation: sa-wide-arc-in-from-left var(--sa-duration, 0.75s) var(--sa-timing, cubic-bezier(0.65, 0, 0.35, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-wide-arc-in-from-left { 0% { opacity: 0; transform: translate(calc(var(--sa-distance) * -1.5), calc(var(--sa-distance) * -0.8)); } 50% { opacity: 1; transform: translate(calc(var(--sa-distance) * -0.15), calc(var(--sa-distance) * -0.8)); } 100% { transform: translate(0, 0); } } .sa-unfurl-in-from-top { transform-origin: top center; animation: sa-unfurl-in-from-top var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.22, 1, 0.36, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-unfurl-in-from-top { 0% { opacity: 0; transform: translateY(calc(var(--sa-distance) * -1)) scaleY(0.4); } 100% { opacity: 1; transform: translateY(0) scaleY(1); } } .sa-unfurl-in-from-left { transform-origin: left center; animation: sa-unfurl-in-from-left var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.22, 1, 0.36, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-unfurl-in-from-left { 0% { opacity: 0; transform: translateX(calc(var(--sa-distance) * -1)) scaleX(0.4); } 100% { opacity: 1; transform: translateX(0) scaleX(1); } } .sa-zoom-in-snap { transform-origin: center; animation: sa-zoom-in-snap var(--sa-duration, 0.25s) var(--sa-timing, cubic-bezier(0.16, 1, 0.3, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-zoom-in-snap { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: scale(1); } } .sa-expand-in-slow { transform-origin: center; animation: sa-expand-in-slow var(--sa-duration, 0.9s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-expand-in-slow { 0% { opacity: 0; transform: scale(0.92); } 60% { opacity: 1; transform: scale(0.98); } 100% { opacity: 1; transform: scale(1); } } .sa-zoom-in-blast { transform-origin: center; animation: sa-zoom-in-blast var(--sa-duration, 0.4s) var(--sa-timing, cubic-bezier(0.11, 0.85, 0.32, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-zoom-in-blast { from { opacity: 0; transform: scale(0.15); } to { opacity: 1; transform: scale(1); } } .sa-scale-in-deep { transform-origin: center; animation: sa-scale-in-deep var(--sa-duration, 0.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-scale-in-deep { 0% { opacity: 0; transform: scale(0.4); } 40% { opacity: 1; transform: scale(0.4); } 100% { opacity: 1; transform: scale(1); } } .sa-scale-in-soft { transform-origin: center; animation: sa-scale-in-soft var(--sa-duration, 0.45s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-scale-in-soft { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } } .sa-spin-scale-in { transform-origin: center; animation: sa-spin-scale-in var(--sa-duration, 0.55s) var(--sa-timing, cubic-bezier(0.16, 1, 0.3, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-spin-scale-in { from { opacity: 0; transform: scale(0.5) rotate(-180deg); } to { opacity: 1; transform: scale(1) rotate(0deg); } } .sa-twist-scale-in { transform-origin: center; animation: sa-twist-scale-in var(--sa-duration, 0.45s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-twist-scale-in { from { opacity: 0; transform: scale(0.6) rotate(45deg); } to { opacity: 1; transform: scale(1) rotate(0deg); } } .sa-scale-in-spiral { transform-origin: center; animation: sa-scale-in-spiral var(--sa-duration, 0.7s) var(--sa-timing, cubic-bezier(0.22, 1, 0.36, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-scale-in-spiral { 0% { opacity: 0; transform: scale(0.3) rotate(-270deg); } 60% { opacity: 1; transform: scale(1.05) rotate(10deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } } .sa-scale-in-corner-tl { transform-origin: top left; animation: sa-scale-in-corner-tl var(--sa-duration, 0.4s) var(--sa-timing, cubic-bezier(0.16, 1, 0.3, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-scale-in-corner-tl { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } } .sa-scale-in-corner-br { transform-origin: bottom right; animation: sa-scale-in-corner-br var(--sa-duration, 0.4s) var(--sa-timing, cubic-bezier(0.16, 1, 0.3, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-scale-in-corner-br { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } } .sa-scale-in-corner-tr { transform-origin: top right; animation: sa-scale-in-corner-tr var(--sa-duration, 0.4s) var(--sa-timing, cubic-bezier(0.16, 1, 0.3, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-scale-in-corner-tr { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } } .sa-scale-in-corner-bl { transform-origin: bottom left; animation: sa-scale-in-corner-bl var(--sa-duration, 0.4s) var(--sa-timing, cubic-bezier(0.16, 1, 0.3, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-scale-in-corner-bl { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } } .sa-scale-in-edge-left { transform-origin: left center; animation: sa-scale-in-edge-left var(--sa-duration, 0.45s) var(--sa-timing, cubic-bezier(0.16, 1, 0.3, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-scale-in-edge-left { from { opacity: 0; transform: scaleX(0.3) scaleY(0.8); } to { opacity: 1; transform: scaleX(1) scaleY(1); } } .sa-scale-in-edge-top { transform-origin: top center; animation: sa-scale-in-edge-top var(--sa-duration, 0.45s) var(--sa-timing, cubic-bezier(0.16, 1, 0.3, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-scale-in-edge-top { from { opacity: 0; transform: scaleY(0.3) scaleX(0.8); } to { opacity: 1; transform: scaleY(1) scaleX(1); } } .sa-scale-in-focus { transform-origin: center; animation: sa-scale-in-focus var(--sa-duration, 0.5s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-scale-in-focus { from { opacity: 0; transform: scale(1.15); filter: blur(8px); } to { opacity: 1; transform: scale(1); filter: blur(0); } } .sa-scale-in-hazy { transform-origin: center; animation: sa-scale-in-hazy var(--sa-duration, 0.55s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-scale-in-hazy { from { opacity: 0; transform: scale(0.85); filter: blur(4px); } to { opacity: 1; transform: scale(1); filter: blur(0); } } .sa-zoom-in-blur-snap { transform-origin: center; animation: sa-zoom-in-blur-snap var(--sa-duration, 0.45s) var(--sa-timing, cubic-bezier(0.22, 1, 0.36, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-zoom-in-blur-snap { 0% { opacity: 0; transform: scale(0.4); filter: blur(12px); } 70% { opacity: 1; transform: scale(1.03); filter: blur(1px); } 100% { opacity: 1; transform: scale(1); filter: blur(0); } } .sa-scale-in-elastic { transform-origin: center; animation: sa-scale-in-elastic var(--sa-duration, 0.6s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-scale-in-elastic { 0% { opacity: 0; transform: scale(0.5); } 50% { opacity: 1; transform: scale(1.15); } 75% { transform: scale(0.95); } 100% { transform: scale(1); } } .sa-scale-in-bounce-double { transform-origin: center; animation: sa-scale-in-bounce-double var(--sa-duration, 0.7s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-scale-in-bounce-double { 0% { opacity: 0; transform: scale(0.3); } 40% { opacity: 1; transform: scale(1.1); } 60% { transform: scale(0.95); } 80% { transform: scale(1.05); } 100% { transform: scale(1); } } .sa-scale-in-bounce-triple { transform-origin: center; animation: sa-scale-in-bounce-triple var(--sa-duration, 0.85s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-scale-in-bounce-triple { 0% { opacity: 0; transform: scale(0.3); } 35% { opacity: 1; transform: scale(1.12); } 55% { transform: scale(0.92); } 75% { transform: scale(1.06); } 90% { transform: scale(0.98); } 100% { transform: scale(1); } } .sa-scale-in-skew { transform-origin: center; animation: sa-scale-in-skew var(--sa-duration, 0.45s) var(--sa-timing, cubic-bezier(0.16, 1, 0.3, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-scale-in-skew { from { opacity: 0; transform: scale(0.6) skewX(-12deg); } to { opacity: 1; transform: scale(1) skewX(0deg); } } .sa-scale-in-skew-y { transform-origin: center; animation: sa-scale-in-skew-y var(--sa-duration, 0.45s) var(--sa-timing, cubic-bezier(0.16, 1, 0.3, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-scale-in-skew-y { from { opacity: 0; transform: scale(0.6) skewY(10deg); } to { opacity: 1; transform: scale(1) skewY(0deg); } } .sa-scale-in-skew-twist { transform-origin: center; animation: sa-scale-in-skew-twist var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.16, 1, 0.3, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-scale-in-skew-twist { from { opacity: 0; transform: scale(0.5) skewX(-8deg) skewY(-8deg); } to { opacity: 1; transform: scale(1) skewX(0deg) skewY(0deg); } } .sa-iris-in { transform-origin: center; animation: sa-iris-in var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.22, 1, 0.36, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-iris-in { 0% { opacity: 0; transform: scale(0); } 70% { opacity: 1; transform: scale(1.02); } 100% { transform: scale(1); } } .sa-aperture-in { transform-origin: center; animation: sa-aperture-in var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.22, 1, 0.36, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-aperture-in { from { opacity: 0; transform: scale(0.1) rotate(8deg); } to { opacity: 1; transform: scale(1) rotate(0deg); } } .sa-unfold-in-horizontal { transform-origin: center; animation: sa-unfold-in-horizontal var(--sa-duration, 0.55s) var(--sa-timing, cubic-bezier(0.16, 1, 0.3, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-unfold-in-horizontal { 0% { opacity: 0; transform: scaleX(0) scaleY(0.6); } 60% { opacity: 1; transform: scaleX(1.02) scaleY(0.9); } 100% { transform: scaleX(1) scaleY(1); } } .sa-unfold-in-vertical { transform-origin: center; animation: sa-unfold-in-vertical var(--sa-duration, 0.55s) var(--sa-timing, cubic-bezier(0.16, 1, 0.3, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-unfold-in-vertical { 0% { opacity: 0; transform: scaleY(0) scaleX(0.6); } 60% { opacity: 1; transform: scaleY(1.02) scaleX(0.9); } 100% { transform: scaleY(1) scaleX(1); } } .sa-unfold-in-diagonal { transform-origin: center; animation: sa-unfold-in-diagonal var(--sa-duration, 0.6s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-unfold-in-diagonal { 0% { opacity: 0; transform: scaleX(0.2) scaleY(0.05); } 50% { opacity: 1; transform: scaleX(0.7) scaleY(0.4); } 100% { transform: scaleX(1) scaleY(1); } } .sa-scale-in-flip-x { transform-origin: center; animation: sa-scale-in-flip-x var(--sa-duration, 0.55s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-scale-in-flip-x { from { opacity: 0; transform: perspective(600px) rotateX(60deg) scale(0.8); } to { opacity: 1; transform: perspective(600px) rotateX(0deg) scale(1); } } .sa-scale-in-flip-y { transform-origin: center; animation: sa-scale-in-flip-y var(--sa-duration, 0.55s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-scale-in-flip-y { from { opacity: 0; transform: perspective(600px) rotateY(-60deg) scale(0.8); } to { opacity: 1; transform: perspective(600px) rotateY(0deg) scale(1); } } .sa-scale-in-tilt { transform-origin: center; animation: sa-scale-in-tilt var(--sa-duration, 0.45s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-scale-in-tilt { from { opacity: 0; transform: perspective(700px) rotateX(-20deg) scale(0.85); } to { opacity: 1; transform: perspective(700px) rotateX(0deg) scale(1); } } .sa-scale-in-swoop { transform-origin: center; animation: sa-scale-in-swoop var(--sa-duration, 0.55s) var(--sa-timing, cubic-bezier(0.16, 1, 0.3, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-scale-in-swoop { from { opacity: 0; transform: translateY(calc(var(--sa-distance, 24px) * -1)) scale(0.6) rotate(-6deg); } to { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); } } .sa-zoom-in-drift { transform-origin: center; animation: sa-zoom-in-drift var(--sa-duration, 0.35s) var(--sa-timing, cubic-bezier(0.16, 1, 0.3, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-zoom-in-drift { from { opacity: 0; transform: translateX(calc(var(--sa-distance, 16px) * -1)) scale(0.5); } to { opacity: 1; transform: translateX(0) scale(1); } } .sa-scale-in-corner-pull { transform-origin: top left; animation: sa-scale-in-corner-pull var(--sa-duration, 0.45s) var(--sa-timing, cubic-bezier(0.16, 1, 0.3, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-scale-in-corner-pull { from { opacity: 0; transform: translate(calc(var(--sa-distance, 20px) * -1), calc(var(--sa-distance, 20px) * -1)) scale(0.5); } to { opacity: 1; transform: translate(0, 0) scale(1); } } .sa-scale-in-squash { transform-origin: center; animation: sa-scale-in-squash var(--sa-duration, 0.5s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-scale-in-squash { 0% { opacity: 0; transform: scaleY(0.4) scaleX(1.2); } 60% { opacity: 1; transform: scaleY(1.1) scaleX(0.95); } 100% { transform: scaleY(1) scaleX(1); } } .sa-scale-in-stretch { transform-origin: center; animation: sa-scale-in-stretch var(--sa-duration, 0.5s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-scale-in-stretch { 0% { opacity: 0; transform: scaleX(0.4) scaleY(1.2); } 60% { opacity: 1; transform: scaleX(1.1) scaleY(0.95); } 100% { transform: scaleX(1) scaleY(1); } } .sa-scale-in-rubber { transform-origin: center; animation: sa-scale-in-rubber var(--sa-duration, 0.7s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-scale-in-rubber { 0% { opacity: 0; transform: scale(0.5); } 30% { opacity: 1; transform: scaleX(1.15) scaleY(0.85); } 50% { transform: scaleX(0.9) scaleY(1.1); } 70% { transform: scaleX(1.05) scaleY(0.97); } 100% { transform: scale(1); } } .sa-scale-in-vortex { transform-origin: center; animation: sa-scale-in-vortex var(--sa-duration, 0.6s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-scale-in-vortex { from { opacity: 0; transform: scale(0.3) rotate(-360deg); filter: blur(6px); } to { opacity: 1; transform: scale(1) rotate(0deg); filter: blur(0); } } .sa-scale-in-roll { transform-origin: center; animation: sa-scale-in-roll var(--sa-duration, 0.5s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-scale-in-roll { from { opacity: 0; transform: scale(0.4) rotate(180deg); } to { opacity: 1; transform: scale(1) rotate(0deg); } } .sa-scale-in-crisp { transform-origin: center; animation: sa-scale-in-crisp var(--sa-duration, 0.3s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-scale-in-crisp { from { opacity: 0; transform: scale(0.7); filter: blur(3px); } to { opacity: 1; transform: scale(1); filter: blur(0); } } .sa-scale-in-wide { transform-origin: center; animation: sa-scale-in-wide var(--sa-duration, 0.5s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-scale-in-wide { 0% { opacity: 0; transform: scaleX(1.6) scaleY(0.5); } 60% { opacity: 1; transform: scaleX(0.9) scaleY(1.05); } 100% { transform: scale(1); } } .sa-scale-in-tall { transform-origin: center; animation: sa-scale-in-tall var(--sa-duration, 0.5s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-scale-in-tall { 0% { opacity: 0; transform: scaleY(1.6) scaleX(0.5); } 60% { opacity: 1; transform: scaleY(0.9) scaleX(1.05); } 100% { transform: scale(1); } } .sa-scale-in-diamond { transform-origin: center; animation: sa-scale-in-diamond var(--sa-duration, 0.5s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-scale-in-diamond { 0% { opacity: 0; transform: scale(0.6) rotate(45deg); } 60% { opacity: 1; transform: scale(1.05) rotate(8deg); } 100% { transform: scale(1) rotate(0deg); } } .sa-scale-in-corner-spin { transform-origin: bottom right; animation: sa-scale-in-corner-spin var(--sa-duration, 0.45s) var(--sa-timing, cubic-bezier(0.16, 1, 0.3, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-scale-in-corner-spin { from { opacity: 0; transform: scale(0.3) rotate(-90deg); } to { opacity: 1; transform: scale(1) rotate(0deg); } } .sa-scale-in-billow { transform-origin: center; animation: sa-scale-in-billow var(--sa-duration, 0.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-scale-in-billow { 0% { opacity: 0; transform: scale(0.8); filter: blur(10px); } 50% { opacity: 0.6; transform: scale(0.92); filter: blur(4px); } 100% { opacity: 1; transform: scale(1); filter: blur(0); } } .sa-scale-in-defocus { transform-origin: center; animation: sa-scale-in-defocus var(--sa-duration, 0.6s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-scale-in-defocus { from { opacity: 0; transform: scale(1.3); filter: blur(14px); } to { opacity: 1; transform: scale(1); filter: blur(0); } } .sa-scale-in-skew-snap { transform-origin: center; animation: sa-scale-in-skew-snap var(--sa-duration, 0.4s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-scale-in-skew-snap { 0% { opacity: 0; transform: scale(0.4) skewX(-20deg); } 60% { opacity: 1; transform: scale(1.05) skewX(6deg); } 100% { transform: scale(1) skewX(0deg); } } .sa-scale-in-pinwheel { transform-origin: center; animation: sa-scale-in-pinwheel var(--sa-duration, 0.6s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-scale-in-pinwheel { from { opacity: 0; transform: scale(0.2) rotate(-540deg); } to { opacity: 1; transform: scale(1) rotate(0deg); } } .sa-scale-in-aperture-close { transform-origin: center; animation: sa-scale-in-aperture-close var(--sa-duration, 0.55s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-scale-in-aperture-close { 0% { opacity: 0; transform: scale(1.4); } 50% { opacity: 0.7; transform: scale(0.85); } 100% { opacity: 1; transform: scale(1); } } .sa-scale-in-corner-fold { transform-origin: top left; animation: sa-scale-in-corner-fold var(--sa-duration, 0.5s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-scale-in-corner-fold { 0% { opacity: 0; transform: scale(0.3) rotate(-15deg); } 60% { opacity: 1; transform: scale(1.05) rotate(3deg); } 100% { transform: scale(1) rotate(0deg); } } .sa-tumble-in { transform-origin: center; animation: sa-tumble-in var(--sa-duration, 0.7s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-tumble-in { 0% { opacity: 0; transform: translateX(calc(var(--sa-distance, 60px) * -1)) rotate(-180deg); } 60% { opacity: 1; transform: translateX(calc(var(--sa-distance, 60px) * 0.1)) rotate(20deg); } 100% { opacity: 1; transform: translateX(0) rotate(0deg); } } .sa-cartwheel-in { transform-origin: center; animation: sa-cartwheel-in var(--sa-duration, 0.8s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-cartwheel-in { 0% { opacity: 0; transform: translate(calc(var(--sa-distance, 70px) * -1), calc(var(--sa-distance, 70px) * 0.4)) rotate(-360deg); } 55% { opacity: 1; transform: translate(calc(var(--sa-distance, 70px) * -0.3), calc(var(--sa-distance, 70px) * -0.2)) rotate(-180deg); } 100% { opacity: 1; transform: translate(0, 0) rotate(0deg); } } .sa-barrel-roll-in { transform-origin: center; animation: sa-barrel-roll-in var(--sa-duration, 0.7s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-barrel-roll-in { 0% { opacity: 0; transform: scale(0.4) rotate(0deg); } 50% { opacity: 1; transform: scale(1.15) rotate(180deg); } 100% { opacity: 1; transform: scale(1) rotate(360deg); } } .sa-flip-tumble-in { transform-origin: center; animation: sa-flip-tumble-in var(--sa-duration, 0.6s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-flip-tumble-in { 0% { opacity: 0; transform: scaleY(0.1) rotate(-90deg); } 55% { opacity: 1; transform: scaleY(1.2) rotate(10deg); } 100% { opacity: 1; transform: scaleY(1) rotate(0deg); } } .sa-roll-in-bounce { transform-origin: center; animation: sa-roll-in-bounce var(--sa-duration, 0.8s) var(--sa-timing, cubic-bezier(0.36, 0, 0.66, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-roll-in-bounce { 0% { opacity: 0; transform: translate(calc(var(--sa-distance, 70px) * -1), 0) rotate(-270deg); } 70% { opacity: 1; transform: translate(calc(var(--sa-distance, 70px) * 0.05), calc(var(--sa-distance, 70px) * -0.15)) rotate(10deg); } 85% { opacity: 1; transform: translate(0, calc(var(--sa-distance, 70px) * 0.05)) rotate(-5deg); } 100% { opacity: 1; transform: translate(0, 0) rotate(0deg); } } .sa-corkscrew-in { transform-origin: center; animation: sa-corkscrew-in var(--sa-duration, 0.8s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-corkscrew-in { 0% { opacity: 0; transform: translate(calc(var(--sa-distance, 50px) * -1), calc(var(--sa-distance, 50px) * -1)) rotate(-540deg) scale(0.3); } 60% { opacity: 1; transform: translate(calc(var(--sa-distance, 50px) * 0.15), calc(var(--sa-distance, 50px) * 0.15)) rotate(-60deg) scale(1.1); } 100% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); } } .sa-somersault-in { transform-origin: center; animation: sa-somersault-in var(--sa-duration, 0.7s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-somersault-in { 0% { opacity: 0; transform: translateY(calc(var(--sa-distance, 60px) * -1)) rotate(360deg); } 55% { opacity: 1; transform: translateY(calc(var(--sa-distance, 60px) * 0.1)) rotate(20deg); } 100% { opacity: 1; transform: translateY(0) rotate(0deg); } } .sa-hop-in { transform-origin: bottom center; animation: sa-hop-in var(--sa-duration, 1s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-hop-in { 0% { opacity: 0; transform: translateY(calc(var(--sa-distance, 50px) * -1)); } 30% { opacity: 1; transform: translateY(0); } 45% { opacity: 1; transform: translateY(calc(var(--sa-distance, 50px) * -0.4)); } 60% { opacity: 1; transform: translateY(0); } 72% { opacity: 1; transform: translateY(calc(var(--sa-distance, 50px) * -0.18)); } 84% { opacity: 1; transform: translateY(0); } 92% { opacity: 1; transform: translateY(calc(var(--sa-distance, 50px) * -0.06)); } 100% { opacity: 1; transform: translateY(0); } } .sa-bunny-hop-in { transform-origin: bottom center; animation: sa-bunny-hop-in var(--sa-duration, 1s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-bunny-hop-in { 0% { opacity: 0; transform: translateY(calc(var(--sa-distance, 60px) * -1)) scaleY(1); } 25% { opacity: 1; transform: translateY(0) scaleY(0.8); } 45% { opacity: 1; transform: translateY(calc(var(--sa-distance, 60px) * -0.6)) scaleY(1.05); } 70% { opacity: 1; transform: translateY(0) scaleY(0.85); } 85% { opacity: 1; transform: translateY(calc(var(--sa-distance, 60px) * -0.15)) scaleY(1.02); } 100% { opacity: 1; transform: translateY(0) scaleY(1); } } .sa-skip-in { transform-origin: center; animation: sa-skip-in var(--sa-duration, 0.9s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-skip-in { 0% { opacity: 0; transform: translate(calc(var(--sa-distance, 80px) * -1), calc(var(--sa-distance, 80px) * 0.3)); } 30% { opacity: 1; transform: translate(calc(var(--sa-distance, 80px) * -0.5), calc(var(--sa-distance, 80px) * -0.15)); } 55% { opacity: 1; transform: translate(calc(var(--sa-distance, 80px) * -0.2), calc(var(--sa-distance, 80px) * 0.15)); } 78% { opacity: 1; transform: translate(calc(var(--sa-distance, 80px) * -0.05), calc(var(--sa-distance, 80px) * -0.05)); } 100% { opacity: 1; transform: translate(0, 0); } } .sa-bounce-hop-in { transform-origin: center; animation: sa-bounce-hop-in var(--sa-duration, 0.9s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-bounce-hop-in { 0% { opacity: 0; transform: translate(calc(var(--sa-distance, 90px) * -1), calc(var(--sa-distance, 90px) * -0.6)); } 25% { opacity: 1; transform: translate(calc(var(--sa-distance, 90px) * -0.1), 0); } 40% { opacity: 1; transform: translate(0, calc(var(--sa-distance, 90px) * -0.25)); } 55% { opacity: 1; transform: translate(0, 0); } 70% { opacity: 1; transform: translate(0, calc(var(--sa-distance, 90px) * -0.1)); } 85% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 1; transform: translate(0, 0); } } .sa-pogo-in { transform-origin: bottom center; animation: sa-pogo-in var(--sa-duration, 0.6s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-pogo-in { 0% { opacity: 0; transform: translateY(calc(var(--sa-distance, 40px) * -1)) scaleY(0.6); } 40% { opacity: 1; transform: translateY(0) scaleY(1.3); } 55% { opacity: 1; transform: translateY(calc(var(--sa-distance, 40px) * -0.5)) scaleY(0.9); } 75% { opacity: 1; transform: translateY(0) scaleY(1.1); } 100% { opacity: 1; transform: translateY(0) scaleY(1); } } .sa-hiccup-in { transform-origin: center; animation: sa-hiccup-in var(--sa-duration, 0.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-hiccup-in { 0% { opacity: 0; transform: translateY(calc(var(--sa-distance, 20px) * -1)); } 15% { opacity: 0.6; transform: translateY(calc(var(--sa-distance, 20px) * -0.6)); } 30% { opacity: 1; transform: translateY(0); } 40% { opacity: 1; transform: translateY(calc(var(--sa-distance, 20px) * -0.3)); } 50% { opacity: 1; transform: translateY(calc(var(--sa-distance, 20px) * -0.1)); } 62% { opacity: 1; transform: translateY(0); } 75% { opacity: 1; transform: translateY(calc(var(--sa-distance, 20px) * -0.15)); } 88% { opacity: 1; transform: translateY(0); } 100% { opacity: 1; transform: translateY(0); } } .sa-overshoot-settle-in { transform-origin: center; animation: sa-overshoot-settle-in var(--sa-duration, 0.6s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-overshoot-settle-in { 0% { opacity: 0; transform: scale(0.5) rotate(0deg); } 50% { opacity: 1; transform: scale(1.15) rotate(6deg); } 70% { opacity: 1; transform: scale(0.97) rotate(-4deg); } 85% { opacity: 1; transform: scale(1.03) rotate(2deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } } .sa-rubber-band-in { transform-origin: center; animation: sa-rubber-band-in var(--sa-duration, 0.7s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-rubber-band-in { 0% { opacity: 0; transform: scale(0.3, 0.3); } 30% { opacity: 1; transform: scale(1.25, 0.75); } 50% { opacity: 1; transform: scale(0.85, 1.2); } 70% { opacity: 1; transform: scale(1.1, 0.9); } 85% { opacity: 1; transform: scale(0.95, 1.05); } 100% { opacity: 1; transform: scale(1, 1); } } .sa-teeter-in { transform-origin: center; animation: sa-teeter-in var(--sa-duration, 0.7s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-teeter-in { 0% { opacity: 0; transform: scale(0.6) rotate(0deg); } 40% { opacity: 1; transform: scale(1) rotate(-12deg); } 60% { opacity: 1; transform: scale(1) rotate(8deg); } 78% { opacity: 1; transform: scale(1) rotate(-4deg); } 90% { opacity: 1; transform: scale(1) rotate(2deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } } .sa-tilt-in-settle { transform-origin: center; animation: sa-tilt-in-settle var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-tilt-in-settle { 0% { opacity: 0; transform: translate(calc(var(--sa-distance, 50px) * -1), calc(var(--sa-distance, 50px) * -0.3)) rotate(-15deg); } 65% { opacity: 1; transform: translate(calc(var(--sa-distance, 50px) * 0.06), calc(var(--sa-distance, 50px) * 0.02)) rotate(4deg); } 100% { opacity: 1; transform: translate(0, 0) rotate(0deg); } } .sa-jelly-in { transform-origin: center; animation: sa-jelly-in var(--sa-duration, 0.8s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-jelly-in { 0% { opacity: 0; transform: scale(0.4); } 35% { opacity: 1; transform: scale(1.1); } 50% { opacity: 1; transform: scale(0.94); } 65% { opacity: 1; transform: scale(1.05); } 80% { opacity: 1; transform: scale(0.98); } 92% { opacity: 1; transform: scale(1.02); } 100% { opacity: 1; transform: scale(1); } } .sa-wag-in { transform-origin: bottom center; animation: sa-wag-in var(--sa-duration, 0.7s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-wag-in { 0% { opacity: 0; transform: scale(0.7) rotate(0deg); } 25% { opacity: 1; transform: scale(1) rotate(14deg); } 40% { opacity: 1; transform: scale(1) rotate(-10deg); } 55% { opacity: 1; transform: scale(1) rotate(7deg); } 70% { opacity: 1; transform: scale(1) rotate(-4deg); } 85% { opacity: 1; transform: scale(1) rotate(2deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } } .sa-skid-in { transform-origin: center; animation: sa-skid-in var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.16, 1, 0.3, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-skid-in { 0% { opacity: 0; transform: translateX(calc(var(--sa-distance, 120px) * -1)); } 55% { opacity: 1; transform: translateX(calc(var(--sa-distance, 120px) * 0.08)); } 75% { opacity: 1; transform: translateX(calc(var(--sa-distance, 120px) * -0.03)); } 100% { opacity: 1; transform: translateX(0); } } .sa-skid-stop-in { transform-origin: center; animation: sa-skid-stop-in var(--sa-duration, 0.55s) var(--sa-timing, cubic-bezier(0.16, 1, 0.3, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-skid-stop-in { 0% { opacity: 0; transform: translateX(calc(var(--sa-distance, 120px) * -1)) rotate(-8deg) scaleX(1.1); } 60% { opacity: 1; transform: translateX(calc(var(--sa-distance, 120px) * 0.05)) rotate(3deg) scaleX(0.95); } 80% { opacity: 1; transform: translateX(0) rotate(-1deg) scaleX(1.02); } 100% { opacity: 1; transform: translateX(0) rotate(0deg) scaleX(1); } } .sa-brake-in { transform-origin: center; animation: sa-brake-in var(--sa-duration, 0.55s) var(--sa-timing, cubic-bezier(0.16, 1, 0.3, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-brake-in { 0% { opacity: 0; transform: translateY(calc(var(--sa-distance, 100px) * -1)) scaleY(1.3); } 50% { opacity: 1; transform: translateY(calc(var(--sa-distance, 100px) * 0.04)) scaleY(0.8); } 70% { opacity: 1; transform: translateY(calc(var(--sa-distance, 100px) * -0.015)) scaleY(1.05); } 100% { opacity: 1; transform: translateY(0) scaleY(1); } } .sa-drift-in { transform-origin: center; animation: sa-drift-in var(--sa-duration, 0.6s) var(--sa-timing, cubic-bezier(0.16, 1, 0.3, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-drift-in { 0% { opacity: 0; transform: translate(calc(var(--sa-distance, 110px) * -1), calc(var(--sa-distance, 110px) * 0.4)) rotate(-20deg); } 60% { opacity: 1; transform: translate(calc(var(--sa-distance, 110px) * 0.05), calc(var(--sa-distance, 110px) * -0.03)) rotate(6deg); } 80% { opacity: 1; transform: translate(0, 0) rotate(-2deg); } 100% { opacity: 1; transform: translate(0, 0) rotate(0deg); } } .sa-screech-in { transform-origin: center; animation: sa-screech-in var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.16, 1, 0.3, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-screech-in { 0% { opacity: 0; transform: translateX(calc(var(--sa-distance, 140px) * -1)); filter: blur(4px); } 50% { opacity: 1; transform: translateX(calc(var(--sa-distance, 140px) * 0.1)); filter: blur(1px); } 70% { opacity: 1; transform: translateX(calc(var(--sa-distance, 140px) * -0.04)); filter: blur(0); } 100% { opacity: 1; transform: translateX(0); filter: blur(0); } } .sa-spring-in-diagonal { transform-origin: center; animation: sa-spring-in-diagonal var(--sa-duration, 0.7s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-spring-in-diagonal { 0% { opacity: 0; transform: translate(calc(var(--sa-distance, 70px) * -1), calc(var(--sa-distance, 70px) * -1)) scale(0.5); } 45% { opacity: 1; transform: translate(calc(var(--sa-distance, 70px) * 0.1), calc(var(--sa-distance, 70px) * 0.1)) scale(1.1); } 70% { opacity: 1; transform: translate(calc(var(--sa-distance, 70px) * -0.04), calc(var(--sa-distance, 70px) * -0.04)) scale(0.97); } 100% { opacity: 1; transform: translate(0, 0) scale(1); } } .sa-zigzag-in { transform-origin: center; animation: sa-zigzag-in var(--sa-duration, 0.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-zigzag-in { 0% { opacity: 0; transform: translateX(calc(var(--sa-distance, 100px) * -1)); } 20% { opacity: 1; transform: translateX(calc(var(--sa-distance, 100px) * -0.5)); } 40% { opacity: 1; transform: translateX(calc(var(--sa-distance, 100px) * -0.65)); } 60% { opacity: 1; transform: translateX(calc(var(--sa-distance, 100px) * -0.2)); } 80% { opacity: 1; transform: translateX(calc(var(--sa-distance, 100px) * -0.08)); } 100% { opacity: 1; transform: translateX(0); } } .sa-boing-in { transform-origin: center; animation: sa-boing-in var(--sa-duration, 0.8s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-boing-in { 0% { opacity: 0; transform: scale(0.3, 0.3); } 30% { opacity: 1; transform: scale(1.2, 0.7); } 45% { opacity: 1; transform: scale(0.75, 1.25); } 60% { opacity: 1; transform: scale(1.1, 0.85); } 75% { opacity: 1; transform: scale(0.92, 1.08); } 88% { opacity: 1; transform: scale(1.03, 0.97); } 100% { opacity: 1; transform: scale(1, 1); } } .sa-jack-in-the-box { transform-origin: center; animation: sa-jack-in-the-box var(--sa-duration, 0.6s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-jack-in-the-box { 0% { opacity: 0; transform: scale(0) rotate(-25deg); } 50% { opacity: 1; transform: scale(1.2) rotate(15deg); } 70% { opacity: 1; transform: scale(0.9) rotate(-8deg); } 85% { opacity: 1; transform: scale(1.05) rotate(4deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } } .sa-trampoline-in { transform-origin: bottom center; animation: sa-trampoline-in var(--sa-duration, 1.1s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-trampoline-in { 0% { opacity: 0; transform: translateY(calc(var(--sa-distance, 90px) * -1.4)) scaleY(1); } 18% { opacity: 1; transform: translateY(0) scaleY(0.7); } 30% { opacity: 1; transform: translateY(calc(var(--sa-distance, 90px) * -0.7)) scaleY(1.1); } 45% { opacity: 1; transform: translateY(0) scaleY(0.85); } 58% { opacity: 1; transform: translateY(calc(var(--sa-distance, 90px) * -0.35)) scaleY(1.05); } 72% { opacity: 1; transform: translateY(0) scaleY(0.92); } 85% { opacity: 1; transform: translateY(calc(var(--sa-distance, 90px) * -0.12)) scaleY(1.02); } 100% { opacity: 1; transform: translateY(0) scaleY(1); } } .sa-spiral-pop-in { transform-origin: center; animation: sa-spiral-pop-in var(--sa-duration, 0.7s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-spiral-pop-in { 0% { opacity: 0; transform: scale(0.2) rotate(-720deg); } 60% { opacity: 1; transform: scale(1.1) rotate(-45deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } } .sa-slam-in { transform-origin: center; animation: sa-slam-in var(--sa-duration, 0.55s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-slam-in { 0% { opacity: 0; transform: translateY(calc(var(--sa-distance, 150px) * -1)) scale(1.3); } 55% { opacity: 1; transform: translateY(0) scale(0.92); } 75% { opacity: 1; transform: translateY(calc(var(--sa-distance, 150px) * -0.02)) scale(1.03); } 100% { opacity: 1; transform: translateY(0) scale(1); } } .sa-power-slam-in { transform-origin: center; animation: sa-power-slam-in var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-power-slam-in { 0% { opacity: 0; transform: scale(2.4) rotate(0deg); } 50% { opacity: 1; transform: scale(0.9) rotate(-3deg); } 70% { opacity: 1; transform: scale(1.04) rotate(2deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } } .sa-stomp-in { transform-origin: bottom center; animation: sa-stomp-in var(--sa-duration, 0.6s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-stomp-in { 0% { opacity: 0; transform: translateY(calc(var(--sa-distance, 130px) * -1)) scaleY(1) scaleX(1); } 60% { opacity: 1; transform: translateY(0) scaleY(0.55) scaleX(1.3); } 80% { opacity: 1; transform: translateY(0) scaleY(1.08) scaleX(0.95); } 100% { opacity: 1; transform: translateY(0) scaleY(1) scaleX(1); } } .sa-crash-land-in { transform-origin: center; animation: sa-crash-land-in var(--sa-duration, 0.6s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-crash-land-in { 0% { opacity: 0; transform: translate(calc(var(--sa-distance, 120px) * -1), calc(var(--sa-distance, 120px) * -1)) rotate(-30deg) scale(1.15); } 55% { opacity: 1; transform: translate(calc(var(--sa-distance, 120px) * 0.03), calc(var(--sa-distance, 120px) * 0.03)) rotate(8deg) scale(0.95); } 75% { opacity: 1; transform: translate(0, 0) rotate(-4deg) scale(1.02); } 100% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); } } .sa-ricochet-in { transform-origin: center; animation: sa-ricochet-in var(--sa-duration, 0.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-ricochet-in { 0% { opacity: 0; transform: translateX(calc(var(--sa-distance, 90px) * -1)); } 25% { opacity: 1; transform: translateX(calc(var(--sa-distance, 90px) * 0.5)); } 45% { opacity: 1; transform: translateX(calc(var(--sa-distance, 90px) * -0.25)); } 65% { opacity: 1; transform: translateX(calc(var(--sa-distance, 90px) * 0.12)); } 85% { opacity: 1; transform: translateX(calc(var(--sa-distance, 90px) * -0.05)); } 100% { opacity: 1; transform: translateX(0); } } .sa-yo-yo-in { transform-origin: center; animation: sa-yo-yo-in var(--sa-duration, 0.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-yo-yo-in { 0% { opacity: 0; transform: translateY(calc(var(--sa-distance, 80px) * -1)); } 30% { opacity: 1; transform: translateY(calc(var(--sa-distance, 80px) * 0.4)); } 55% { opacity: 1; transform: translateY(calc(var(--sa-distance, 80px) * -0.25)); } 78% { opacity: 1; transform: translateY(calc(var(--sa-distance, 80px) * 0.1)); } 100% { opacity: 1; transform: translateY(0); } } .sa-accordion-in { transform-origin: bottom center; animation: sa-accordion-in var(--sa-duration, 0.7s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-accordion-in { 0% { opacity: 0; transform: scaleY(0.2) translateY(calc(var(--sa-distance, 30px) * -1)); } 25% { opacity: 1; transform: scaleY(1.15) translateY(0); } 45% { opacity: 1; transform: scaleY(0.85) translateY(0); } 65% { opacity: 1; transform: scaleY(1.08) translateY(0); } 82% { opacity: 1; transform: scaleY(0.96) translateY(0); } 100% { opacity: 1; transform: scaleY(1) translateY(0); } } .sa-wiggle-walk-in { transform-origin: center; animation: sa-wiggle-walk-in var(--sa-duration, 0.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-wiggle-walk-in { 0% { opacity: 0; transform: translateX(calc(var(--sa-distance, 90px) * -1)) rotate(0deg); } 20% { opacity: 1; transform: translateX(calc(var(--sa-distance, 90px) * -0.75)) rotate(-8deg); } 40% { opacity: 1; transform: translateX(calc(var(--sa-distance, 90px) * -0.5)) rotate(8deg); } 60% { opacity: 1; transform: translateX(calc(var(--sa-distance, 90px) * -0.28)) rotate(-6deg); } 80% { opacity: 1; transform: translateX(calc(var(--sa-distance, 90px) * -0.1)) rotate(3deg); } 100% { opacity: 1; transform: translateX(0) rotate(0deg); } } .sa-star-burst-in { transform-origin: center; animation: sa-star-burst-in var(--sa-duration, 0.45s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-star-burst-in { 0% { opacity: 0; transform: scale(0.1) rotate(-15deg); } 60% { opacity: 1; transform: scale(1.18) rotate(6deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } } .sa-flicker-hop-in { transform-origin: center; animation: sa-flicker-hop-in var(--sa-duration, 0.7s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-flicker-hop-in { 0% { opacity: 0; transform: translateY(calc(var(--sa-distance, 40px) * -1)); } 15% { opacity: 0.3; transform: translateY(calc(var(--sa-distance, 40px) * -0.8)); } 28% { opacity: 0.15; transform: translateY(calc(var(--sa-distance, 40px) * -0.6)); } 42% { opacity: 0.8; transform: translateY(calc(var(--sa-distance, 40px) * -0.2)); } 60% { opacity: 1; transform: translateY(calc(var(--sa-distance, 40px) * 0.08)); } 100% { opacity: 1; transform: translateY(0); } } .sa-torque-in { transform-origin: center; animation: sa-torque-in var(--sa-duration, 0.8s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-torque-in { 0% { opacity: 0; transform: rotate(-120deg); } 35% { opacity: 1; transform: rotate(15deg); } 55% { opacity: 1; transform: rotate(-8deg); } 72% { opacity: 1; transform: rotate(5deg); } 86% { opacity: 1; transform: rotate(-2deg); } 100% { opacity: 1; transform: rotate(0deg); } } .sa-pinball-in { transform-origin: center; animation: sa-pinball-in var(--sa-duration, 0.9s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-pinball-in { 0% { opacity: 0; transform: translate(calc(var(--sa-distance, 100px) * -1), calc(var(--sa-distance, 100px) * -1)) rotate(0deg); } 22% { opacity: 1; transform: translate(calc(var(--sa-distance, 100px) * -0.2), calc(var(--sa-distance, 100px) * -0.55)) rotate(10deg); } 44% { opacity: 1; transform: translate(calc(var(--sa-distance, 100px) * -0.5), calc(var(--sa-distance, 100px) * -0.1)) rotate(-8deg); } 66% { opacity: 1; transform: translate(calc(var(--sa-distance, 100px) * -0.1), calc(var(--sa-distance, 100px) * -0.25)) rotate(5deg); } 85% { opacity: 1; transform: translate(calc(var(--sa-distance, 100px) * -0.03), calc(var(--sa-distance, 100px) * -0.05)) rotate(-2deg); } 100% { opacity: 1; transform: translate(0, 0) rotate(0deg); } } .sa-elastic-drop-in { transform-origin: bottom center; animation: sa-elastic-drop-in var(--sa-duration, 1s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-elastic-drop-in { 0% { opacity: 0; transform: translateY(calc(var(--sa-distance, 110px) * -1)) scaleY(1.4) scaleX(0.85); } 40% { opacity: 1; transform: translateY(0) scaleY(0.65) scaleX(1.2); } 55% { opacity: 1; transform: translateY(calc(var(--sa-distance, 110px) * -0.3)) scaleY(1.1) scaleX(0.95); } 70% { opacity: 1; transform: translateY(0) scaleY(0.88) scaleX(1.05); } 85% { opacity: 1; transform: translateY(calc(var(--sa-distance, 110px) * -0.08)) scaleY(1.03) scaleX(0.99); } 100% { opacity: 1; transform: translateY(0) scaleY(1) scaleX(1); } } .sa-cannon-in { transform-origin: center; animation: sa-cannon-in var(--sa-duration, 0.45s) var(--sa-timing, cubic-bezier(0.16, 1, 0.3, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-cannon-in { 0% { opacity: 0; transform: translateX(calc(var(--sa-distance, 220px) * -1)); } 70% { opacity: 1; transform: translateX(calc(var(--sa-distance, 220px) * 0.04)); } 100% { opacity: 1; transform: translateX(0); } } .sa-bobblehead-in { transform-origin: center; animation: sa-bobblehead-in var(--sa-duration, 0.8s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-bobblehead-in { 0% { opacity: 0; transform: scale(0.6) rotate(0deg); } 20% { opacity: 1; transform: scale(1) rotate(6deg); } 35% { opacity: 1; transform: scale(1) rotate(-5deg); } 50% { opacity: 1; transform: scale(1) rotate(4deg); } 65% { opacity: 1; transform: scale(1) rotate(-3deg); } 78% { opacity: 1; transform: scale(1) rotate(2deg); } 90% { opacity: 1; transform: scale(1) rotate(-1deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } } .sa-kangaroo-in { transform-origin: bottom center; animation: sa-kangaroo-in var(--sa-duration, 0.7s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-kangaroo-in { 0% { opacity: 0; transform: translate(calc(var(--sa-distance, 100px) * -1), calc(var(--sa-distance, 100px) * 0.2)) rotate(-10deg); } 50% { opacity: 1; transform: translate(calc(var(--sa-distance, 100px) * -0.35), calc(var(--sa-distance, 100px) * -0.5)) rotate(8deg); } 78% { opacity: 1; transform: translate(calc(var(--sa-distance, 100px) * -0.06), 0) rotate(-3deg); } 100% { opacity: 1; transform: translate(0, 0) rotate(0deg); } } .sa-dizzy-in { transform-origin: center; animation: sa-dizzy-in var(--sa-duration, 0.8s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-dizzy-in { 0% { opacity: 0; transform: scale(0.3) rotate(0deg); } 50% { opacity: 1; transform: scale(1.05) rotate(720deg); } 70% { opacity: 1; transform: scale(0.98) rotate(700deg); } 85% { opacity: 1; transform: scale(1.02) rotate(715deg); } 100% { opacity: 1; transform: scale(1) rotate(720deg); } } .sa-pounce-in { transform-origin: center; animation: sa-pounce-in var(--sa-duration, 0.7s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-pounce-in { 0% { opacity: 0; transform: translateX(calc(var(--sa-distance, 90px) * -0.6)) scaleY(0.4) scaleX(1.3); } 25% { opacity: 1; transform: translateX(calc(var(--sa-distance, 90px) * -0.6)) scaleY(0.3) scaleX(1.4); } 55% { opacity: 1; transform: translateX(calc(var(--sa-distance, 90px) * 0.08)) scaleY(1.15) scaleX(0.9); } 80% { opacity: 1; transform: translateX(calc(var(--sa-distance, 90px) * -0.02)) scaleY(0.92) scaleX(1.05); } 100% { opacity: 1; transform: translateX(0) scaleY(1) scaleX(1); } } .sa-firecracker-in { transform-origin: center; animation: sa-firecracker-in var(--sa-duration, 0.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-firecracker-in { 0% { opacity: 0; transform: translate(calc(var(--sa-distance, 50px) * -1), 0); } 15% { opacity: 1; transform: translate(calc(var(--sa-distance, 50px) * 0.3), calc(var(--sa-distance, 50px) * -0.3)); } 30% { opacity: 1; transform: translate(calc(var(--sa-distance, 50px) * -0.2), calc(var(--sa-distance, 50px) * 0.25)); } 45% { opacity: 1; transform: translate(calc(var(--sa-distance, 50px) * 0.15), calc(var(--sa-distance, 50px) * -0.15)); } 60% { opacity: 1; transform: translate(calc(var(--sa-distance, 50px) * -0.08), calc(var(--sa-distance, 50px) * 0.08)); } 75% { opacity: 1; transform: translate(calc(var(--sa-distance, 50px) * 0.04), calc(var(--sa-distance, 50px) * -0.04)); } 100% { opacity: 1; transform: translate(0, 0); } } .sa-gummy-drop-in { transform-origin: bottom center; animation: sa-gummy-drop-in var(--sa-duration, 1s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-gummy-drop-in { 0% { opacity: 0; transform: translateY(calc(var(--sa-distance, 100px) * -1)) scaleY(1); } 45% { opacity: 1; transform: translateY(0) scaleY(0.35); } 60% { opacity: 1; transform: translateY(0) scaleY(1.25); } 75% { opacity: 1; transform: translateY(0) scaleY(0.85); } 90% { opacity: 1; transform: translateY(0) scaleY(1.06); } 100% { opacity: 1; transform: translateY(0) scaleY(1); } } .sa-drift-in-slow { animation: sa-drift-in-slow var(--sa-duration, 2s) var(--sa-timing, cubic-bezier(0.19, 1, 0.22, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-drift-in-slow { 0% { opacity: 0; transform: translateY(calc(var(--sa-distance, 24px) * 0.5)); } 55% { opacity: 0.25; } 100% { opacity: 1; transform: translateY(0); } } .sa-gentle-rise { animation: sa-gentle-rise var(--sa-duration, 0.6s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-gentle-rise { from { opacity: 0; transform: translateY(calc(var(--sa-distance, 24px) * 0.15)); } to { opacity: 1; transform: translateY(0); } } .sa-focus-in { animation: sa-focus-in var(--sa-duration, 0.8s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-focus-in { from { opacity: 0; filter: blur(10px); } to { opacity: 1; filter: blur(0); } } .sa-unhurried-reveal { animation: sa-unhurried-reveal var(--sa-duration, 2.2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-unhurried-reveal { from { opacity: 0; } to { opacity: 1; } } .sa-hush-in { animation: sa-hush-in var(--sa-duration, 0.9s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-hush-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } } .sa-drift-in-diagonal { animation: sa-drift-in-diagonal var(--sa-duration, 1s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-drift-in-diagonal { from { opacity: 0; transform: translate(calc(var(--sa-distance, 24px) * -0.5), calc(var(--sa-distance, 24px) * -0.5)); } to { opacity: 1; transform: translate(0, 0); } } .sa-exhale-in { animation: sa-exhale-in var(--sa-duration, 0.8s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-exhale-in { 0% { opacity: 0; transform: scale(0.97); } 60% { opacity: 1; transform: scale(1.015); } 100% { opacity: 1; transform: scale(1); } } .sa-soft-unveil { animation: sa-soft-unveil var(--sa-duration, 1.4s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-soft-unveil { from { opacity: 0; transform: translateY(calc(var(--sa-distance, 24px) * 0.15)); filter: blur(8px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } .sa-quiet-arrival { animation: sa-quiet-arrival var(--sa-duration, 0.7s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-quiet-arrival { from { opacity: 0; transform: translateY(calc(var(--sa-distance, 24px) * -0.3)); } to { opacity: 1; transform: translateY(0); } } .sa-drift-in-left-slow { animation: sa-drift-in-left-slow var(--sa-duration, 1.6s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-drift-in-left-slow { from { opacity: 0; transform: translateX(calc(var(--sa-distance, 24px) * -0.5)); } to { opacity: 1; transform: translateX(0); } } .sa-drift-in-right-slow { animation: sa-drift-in-right-slow var(--sa-duration, 1.6s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-drift-in-right-slow { from { opacity: 0; transform: translateX(calc(var(--sa-distance, 24px) * 0.5)); } to { opacity: 1; transform: translateX(0); } } .sa-settle-in { animation: sa-settle-in var(--sa-duration, 1s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-settle-in { from { opacity: 0; transform: translateY(calc(var(--sa-distance, 24px) * 0.3)) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .sa-veil-lift { animation: sa-veil-lift var(--sa-duration, 1.2s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-veil-lift { 0% { opacity: 0; filter: blur(14px); } 60% { filter: blur(0); } 100% { opacity: 1; } } .sa-glide-in { animation: sa-glide-in var(--sa-duration, 1.1s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-glide-in { from { opacity: 0; transform: translate(calc(var(--sa-distance, 24px) * 0.75), calc(var(--sa-distance, 24px) * 0.75)); } to { opacity: 1; transform: translate(0, 0); } } .sa-calm-reveal { animation: sa-calm-reveal var(--sa-duration, 1.1s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-calm-reveal { 0% { opacity: 0; } 30% { opacity: 0.08; } 100% { opacity: 1; } } .sa-whisper-in { animation: sa-whisper-in var(--sa-duration, 0.5s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-whisper-in { 0% { opacity: 0; transform: translateX(calc(var(--sa-distance, 24px) * -0.15)); } 70% { opacity: 1; transform: translateX(calc(var(--sa-distance, 24px) * 0.02)); } 100% { opacity: 1; transform: translateX(0); } } .sa-hush-glide-right { animation: sa-hush-glide-right var(--sa-duration, 0.5s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-hush-glide-right { 0% { opacity: 0; transform: translateX(calc(var(--sa-distance, 24px) * 0.15)); } 70% { opacity: 1; transform: translateX(calc(var(--sa-distance, 24px) * -0.02)); } 100% { opacity: 1; transform: translateX(0); } } .sa-muted-descent { animation: sa-muted-descent var(--sa-duration, 1.5s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-muted-descent { 0% { opacity: 0; transform: translateY(calc(var(--sa-distance, 24px) * -0.5)); } 75% { opacity: 1; transform: translateY(calc(var(--sa-distance, 24px) * 0.03)); } 100% { opacity: 1; transform: translateY(0); } } .sa-drift-in-upper-right { animation: sa-drift-in-upper-right var(--sa-duration, 0.9s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-drift-in-upper-right { from { opacity: 0; transform: translate(calc(var(--sa-distance, 24px) * -0.5), calc(var(--sa-distance, 24px) * 0.5)); } to { opacity: 1; transform: translate(0, 0); } } .sa-drift-in-lower-left { animation: sa-drift-in-lower-left var(--sa-duration, 1s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-drift-in-lower-left { from { opacity: 0; transform: translate(calc(var(--sa-distance, 24px) * 0.5), calc(var(--sa-distance, 24px) * -0.5)); } to { opacity: 1; transform: translate(0, 0); } } .sa-poise-in { animation: sa-poise-in var(--sa-duration, 0.7s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-poise-in { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: scale(1); } } .sa-linger-in { animation: sa-linger-in var(--sa-duration, 2.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-linger-in { 0% { opacity: 0; transform: scale(0.99); } 55% { opacity: 0.2; } 100% { opacity: 1; transform: scale(1); } } .sa-soften-in { animation: sa-soften-in var(--sa-duration, 0.6s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-soften-in { from { opacity: 0; transform: scale(0.99); filter: blur(5px); } to { opacity: 1; transform: scale(1); filter: blur(0); } } .sa-hazy-in { animation: sa-hazy-in var(--sa-duration, 1s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-hazy-in { 0% { opacity: 0; transform: scale(0.98); filter: blur(6px); } 80% { opacity: 1; transform: scale(1); } 100% { filter: blur(0); } } .sa-veiled-rise { animation: sa-veiled-rise var(--sa-duration, 1.2s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-veiled-rise { 0% { opacity: 0; transform: translateY(calc(var(--sa-distance, 24px) * 0.5)); filter: blur(8px); } 60% { filter: blur(0); } 100% { opacity: 1; transform: translateY(0); } } .sa-calm-descend { animation: sa-calm-descend var(--sa-duration, 1.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-calm-descend { 0% { opacity: 0; transform: translateY(calc(var(--sa-distance, 24px) * -0.3)); filter: blur(6px); } 50% { opacity: 1; } 100% { transform: translateY(0); filter: blur(0); } } .sa-soft-arrival { animation: sa-soft-arrival var(--sa-duration, 0.8s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-soft-arrival { from { opacity: 0; transform: translateY(calc(var(--sa-distance, 24px) * -0.5)); filter: blur(4px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } .sa-diagonal-hush { animation: sa-diagonal-hush var(--sa-duration, 1.1s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-diagonal-hush { from { opacity: 0; transform: translate(calc(var(--sa-distance, 24px) * 0.5), calc(var(--sa-distance, 24px) * 0.5)); filter: blur(6px); } to { opacity: 1; transform: translate(0, 0); filter: blur(0); } } .sa-reveal-through-haze { animation: sa-reveal-through-haze var(--sa-duration, 1.6s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-reveal-through-haze { from { opacity: 0; transform: translate(calc(var(--sa-distance, 24px) * -0.75), calc(var(--sa-distance, 24px) * -0.75)); filter: blur(12px); } to { opacity: 1; transform: translate(0, 0); filter: blur(0); } } .sa-float-up-in { animation: sa-float-up-in var(--sa-duration, 0.9s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-float-up-in { 0% { opacity: 0; transform: translateY(calc(var(--sa-distance, 24px) * 0.15)) scale(0.99); } 65% { opacity: 1; transform: translateY(calc(var(--sa-distance, 24px) * -0.02)) scale(1.008); } 100% { opacity: 1; transform: translateY(0) scale(1); } } .sa-breathe-in-view { animation: sa-breathe-in-view var(--sa-duration, 1.3s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-breathe-in-view { from { opacity: 0; transform: translateY(calc(var(--sa-distance, 24px) * -0.5)) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .sa-tranquil-rise { animation: sa-tranquil-rise var(--sa-duration, 1.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-tranquil-rise { 0% { opacity: 0; transform: translateY(calc(var(--sa-distance, 24px) * -0.3)) scale(0.98); } 55% { opacity: 0.2; } 100% { opacity: 1; transform: translateY(0) scale(1); } } .sa-gentle-glide-left { animation: sa-gentle-glide-left var(--sa-duration, 1.4s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-gentle-glide-left { from { opacity: 0; transform: translateX(calc(var(--sa-distance, 24px) * -0.5)) scale(0.98); } to { opacity: 1; transform: translateX(0) scale(1); } } .sa-gentle-glide-right { animation: sa-gentle-glide-right var(--sa-duration, 1.4s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-gentle-glide-right { from { opacity: 0; transform: translateX(calc(var(--sa-distance, 24px) * 0.5)) scale(0.98); } to { opacity: 1; transform: translateX(0) scale(1); } } .sa-poised-arrival { animation: sa-poised-arrival var(--sa-duration, 0.7s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-poised-arrival { from { opacity: 0; transform: translateX(calc(var(--sa-distance, 24px) * 0.15)) scale(1.02); } to { opacity: 1; transform: translateX(0) scale(1); } } .sa-poised-hush { animation: sa-poised-hush var(--sa-duration, 1s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-poised-hush { from { opacity: 0; transform: translate(calc(var(--sa-distance, 24px) * 0.3), calc(var(--sa-distance, 24px) * -0.3)) scale(0.98); } to { opacity: 1; transform: translate(0, 0) scale(1); } } .sa-dissolve-into-view { animation: sa-dissolve-into-view var(--sa-duration, 1s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-dissolve-into-view { 0% { opacity: 0; filter: blur(10px); } 50% { opacity: 1; } 100% { filter: blur(0); } } .sa-hazed-arrival { animation: sa-hazed-arrival var(--sa-duration, 1.3s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-hazed-arrival { 0% { opacity: 0; transform: scale(0.96); filter: blur(9px); } 55% { opacity: 0.15; } 100% { opacity: 1; transform: scale(1); filter: blur(0); } } .sa-graceful-ascent { animation: sa-graceful-ascent var(--sa-duration, 1.2s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-graceful-ascent { 0% { opacity: 0; transform: translateY(calc(var(--sa-distance, 24px) * 0.75)); } 70% { opacity: 1; transform: translateY(calc(var(--sa-distance, 24px) * -0.04)); } 100% { opacity: 1; transform: translateY(0); } } .sa-patient-fade { animation: sa-patient-fade var(--sa-duration, 1.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-patient-fade { 0% { opacity: 0; transform: translateY(calc(var(--sa-distance, 24px) * -0.5)); } 55% { opacity: 0.15; } 100% { opacity: 1; transform: translateY(0); } } .sa-muted-rise { animation: sa-muted-rise var(--sa-duration, 1.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-muted-rise { 0% { opacity: 0; transform: translateY(calc(var(--sa-distance, 24px) * 0.3)); filter: blur(5px); } 55% { opacity: 0.15; } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } } .sa-soft-settle { animation: sa-soft-settle var(--sa-duration, 1.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-soft-settle { 0% { opacity: 0; transform: translateY(calc(var(--sa-distance, 24px) * 0.3)) scale(0.98); } 55% { opacity: 0.2; } 100% { opacity: 1; transform: translateY(0) scale(1); } } .sa-subtle-exhale { animation: sa-subtle-exhale var(--sa-duration, 0.9s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-subtle-exhale { 0% { opacity: 0; transform: translateY(calc(var(--sa-distance, 24px) * -0.5)) scale(0.97); } 65% { opacity: 1; transform: translateY(calc(var(--sa-distance, 24px) * 0.02)) scale(1.01); } 100% { opacity: 1; transform: translateY(0) scale(1); } } .sa-long-exhale { animation: sa-long-exhale var(--sa-duration, 2.2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-long-exhale { 0% { opacity: 0; transform: scale(0.96); filter: blur(10px); } 70% { opacity: 1; transform: scale(1.02); filter: blur(0); } 100% { opacity: 1; transform: scale(1); } } .sa-drift-in-and-hover { animation: sa-drift-in-and-hover var(--sa-duration, 1s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-drift-in-and-hover { 0% { opacity: 0; transform: translate(calc(var(--sa-distance, 24px) * -0.3), calc(var(--sa-distance, 24px) * -0.3)); } 70% { opacity: 1; transform: translate(calc(var(--sa-distance, 24px) * 0.02), calc(var(--sa-distance, 24px) * 0.02)); } 100% { opacity: 1; transform: translate(0, 0); } } .sa-graceful-diagonal-rise { animation: sa-graceful-diagonal-rise var(--sa-duration, 1.7s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-graceful-diagonal-rise { 0% { opacity: 0; transform: translate(calc(var(--sa-distance, 24px) * 0.3), calc(var(--sa-distance, 24px) * 0.3)); } 55% { opacity: 0.15; } 100% { opacity: 1; transform: translate(0, 0); } } .sa-quiet-corner-arrival { animation: sa-quiet-corner-arrival var(--sa-duration, 1.1s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-quiet-corner-arrival { from { opacity: 0; transform: translate(calc(var(--sa-distance, 24px) * -0.3), calc(var(--sa-distance, 24px) * 0.3)) scale(0.98); } to { opacity: 1; transform: translate(0, 0) scale(1); } } .sa-hush-diagonal-settle { animation: sa-hush-diagonal-settle var(--sa-duration, 1.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-hush-diagonal-settle { 0% { opacity: 0; transform: translate(calc(var(--sa-distance, 24px) * -0.3), calc(var(--sa-distance, 24px) * -0.3)) scale(0.97); } 55% { opacity: 0.15; } 100% { opacity: 1; transform: translate(0, 0) scale(1); } } .sa-refined-unveil { animation: sa-refined-unveil var(--sa-duration, 1.3s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-refined-unveil { from { opacity: 0; transform: translateY(calc(var(--sa-distance, 24px) * 0.3)) scale(0.98); filter: blur(8px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } .sa-editorial-reveal { animation: sa-editorial-reveal var(--sa-duration, 1.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-editorial-reveal { 0% { opacity: 0; transform: translateY(calc(var(--sa-distance, 24px) * -0.3)) scale(0.97); filter: blur(6px); } 55% { opacity: 0.15; } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } /* ================================================================ entrance An element arriving. Runs once and holds its finished state. Every rule's start state lives in its own `@keyframes` (as `from` or `0%`), never on the class selector, with `animation-fill-mode: both`. That is what lets the generic reduced-motion rule in base.css disable these safely: with no animation, the element falls back to its own plain, unset opacity/transform, not to a hidden or offset start state. */ .sa-fade-in { animation: sa-fade-in var(--sa-duration, 0.4s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-fade-in { from { opacity: 0; } to { opacity: 1; } } .sa-slide-in-up { animation: sa-slide-in-up var(--sa-duration, 0.45s) var(--sa-timing, cubic-bezier(0.16, 1, 0.3, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-slide-in-up { from { opacity: 0; transform: translateY(var(--sa-distance)); } to { opacity: 1; transform: translateY(0); } } .sa-slide-in-down { animation: sa-slide-in-down var(--sa-duration, 0.45s) var(--sa-timing, cubic-bezier(0.16, 1, 0.3, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-slide-in-down { from { opacity: 0; transform: translateY(calc(var(--sa-distance) * -1)); } to { opacity: 1; transform: translateY(0); } } .sa-slide-in-left { animation: sa-slide-in-left var(--sa-duration, 0.45s) var(--sa-timing, cubic-bezier(0.16, 1, 0.3, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-slide-in-left { from { opacity: 0; transform: translateX(calc(var(--sa-distance) * -1)); } to { opacity: 1; transform: translateX(0); } } .sa-slide-in-right { animation: sa-slide-in-right var(--sa-duration, 0.45s) var(--sa-timing, cubic-bezier(0.16, 1, 0.3, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-slide-in-right { from { opacity: 0; transform: translateX(var(--sa-distance)); } to { opacity: 1; transform: translateX(0); } } .sa-scale-in { transform-origin: center; animation: sa-scale-in var(--sa-duration, 0.35s) var(--sa-timing, cubic-bezier(0.16, 1, 0.3, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-scale-in { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } } .sa-pop-in { transform-origin: center; animation: sa-pop-in var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) both; } @keyframes sa-pop-in { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } } .sa-slide-out-up-left { animation: sa-slide-out-up-left var(--sa-duration, 0.4s) var(--sa-timing, cubic-bezier(0.7, 0, 0.84, 0)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-slide-out-up-left { to { opacity: 0; transform: translate(calc(var(--sa-distance) * -1), calc(var(--sa-distance) * -1)); } } .sa-slide-out-up-right { animation: sa-slide-out-up-right var(--sa-duration, 0.4s) var(--sa-timing, cubic-bezier(0.7, 0, 0.84, 0)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-slide-out-up-right { to { opacity: 0; transform: translate(var(--sa-distance), calc(var(--sa-distance) * -1)); } } .sa-slide-out-down-left { animation: sa-slide-out-down-left var(--sa-duration, 0.4s) var(--sa-timing, cubic-bezier(0.7, 0, 0.84, 0)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-slide-out-down-left { to { opacity: 0; transform: translate(calc(var(--sa-distance) * -1), var(--sa-distance)); } } .sa-slide-out-down-right { animation: sa-slide-out-down-right var(--sa-duration, 0.4s) var(--sa-timing, cubic-bezier(0.7, 0, 0.84, 0)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-slide-out-down-right { to { opacity: 0; transform: translate(var(--sa-distance), var(--sa-distance)); } } .sa-corner-tuck-top-right { animation: sa-corner-tuck-top-right var(--sa-duration, 0.45s) var(--sa-timing, cubic-bezier(0.55, 0, 1, 0.45)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-corner-tuck-top-right { to { opacity: 0; transform: translate(calc(var(--sa-distance) * 1.4), calc(var(--sa-distance) * -1.4)) scale(0.35); } } .sa-corner-tuck-top-left { animation: sa-corner-tuck-top-left var(--sa-duration, 0.45s) var(--sa-timing, cubic-bezier(0.55, 0, 1, 0.45)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-corner-tuck-top-left { to { opacity: 0; transform: translate(calc(var(--sa-distance) * -1.4), calc(var(--sa-distance) * -1.4)) scale(0.35); } } .sa-corner-tuck-bottom-right { animation: sa-corner-tuck-bottom-right var(--sa-duration, 0.45s) var(--sa-timing, cubic-bezier(0.55, 0, 1, 0.45)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-corner-tuck-bottom-right { to { opacity: 0; transform: translate(calc(var(--sa-distance) * 1.4), calc(var(--sa-distance) * 1.4)) scale(0.35); } } .sa-corner-tuck-bottom-left { animation: sa-corner-tuck-bottom-left var(--sa-duration, 0.45s) var(--sa-timing, cubic-bezier(0.55, 0, 1, 0.45)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-corner-tuck-bottom-left { to { opacity: 0; transform: translate(calc(var(--sa-distance) * -1.4), calc(var(--sa-distance) * 1.4)) scale(0.35); } } .sa-arc-out-up-right { animation: sa-arc-out-up-right var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.45, 0, 0.85, 0.25)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-arc-out-up-right { 30% { opacity: 1; transform: translate(calc(var(--sa-distance) * 0.9), calc(var(--sa-distance) * -0.2)); } 100% { opacity: 0; transform: translate(calc(var(--sa-distance) * 1.6), calc(var(--sa-distance) * -1.8)); } } .sa-arc-out-up-left { animation: sa-arc-out-up-left var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.45, 0, 0.85, 0.25)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-arc-out-up-left { 30% { opacity: 1; transform: translate(calc(var(--sa-distance) * -0.9), calc(var(--sa-distance) * -0.2)); } 100% { opacity: 0; transform: translate(calc(var(--sa-distance) * -1.6), calc(var(--sa-distance) * -1.8)); } } .sa-arc-out-down-right { animation: sa-arc-out-down-right var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.45, 0, 0.85, 0.25)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-arc-out-down-right { 30% { opacity: 1; transform: translate(calc(var(--sa-distance) * 0.9), calc(var(--sa-distance) * 0.2)); } 100% { opacity: 0; transform: translate(calc(var(--sa-distance) * 1.6), calc(var(--sa-distance) * 1.8)); } } .sa-arc-out-down-left { animation: sa-arc-out-down-left var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.45, 0, 0.85, 0.25)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-arc-out-down-left { 30% { opacity: 1; transform: translate(calc(var(--sa-distance) * -0.9), calc(var(--sa-distance) * 0.2)); } 100% { opacity: 0; transform: translate(calc(var(--sa-distance) * -1.6), calc(var(--sa-distance) * 1.8)); } } .sa-swoop-out-right { animation: sa-swoop-out-right var(--sa-duration, 0.55s) var(--sa-timing, cubic-bezier(0.45, 0, 0.85, 0.25)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-swoop-out-right { 40% { opacity: 1; transform: translate(calc(var(--sa-distance) * 0.7), calc(var(--sa-distance) * 0.3)); } 100% { opacity: 0; transform: translate(calc(var(--sa-distance) * 2.2), calc(var(--sa-distance) * -0.4)); } } .sa-swoop-out-left { animation: sa-swoop-out-left var(--sa-duration, 0.55s) var(--sa-timing, cubic-bezier(0.45, 0, 0.85, 0.25)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-swoop-out-left { 40% { opacity: 1; transform: translate(calc(var(--sa-distance) * -0.7), calc(var(--sa-distance) * 0.3)); } 100% { opacity: 0; transform: translate(calc(var(--sa-distance) * -2.2), calc(var(--sa-distance) * -0.4)); } } .sa-loop-out-up { animation: sa-loop-out-up var(--sa-duration, 0.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-loop-out-up { 20% { opacity: 1; transform: translate(calc(var(--sa-distance) * 0.5), calc(var(--sa-distance) * -0.2)); } 45% { opacity: 1; transform: translate(calc(var(--sa-distance) * -0.3), calc(var(--sa-distance) * -0.6)); } 100% { opacity: 0; transform: translate(0, calc(var(--sa-distance) * -2)); } } .sa-loop-out-down { animation: sa-loop-out-down var(--sa-duration, 0.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-loop-out-down { 20% { opacity: 1; transform: translate(calc(var(--sa-distance) * -0.5), calc(var(--sa-distance) * 0.2)); } 45% { opacity: 1; transform: translate(calc(var(--sa-distance) * 0.3), calc(var(--sa-distance) * 0.6)); } 100% { opacity: 0; transform: translate(0, calc(var(--sa-distance) * 2)); } } .sa-spiral-out-clockwise { animation: sa-spiral-out-clockwise var(--sa-duration, 0.55s) var(--sa-timing, cubic-bezier(0.55, 0, 0.85, 0.25)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-spiral-out-clockwise { 40% { opacity: 1; transform: translate(calc(var(--sa-distance) * 0.3), calc(var(--sa-distance) * -0.5)) rotate(90deg) scale(0.7); } 100% { opacity: 0; transform: translate(calc(var(--sa-distance) * 1.2), calc(var(--sa-distance) * -0.6)) rotate(220deg) scale(0.2); } } .sa-spiral-out-counter { animation: sa-spiral-out-counter var(--sa-duration, 0.55s) var(--sa-timing, cubic-bezier(0.55, 0, 0.85, 0.25)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-spiral-out-counter { 40% { opacity: 1; transform: translate(calc(var(--sa-distance) * -0.3), calc(var(--sa-distance) * -0.5)) rotate(-90deg) scale(0.7); } 100% { opacity: 0; transform: translate(calc(var(--sa-distance) * -1.2), calc(var(--sa-distance) * -0.6)) rotate(-220deg) scale(0.2); } } .sa-zigzag-out-up { animation: sa-zigzag-out-up var(--sa-duration, 0.6s) var(--sa-timing, ease-in) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-zigzag-out-up { 20% { opacity: 1; transform: translate(calc(var(--sa-distance) * 0.5), calc(var(--sa-distance) * -0.4)); } 40% { opacity: 1; transform: translate(calc(var(--sa-distance) * -0.5), calc(var(--sa-distance) * -0.8)); } 60% { opacity: 1; transform: translate(calc(var(--sa-distance) * 0.4), calc(var(--sa-distance) * -1.3)); } 100% { opacity: 0; transform: translate(0, calc(var(--sa-distance) * -2.2)); } } .sa-zigzag-out-down { animation: sa-zigzag-out-down var(--sa-duration, 0.6s) var(--sa-timing, ease-in) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-zigzag-out-down { 20% { opacity: 1; transform: translate(calc(var(--sa-distance) * -0.5), calc(var(--sa-distance) * 0.4)); } 40% { opacity: 1; transform: translate(calc(var(--sa-distance) * 0.5), calc(var(--sa-distance) * 0.8)); } 60% { opacity: 1; transform: translate(calc(var(--sa-distance) * -0.4), calc(var(--sa-distance) * 1.3)); } 100% { opacity: 0; transform: translate(0, calc(var(--sa-distance) * 2.2)); } } .sa-yank-out-left { animation: sa-yank-out-left var(--sa-duration, 0.4s) var(--sa-timing, cubic-bezier(0.7, 0, 0.84, 0)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-yank-out-left { 15% { opacity: 1; transform: translateX(calc(var(--sa-distance) * 0.15)); } 100% { opacity: 0; transform: translateX(calc(var(--sa-distance) * -2.5)); } } .sa-yank-out-right { animation: sa-yank-out-right var(--sa-duration, 0.4s) var(--sa-timing, cubic-bezier(0.7, 0, 0.84, 0)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-yank-out-right { 15% { opacity: 1; transform: translateX(calc(var(--sa-distance) * -0.15)); } 100% { opacity: 0; transform: translateX(calc(var(--sa-distance) * 2.5)); } } .sa-yank-out-up { animation: sa-yank-out-up var(--sa-duration, 0.4s) var(--sa-timing, cubic-bezier(0.7, 0, 0.84, 0)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-yank-out-up { 15% { opacity: 1; transform: translateY(calc(var(--sa-distance) * 0.15)); } 100% { opacity: 0; transform: translateY(calc(var(--sa-distance) * -2.5)); } } .sa-yank-out-down { animation: sa-yank-out-down var(--sa-duration, 0.4s) var(--sa-timing, cubic-bezier(0.7, 0, 0.84, 0)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-yank-out-down { 15% { opacity: 1; transform: translateY(calc(var(--sa-distance) * -0.15)); } 100% { opacity: 0; transform: translateY(calc(var(--sa-distance) * 2.5)); } } .sa-flick-out-up { animation: sa-flick-out-up var(--sa-duration, 0.35s) var(--sa-timing, cubic-bezier(0.7, 0, 0.84, 0)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-flick-out-up { 10% { opacity: 1; transform: translateY(calc(var(--sa-distance) * 0.08)); } 100% { opacity: 0; transform: translateY(calc(var(--sa-distance) * -1.8)) rotate(-8deg); } } .sa-flick-out-down { animation: sa-flick-out-down var(--sa-duration, 0.35s) var(--sa-timing, cubic-bezier(0.7, 0, 0.84, 0)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-flick-out-down { 10% { opacity: 1; transform: translateY(calc(var(--sa-distance) * -0.08)); } 100% { opacity: 0; transform: translateY(calc(var(--sa-distance) * 1.8)) rotate(8deg); } } .sa-fling-out-up { animation: sa-fling-out-up var(--sa-duration, 0.6s) var(--sa-timing, cubic-bezier(0.6, 0, 0.9, 0.1)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-fling-out-up { 25% { opacity: 1; transform: translateY(calc(var(--sa-distance) * 0.05)); } 45% { opacity: 1; transform: translateY(calc(var(--sa-distance) * 0.05)); } 100% { opacity: 0; transform: translateY(calc(var(--sa-distance) * -3)); } } .sa-fling-out-right { animation: sa-fling-out-right var(--sa-duration, 0.6s) var(--sa-timing, cubic-bezier(0.6, 0, 0.9, 0.1)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-fling-out-right { 25% { opacity: 1; transform: translateX(calc(var(--sa-distance) * 0.05)); } 45% { opacity: 1; transform: translateX(calc(var(--sa-distance) * 0.05)); } 100% { opacity: 0; transform: translateX(calc(var(--sa-distance) * 3)); } } .sa-bounce-out-up { animation: sa-bounce-out-up var(--sa-duration, 0.55s) var(--sa-timing, ease-in) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-bounce-out-up { 20% { opacity: 1; transform: translateY(calc(var(--sa-distance) * 0.2)); } 40% { opacity: 1; transform: translateY(calc(var(--sa-distance) * -0.3)); } 55% { opacity: 1; transform: translateY(calc(var(--sa-distance) * 0.05)); } 100% { opacity: 0; transform: translateY(calc(var(--sa-distance) * -2)); } } .sa-bounce-out-down { animation: sa-bounce-out-down var(--sa-duration, 0.55s) var(--sa-timing, ease-in) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-bounce-out-down { 20% { opacity: 1; transform: translateY(calc(var(--sa-distance) * -0.2)); } 40% { opacity: 1; transform: translateY(calc(var(--sa-distance) * 0.3)); } 55% { opacity: 1; transform: translateY(calc(var(--sa-distance) * -0.05)); } 100% { opacity: 0; transform: translateY(calc(var(--sa-distance) * 2)); } } .sa-skid-out-right { animation: sa-skid-out-right var(--sa-duration, 0.4s) var(--sa-timing, cubic-bezier(0.7, 0, 0.84, 0)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-skid-out-right { 30% { opacity: 1; transform: translateX(calc(var(--sa-distance) * 0.5)) rotate(2deg); } 100% { opacity: 0; transform: translateX(calc(var(--sa-distance) * 2)) rotate(6deg); } } .sa-skid-out-left { animation: sa-skid-out-left var(--sa-duration, 0.4s) var(--sa-timing, cubic-bezier(0.7, 0, 0.84, 0)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-skid-out-left { 30% { opacity: 1; transform: translateX(calc(var(--sa-distance) * -0.5)) rotate(-2deg); } 100% { opacity: 0; transform: translateX(calc(var(--sa-distance) * -2)) rotate(-6deg); } } .sa-toss-out-up-right { animation: sa-toss-out-up-right var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.55, 0, 0.85, 0.25)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-toss-out-up-right { 30% { opacity: 1; transform: translate(calc(var(--sa-distance) * 0.3), calc(var(--sa-distance) * -0.4)) rotate(8deg); } 100% { opacity: 0; transform: translate(calc(var(--sa-distance) * 1.8), calc(var(--sa-distance) * -1.8)) rotate(35deg); } } .sa-toss-out-up-left { animation: sa-toss-out-up-left var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.55, 0, 0.85, 0.25)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-toss-out-up-left { 30% { opacity: 1; transform: translate(calc(var(--sa-distance) * -0.3), calc(var(--sa-distance) * -0.4)) rotate(-8deg); } 100% { opacity: 0; transform: translate(calc(var(--sa-distance) * -1.8), calc(var(--sa-distance) * -1.8)) rotate(-35deg); } } .sa-toss-out-down-right { animation: sa-toss-out-down-right var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.55, 0, 0.85, 0.25)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-toss-out-down-right { 30% { opacity: 1; transform: translate(calc(var(--sa-distance) * 0.3), calc(var(--sa-distance) * 0.4)) rotate(8deg); } 100% { opacity: 0; transform: translate(calc(var(--sa-distance) * 1.8), calc(var(--sa-distance) * 1.8)) rotate(35deg); } } .sa-toss-out-down-left { animation: sa-toss-out-down-left var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.55, 0, 0.85, 0.25)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-toss-out-down-left { 30% { opacity: 1; transform: translate(calc(var(--sa-distance) * -0.3), calc(var(--sa-distance) * 0.4)) rotate(-8deg); } 100% { opacity: 0; transform: translate(calc(var(--sa-distance) * -1.8), calc(var(--sa-distance) * 1.8)) rotate(-35deg); } } .sa-long-haul-exit-up { animation: sa-long-haul-exit-up var(--sa-duration, 0.6s) var(--sa-timing, cubic-bezier(0.55, 0.06, 0.68, 0.19)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-long-haul-exit-up { to { opacity: 0; transform: translateY(calc(var(--sa-distance) * -3)); } } .sa-long-haul-exit-down { animation: sa-long-haul-exit-down var(--sa-duration, 0.6s) var(--sa-timing, cubic-bezier(0.55, 0.06, 0.68, 0.19)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-long-haul-exit-down { to { opacity: 0; transform: translateY(calc(var(--sa-distance) * 3)); } } .sa-sprint-out-left { animation: sa-sprint-out-left var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.05, 0.9, 0.1, 1)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-sprint-out-left { to { opacity: 0; transform: translateX(calc(var(--sa-distance) * -2)); } } .sa-sprint-out-right { animation: sa-sprint-out-right var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.05, 0.9, 0.1, 1)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-sprint-out-right { to { opacity: 0; transform: translateX(calc(var(--sa-distance) * 2)); } } .sa-creep-out-up { animation: sa-creep-out-up var(--sa-duration, 0.55s) var(--sa-timing, cubic-bezier(0.8, 0, 1, 1)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-creep-out-up { to { opacity: 0; transform: translateY(calc(var(--sa-distance) * -1.5)); } } .sa-creep-out-down { animation: sa-creep-out-down var(--sa-duration, 0.55s) var(--sa-timing, cubic-bezier(0.8, 0, 1, 1)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-creep-out-down { to { opacity: 0; transform: translateY(calc(var(--sa-distance) * 1.5)); } } .sa-dive-out-down-right { animation: sa-dive-out-down-right var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.55, 0, 0.85, 0.25)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-dive-out-down-right { 30% { opacity: 1; transform: translate(calc(var(--sa-distance) * 0.3), calc(var(--sa-distance) * 0.5)) rotate(4deg); } 100% { opacity: 0; transform: translate(calc(var(--sa-distance) * 2), calc(var(--sa-distance) * 2.4)) rotate(15deg); } } .sa-dive-out-down-left { animation: sa-dive-out-down-left var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.55, 0, 0.85, 0.25)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-dive-out-down-left { 30% { opacity: 1; transform: translate(calc(var(--sa-distance) * -0.3), calc(var(--sa-distance) * 0.5)) rotate(-4deg); } 100% { opacity: 0; transform: translate(calc(var(--sa-distance) * -2), calc(var(--sa-distance) * 2.4)) rotate(-15deg); } } .sa-climb-out-up-left { animation: sa-climb-out-up-left var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.7, 0, 0.84, 0)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-climb-out-up-left { to { opacity: 0; transform: translate(calc(var(--sa-distance) * -1.6), calc(var(--sa-distance) * -1.6)); } } .sa-climb-out-up-right { animation: sa-climb-out-up-right var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.7, 0, 0.84, 0)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-climb-out-up-right { to { opacity: 0; transform: translate(calc(var(--sa-distance) * 1.6), calc(var(--sa-distance) * -1.6)); } } .sa-curl-away-up { animation: sa-curl-away-up var(--sa-duration, 0.6s) var(--sa-timing, ease-in) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-curl-away-up { 40% { opacity: 1; filter: blur(0px); transform: translate(calc(var(--sa-distance) * 0.6), calc(var(--sa-distance) * -0.5)) rotate(20deg); } 100% { opacity: 0; filter: blur(3px); transform: translate(calc(var(--sa-distance) * -0.4), calc(var(--sa-distance) * -2)) rotate(-25deg); } } .sa-curl-away-down { animation: sa-curl-away-down var(--sa-duration, 0.6s) var(--sa-timing, ease-in) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-curl-away-down { 40% { opacity: 1; filter: blur(0px); transform: translate(calc(var(--sa-distance) * -0.6), calc(var(--sa-distance) * 0.5)) rotate(-20deg); } 100% { opacity: 0; filter: blur(3px); transform: translate(calc(var(--sa-distance) * 0.4), calc(var(--sa-distance) * 2)) rotate(25deg); } } .sa-peel-out-right { animation: sa-peel-out-right var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.55, 0, 0.85, 0.25)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-peel-out-right { 25% { opacity: 1; transform: translate(0, 0) rotate(3deg) scale(1.02); } 100% { opacity: 0; transform: translate(calc(var(--sa-distance) * 2.2), calc(var(--sa-distance) * 0.6)) rotate(25deg) scale(0.85); } } .sa-peel-out-left { animation: sa-peel-out-left var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.55, 0, 0.85, 0.25)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-peel-out-left { 25% { opacity: 1; transform: translate(0, 0) rotate(-3deg) scale(1.02); } 100% { opacity: 0; transform: translate(calc(var(--sa-distance) * -2.2), calc(var(--sa-distance) * 0.6)) rotate(-25deg) scale(0.85); } } .sa-collapse-down { animation: sa-collapse-down var(--sa-duration, 0.4s) var(--sa-timing, ease-in) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: top; } @keyframes sa-collapse-down { to { opacity: 0; transform: scaleY(0); } } .sa-collapse-up { animation: sa-collapse-up var(--sa-duration, 0.4s) var(--sa-timing, ease-in) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: bottom; } @keyframes sa-collapse-up { to { opacity: 0; transform: scaleY(0); } } .sa-collapse-vertical-fade { animation: sa-collapse-vertical-fade var(--sa-duration, 0.45s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-collapse-vertical-fade { to { opacity: 0; transform: scaleY(0); } } .sa-drawer-close { animation: sa-drawer-close var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.55, 0, 1, 0.45)) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: top; } @keyframes sa-drawer-close { 60% { opacity: 1; transform: scaleY(0.3); } to { opacity: 0; transform: scaleY(0); } } .sa-accordion-close { animation: sa-accordion-close var(--sa-duration, 0.6s) var(--sa-timing, steps(4, end)) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: top; } @keyframes sa-accordion-close { 25% { opacity: 1; transform: scaleY(0.75); } 50% { opacity: 0.9; transform: scaleY(0.5); } 75% { opacity: 0.6; transform: scaleY(0.25); } to { opacity: 0; transform: scaleY(0); } } .sa-squash-flat { animation: sa-squash-flat var(--sa-duration, 0.35s) var(--sa-timing, ease-in) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-squash-flat { to { opacity: 0; transform: scale(1.08, 0.05); } } .sa-press-flatten { animation: sa-press-flatten var(--sa-duration, 0.45s) var(--sa-timing, ease-in) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: bottom; } @keyframes sa-press-flatten { 70% { opacity: 1; transform: scale(1.05, 0.4); } to { opacity: 0; transform: scale(1.1, 0.02) translateY(2%); } } .sa-collapse-left { animation: sa-collapse-left var(--sa-duration, 0.4s) var(--sa-timing, ease-in) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: left; } @keyframes sa-collapse-left { to { opacity: 0; transform: scaleX(0); } } .sa-collapse-right { animation: sa-collapse-right var(--sa-duration, 0.4s) var(--sa-timing, ease-in) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: right; } @keyframes sa-collapse-right { to { opacity: 0; transform: scaleX(0); } } .sa-collapse-horizontal-fade { animation: sa-collapse-horizontal-fade var(--sa-duration, 0.45s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-collapse-horizontal-fade { to { opacity: 0; transform: scaleX(0); } } .sa-pinch-shut { animation: sa-pinch-shut var(--sa-duration, 0.4s) var(--sa-timing, ease-in) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-pinch-shut { 50% { opacity: 1; transform: scale(0.4, 1.15); } to { opacity: 0; transform: scale(0, 0.9); } } .sa-curtain-close { animation: sa-curtain-close var(--sa-duration, 0.6s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: right; } @keyframes sa-curtain-close { 40% { opacity: 1; transform: scaleX(0.6); } 80% { opacity: 0.6; transform: scaleX(0.15); } to { opacity: 0; transform: scaleX(0); } } .sa-deflate { animation: sa-deflate var(--sa-duration, 0.55s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-deflate { 30% { opacity: 1; transform: scale(1.05, 0.95); } 60% { opacity: 0.8; transform: scale(0.85, 1.05); } to { opacity: 0; transform: scale(0.3, 0.25); } } .sa-deflate-wobble { animation: sa-deflate-wobble var(--sa-duration, 0.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-deflate-wobble { 25% { opacity: 1; transform: scale(1.05, 0.9) rotate(-3deg); } 50% { opacity: 0.8; transform: scale(0.7, 0.8) rotate(3deg); } 75% { opacity: 0.4; transform: scale(0.45, 0.55) rotate(-2deg); } to { opacity: 0; transform: scale(0.1, 0.15) rotate(0deg); } } .sa-deflate-sideways { animation: sa-deflate-sideways var(--sa-duration, 0.5s) var(--sa-timing, ease-in) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: bottom center; } @keyframes sa-deflate-sideways { 40% { opacity: 1; transform: scale(0.8, 1.1) skewX(-4deg); } to { opacity: 0; transform: scale(0.2, 0.9) skewX(6deg); } } .sa-punctured { animation: sa-punctured var(--sa-duration, 0.55s) var(--sa-timing, cubic-bezier(0.6, 0, 0.8, 0.2)) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-punctured { 15% { opacity: 1; transform: scale(0.92, 0.8); } to { opacity: 0; transform: scale(0.15, 0.1); } } .sa-air-let-out { animation: sa-air-let-out var(--sa-duration, 0.5s) var(--sa-timing, ease-in) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: bottom center; } @keyframes sa-air-let-out { 50% { opacity: 1; transform: scale(1.05, 0.6); } to { opacity: 0; transform: scale(0.9, 0.05); } } .sa-sag-deflate { animation: sa-sag-deflate var(--sa-duration, 0.55s) var(--sa-timing, ease-in) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: top center; } @keyframes sa-sag-deflate { 50% { opacity: 1; transform: scale(0.85, 0.7) translateY(4%); } to { opacity: 0; transform: scale(0.5, 0.3) translateY(10%); } } .sa-wither { animation: sa-wither var(--sa-duration, 0.6s) var(--sa-timing, ease-in) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: bottom center; } @keyframes sa-wither { to { opacity: 0; transform: translateY(var(--sa-distance, 10px)) rotate(6deg); } } .sa-droop-fade { animation: sa-droop-fade var(--sa-duration, 0.6s) var(--sa-timing, ease-in) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: top center; } @keyframes sa-droop-fade { to { opacity: 0; transform: translateY(var(--sa-distance, 14px)) scaleY(0.9); } } .sa-wilt { animation: sa-wilt var(--sa-duration, 0.55s) var(--sa-timing, ease-in) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: bottom left; } @keyframes sa-wilt { to { opacity: 0; transform: rotate(-8deg) scale(0.85) translateY(var(--sa-distance, 6px)); } } .sa-slump { animation: sa-slump var(--sa-duration, 0.5s) var(--sa-timing, ease-in) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: bottom center; } @keyframes sa-slump { 50% { opacity: 1; transform: translateY(calc(var(--sa-distance, 8px) * 0.4)) scaleY(0.9); } to { opacity: 0; transform: translateY(var(--sa-distance, 8px)) scale(1.08, 0.6); } } .sa-fade-and-droop { animation: sa-fade-and-droop var(--sa-duration, 0.5s) var(--sa-timing, ease-in) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: bottom center; } @keyframes sa-fade-and-droop { 60% { opacity: 0.5; transform: translateY(0); } to { opacity: 0; transform: translateY(var(--sa-distance, 5px)); } } .sa-tired-fade { animation: sa-tired-fade var(--sa-duration, 0.55s) var(--sa-timing, ease-in) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: top right; } @keyframes sa-tired-fade { to { opacity: 0; transform: rotate(10deg) translateY(var(--sa-distance, 6px)) scale(0.92); } } .sa-crumble { animation: sa-crumble var(--sa-duration, 0.6s) var(--sa-timing, ease-in) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-crumble { 20% { opacity: 0.85; transform: scale(0.97); } 45% { opacity: 0.6; transform: scale(0.9); } 70% { opacity: 0.35; transform: scale(0.8); } to { opacity: 0; transform: scale(0.65); } } .sa-crumble-shrink { animation: sa-crumble-shrink var(--sa-duration, 0.55s) var(--sa-timing, ease-in) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-crumble-shrink { 33% { opacity: 0.7; transform: scale(0.8); } 66% { opacity: 0.4; transform: scale(0.55); } to { opacity: 0; transform: scale(0.3); } } .sa-disintegrate-steps { animation: sa-disintegrate-steps var(--sa-duration, 0.6s) var(--sa-timing, steps(6, end)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-disintegrate-steps { to { opacity: 0; transform: scale(0.5) rotate(4deg); } } .sa-flicker-fade { animation: sa-flicker-fade var(--sa-duration, 0.65s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-flicker-fade { 15% { opacity: 0.9; } 30% { opacity: 0.5; } 45% { opacity: 0.8; } 60% { opacity: 0.3; } 80% { opacity: 0.5; } to { opacity: 0; transform: scale(0.9); } } .sa-stutter-fade { animation: sa-stutter-fade var(--sa-duration, 0.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-stutter-fade { 20% { opacity: 0.8; transform: scale(0.98); } 40% { opacity: 0.75; transform: scale(1.02); } 60% { opacity: 0.5; transform: scale(0.95); } 80% { opacity: 0.25; transform: scale(1.01); } to { opacity: 0; transform: scale(0.9); } } .sa-fragment-fade { animation: sa-fragment-fade var(--sa-duration, 0.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-fragment-fade { 30% { opacity: 0.7; transform: scale(0.9) rotate(-4deg); } 60% { opacity: 0.4; transform: scale(0.7) rotate(5deg); } to { opacity: 0; transform: scale(0.4) rotate(-6deg); } } .sa-crumble-fall { animation: sa-crumble-fall var(--sa-duration, 0.6s) var(--sa-timing, ease-in) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-crumble-fall { 25% { opacity: 0.75; transform: translateY(calc(var(--sa-distance, 12px) * 0.25)) scale(0.92); } 55% { opacity: 0.45; transform: translateY(calc(var(--sa-distance, 12px) * 0.6)) scale(0.75); } to { opacity: 0; transform: translateY(var(--sa-distance, 12px)) scale(0.55); } } .sa-dissolve { animation: sa-dissolve var(--sa-duration, 0.55s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-dissolve { to { opacity: 0; filter: blur(8px); } } .sa-dissolve-soft { animation: sa-dissolve-soft var(--sa-duration, 0.7s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-dissolve-soft { 60% { opacity: 0.5; filter: blur(3px); } to { opacity: 0; filter: blur(6px); transform: scale(0.97); } } .sa-blur-fade { animation: sa-blur-fade var(--sa-duration, 0.55s) var(--sa-timing, ease-in) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-blur-fade { 40% { opacity: 0.9; filter: blur(10px); } to { opacity: 0; filter: blur(14px); } } .sa-mist-fade { animation: sa-mist-fade var(--sa-duration, 0.6s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-mist-fade { to { opacity: 0; filter: blur(6px); transform: scale(1.08); } } .sa-haze-out { animation: sa-haze-out var(--sa-duration, 0.55s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-haze-out { to { opacity: 0; filter: blur(9px) brightness(1.3); } } .sa-fog-dissolve { animation: sa-fog-dissolve var(--sa-duration, 0.65s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-fog-dissolve { 50% { opacity: 0.6; filter: blur(4px); transform: scaleX(1.03); } to { opacity: 0; filter: blur(12px); transform: scaleX(1.15) translateY(calc(var(--sa-distance, 10px) * 0.3)); } } .sa-soft-focus-out { animation: sa-soft-focus-out var(--sa-duration, 0.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-soft-focus-out { 70% { opacity: 0.4; filter: blur(5px); transform: scale(0.94); } to { opacity: 0; filter: blur(9px); transform: scale(0.88); } } .sa-fold-away { animation: sa-fold-away var(--sa-duration, 0.45s) var(--sa-timing, ease-in) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: top; } @keyframes sa-fold-away { to { opacity: 0; transform: scaleY(0) skewY(-10deg); } } .sa-fold-up { animation: sa-fold-up var(--sa-duration, 0.45s) var(--sa-timing, ease-in) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: bottom; } @keyframes sa-fold-up { to { opacity: 0; transform: scaleY(0) skewY(10deg); } } .sa-fold-down { animation: sa-fold-down var(--sa-duration, 0.5s) var(--sa-timing, ease-in) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: top; } @keyframes sa-fold-down { 50% { opacity: 1; transform: scaleY(0.5) skewY(-5deg); } to { opacity: 0; transform: scaleY(0) skewY(-12deg); } } .sa-paper-fold { animation: sa-paper-fold var(--sa-duration, 0.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-paper-fold { 50% { opacity: 1; transform: scaleX(0.5) skewY(4deg); } to { opacity: 0; transform: scaleX(0.05) skewY(-4deg); } } .sa-fold-flat { animation: sa-fold-flat var(--sa-duration, 0.55s) var(--sa-timing, ease-in) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: top; } @keyframes sa-fold-flat { 80% { opacity: 1; transform: scaleY(0.15) skewY(6deg); } to { opacity: 0; transform: scaleY(0.02) skewY(6deg); } } .sa-crease-fold { animation: sa-crease-fold var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.55, 0, 0.85, 0.35)) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: left; } @keyframes sa-crease-fold { 20% { opacity: 1; transform: scaleX(0.6) skewY(-6deg); } to { opacity: 0; transform: scaleX(0) skewY(-14deg); } } .sa-evaporate { animation: sa-evaporate var(--sa-duration, 0.55s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-evaporate { to { opacity: 0; transform: scale(1.15) translateY(calc(var(--sa-distance, 10px) * -1)); } } .sa-evaporate-rise { animation: sa-evaporate-rise var(--sa-duration, 0.65s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-evaporate-rise { 50% { opacity: 0.5; transform: scale(1.1) translateY(calc(var(--sa-distance, 16px) * -0.5)); } to { opacity: 0; transform: scale(1.25) translateY(calc(var(--sa-distance, 16px) * -1)); } } .sa-steam-off { animation: sa-steam-off var(--sa-duration, 0.6s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-steam-off { to { opacity: 0; filter: blur(4px); transform: scale(1.2) translateY(calc(var(--sa-distance, 12px) * -1)); } } .sa-rise-and-fade { animation: sa-rise-and-fade var(--sa-duration, 0.5s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-rise-and-fade { to { opacity: 0; transform: translateY(calc(var(--sa-distance, 14px) * -1)) scale(1.05); } } .sa-puff-away { animation: sa-puff-away var(--sa-duration, 0.5s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-puff-away { 30% { opacity: 0.8; transform: scale(1.08) translateY(calc(var(--sa-distance, 8px) * -0.3)); } to { opacity: 0; transform: scale(1.3) translateY(calc(var(--sa-distance, 8px) * -1)); } } .sa-vanish-upward { animation: sa-vanish-upward var(--sa-duration, 0.55s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-vanish-upward { to { opacity: 0; transform: translateY(calc(var(--sa-distance, 18px) * -1)) scale(1.1) rotate(3deg); } } .sa-punch-out { animation: sa-punch-out var(--sa-duration, 0.25s) var(--sa-timing, cubic-bezier(0.55, 0, 1, 0.45)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-punch-out { to { opacity: 0; transform: scale(0.25); } } .sa-gut-punch { animation: sa-gut-punch var(--sa-duration, 0.4s) var(--sa-timing, cubic-bezier(0.6, 0, 0.9, 0.4)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-gut-punch { 0% { transform: scale(1); opacity: 1; } 25% { transform: scaleX(1.2) scaleY(0.75); opacity: 1; } 100% { transform: scale(0); opacity: 0; } } .sa-snap-vanish { animation: sa-snap-vanish var(--sa-duration, 0.35s) var(--sa-timing, cubic-bezier(0.5, 0, 0.75, 0)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-snap-vanish { 0% { transform: scale(1); opacity: 1; } 30% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(0); opacity: 0; } } .sa-vortex-suck { animation: sa-vortex-suck var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.55, 0, 0.85, 0.3)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-vortex-suck { to { opacity: 0; transform: scale(0) rotate(360deg); filter: blur(6px); } } .sa-zoom-snap-out { animation: sa-zoom-snap-out var(--sa-duration, 0.35s) var(--sa-timing, cubic-bezier(0.5, 0, 1, 0.5)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-zoom-snap-out { 0% { transform: scale(1); opacity: 1; filter: blur(0); } 60% { transform: scale(1.6); opacity: 1; filter: blur(2px); } 100% { transform: scale(2.2); opacity: 0; filter: blur(10px); } } .sa-yeet-right { animation: sa-yeet-right var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.35, 0, 0.85, 0.35)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-yeet-right { to { opacity: 0; transform: translateX(calc(var(--sa-distance) * 4)) rotate(75deg); } } .sa-yeet-left { animation: sa-yeet-left var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.35, 0, 0.85, 0.35)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-yeet-left { to { opacity: 0; transform: translateX(calc(var(--sa-distance) * -4)) rotate(-75deg); } } .sa-yeet-up { animation: sa-yeet-up var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.35, 0, 0.85, 0.35)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-yeet-up { to { opacity: 0; transform: translateY(calc(var(--sa-distance) * -4)) rotate(-60deg); } } .sa-yeet-down { animation: sa-yeet-down var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.35, 0, 0.85, 0.35)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-yeet-down { to { opacity: 0; transform: translateY(calc(var(--sa-distance) * 4)) rotate(60deg); } } .sa-recoil-vanish-right { animation: sa-recoil-vanish-right var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.3, 0, 0.7, 0)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-recoil-vanish-right { 0% { transform: translateX(0); opacity: 1; } 20% { transform: translateX(calc(var(--sa-distance) * -0.4)); opacity: 1; } 100% { transform: translateX(calc(var(--sa-distance) * 4)); opacity: 0; } } .sa-recoil-vanish-left { animation: sa-recoil-vanish-left var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.3, 0, 0.7, 0)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-recoil-vanish-left { 0% { transform: translateX(0); opacity: 1; } 20% { transform: translateX(calc(var(--sa-distance) * 0.4)); opacity: 1; } 100% { transform: translateX(calc(var(--sa-distance) * -4)); opacity: 0; } } .sa-recoil-vanish-up { animation: sa-recoil-vanish-up var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.3, 0, 0.7, 0)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-recoil-vanish-up { 0% { transform: translateY(0); opacity: 1; } 20% { transform: translateY(calc(var(--sa-distance) * 0.4)); opacity: 1; } 100% { transform: translateY(calc(var(--sa-distance) * -4)); opacity: 0; } } .sa-recoil-vanish-down { animation: sa-recoil-vanish-down var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.3, 0, 0.7, 0)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-recoil-vanish-down { 0% { transform: translateY(0); opacity: 1; } 20% { transform: translateY(calc(var(--sa-distance) * -0.4)); opacity: 1; } 100% { transform: translateY(calc(var(--sa-distance) * 4)); opacity: 0; } } .sa-diagonal-blitz-ne { animation: sa-diagonal-blitz-ne var(--sa-duration, 0.45s) var(--sa-timing, cubic-bezier(0.7, 0, 0.9, 0.2)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-diagonal-blitz-ne { 0% { transform: translate(0, 0); opacity: 1; } 55% { transform: translate(calc(var(--sa-distance) * 0.3), calc(var(--sa-distance) * -0.3)); opacity: 1; } 100% { transform: translate(calc(var(--sa-distance) * 3.5), calc(var(--sa-distance) * -3.5)); opacity: 0; } } .sa-diagonal-blitz-nw { animation: sa-diagonal-blitz-nw var(--sa-duration, 0.45s) var(--sa-timing, cubic-bezier(0.7, 0, 0.9, 0.2)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-diagonal-blitz-nw { 0% { transform: translate(0, 0); opacity: 1; } 55% { transform: translate(calc(var(--sa-distance) * -0.3), calc(var(--sa-distance) * -0.3)); opacity: 1; } 100% { transform: translate(calc(var(--sa-distance) * -3.5), calc(var(--sa-distance) * -3.5)); opacity: 0; } } .sa-diagonal-blitz-se { animation: sa-diagonal-blitz-se var(--sa-duration, 0.45s) var(--sa-timing, cubic-bezier(0.7, 0, 0.9, 0.2)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-diagonal-blitz-se { 0% { transform: translate(0, 0); opacity: 1; } 55% { transform: translate(calc(var(--sa-distance) * 0.3), calc(var(--sa-distance) * 0.3)); opacity: 1; } 100% { transform: translate(calc(var(--sa-distance) * 3.5), calc(var(--sa-distance) * 3.5)); opacity: 0; } } .sa-diagonal-blitz-sw { animation: sa-diagonal-blitz-sw var(--sa-duration, 0.45s) var(--sa-timing, cubic-bezier(0.7, 0, 0.9, 0.2)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-diagonal-blitz-sw { 0% { transform: translate(0, 0); opacity: 1; } 55% { transform: translate(calc(var(--sa-distance) * -0.3), calc(var(--sa-distance) * 0.3)); opacity: 1; } 100% { transform: translate(calc(var(--sa-distance) * -3.5), calc(var(--sa-distance) * 3.5)); opacity: 0; } } .sa-spin-shrink-out { animation: sa-spin-shrink-out var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.5, 0, 0.85, 0.35)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-spin-shrink-out { to { opacity: 0; transform: scale(0) rotate(720deg); } } .sa-spin-shrink-out-reverse { animation: sa-spin-shrink-out-reverse var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.5, 0, 0.85, 0.35)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-spin-shrink-out-reverse { to { opacity: 0; transform: scale(0) rotate(-720deg); } } .sa-corkscrew-out { animation: sa-corkscrew-out var(--sa-duration, 0.55s) var(--sa-timing, cubic-bezier(0.45, 0, 0.8, 0.3)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-corkscrew-out { to { opacity: 0; transform: translate(calc(var(--sa-distance) * 2), calc(var(--sa-distance) * 2)) rotate(540deg) scale(0.2); } } .sa-spiral-flick { animation: sa-spiral-flick var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.4, 0, 0.8, 0.2)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-spiral-flick { to { opacity: 0; transform: translateY(calc(var(--sa-distance) * -3)) rotate(-450deg); } } .sa-blast-off { animation: sa-blast-off var(--sa-duration, 0.45s) var(--sa-timing, cubic-bezier(0.5, 0, 0.85, 0.3)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-blast-off { 0% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } 35% { transform: scale(1.35); opacity: 1; box-shadow: 0 0 30px 15px rgba(255, 255, 255, 0.5); } 100% { transform: scale(0); opacity: 0; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } .sa-implosion-out { animation: sa-implosion-out var(--sa-duration, 0.4s) var(--sa-timing, cubic-bezier(0.5, 0, 0.9, 0.3)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-implosion-out { 0% { transform: scale(1); opacity: 1; filter: brightness(1) blur(0); } 30% { transform: scale(1.25); opacity: 1; filter: brightness(1.6) blur(0); } 100% { transform: scale(0); opacity: 0; filter: brightness(1) blur(8px); } } .sa-flare-vanish { animation: sa-flare-vanish var(--sa-duration, 0.45s) var(--sa-timing, cubic-bezier(0.4, 0, 0.8, 0.3)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-flare-vanish { 0% { opacity: 1; transform: scale(1); } 15% { opacity: 0.3; transform: scale(1.05); } 30% { opacity: 1; transform: scale(0.95); } 45% { opacity: 0.2; transform: scale(1.05); } 100% { opacity: 0; transform: scale(0); } } .sa-jolt-slide-right { animation: sa-jolt-slide-right var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.4, 0, 0.8, 0.2)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-jolt-slide-right { 0% { transform: translateX(0); opacity: 1; } 10% { transform: translateX(calc(var(--sa-distance) * -0.15)); opacity: 1; } 20% { transform: translateX(calc(var(--sa-distance) * 0.15)); opacity: 1; } 30% { transform: translateX(calc(var(--sa-distance) * -0.1)); opacity: 1; } 100% { transform: translateX(calc(var(--sa-distance) * 4)); opacity: 0; } } .sa-jolt-slide-left { animation: sa-jolt-slide-left var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.4, 0, 0.8, 0.2)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-jolt-slide-left { 0% { transform: translateX(0); opacity: 1; } 10% { transform: translateX(calc(var(--sa-distance) * 0.15)); opacity: 1; } 20% { transform: translateX(calc(var(--sa-distance) * -0.15)); opacity: 1; } 30% { transform: translateX(calc(var(--sa-distance) * 0.1)); opacity: 1; } 100% { transform: translateX(calc(var(--sa-distance) * -4)); opacity: 0; } } .sa-jolt-slide-up { animation: sa-jolt-slide-up var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.4, 0, 0.8, 0.2)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-jolt-slide-up { 0% { transform: translateY(0); opacity: 1; } 10% { transform: translateY(calc(var(--sa-distance) * 0.15)); opacity: 1; } 20% { transform: translateY(calc(var(--sa-distance) * -0.15)); opacity: 1; } 30% { transform: translateY(calc(var(--sa-distance) * 0.1)); opacity: 1; } 100% { transform: translateY(calc(var(--sa-distance) * -4)); opacity: 0; } } .sa-jolt-slide-down { animation: sa-jolt-slide-down var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.4, 0, 0.8, 0.2)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-jolt-slide-down { 0% { transform: translateY(0); opacity: 1; } 10% { transform: translateY(calc(var(--sa-distance) * -0.15)); opacity: 1; } 20% { transform: translateY(calc(var(--sa-distance) * 0.15)); opacity: 1; } 30% { transform: translateY(calc(var(--sa-distance) * -0.1)); opacity: 1; } 100% { transform: translateY(calc(var(--sa-distance) * 4)); opacity: 0; } } .sa-tilt-snap-right { animation: sa-tilt-snap-right var(--sa-duration, 0.45s) var(--sa-timing, cubic-bezier(0.5, 0, 0.85, 0.3)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-tilt-snap-right { 0% { transform: translateX(0) rotate(0deg); opacity: 1; } 20% { transform: translateX(0) rotate(18deg); opacity: 1; } 100% { transform: translateX(calc(var(--sa-distance) * 4)) rotate(30deg); opacity: 0; } } .sa-tilt-snap-left { animation: sa-tilt-snap-left var(--sa-duration, 0.45s) var(--sa-timing, cubic-bezier(0.5, 0, 0.85, 0.3)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-tilt-snap-left { 0% { transform: translateX(0) rotate(0deg); opacity: 1; } 20% { transform: translateX(0) rotate(-18deg); opacity: 1; } 100% { transform: translateX(calc(var(--sa-distance) * -4)) rotate(-30deg); opacity: 0; } } .sa-skew-slam-right { animation: sa-skew-slam-right var(--sa-duration, 0.4s) var(--sa-timing, cubic-bezier(0.55, 0, 0.85, 0.25)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-skew-slam-right { 0% { transform: translateX(0) skewX(0deg); opacity: 1; } 20% { transform: translateX(0) skewX(-20deg); opacity: 1; } 100% { transform: translateX(calc(var(--sa-distance) * 4)) skewX(-30deg); opacity: 0; } } .sa-skew-slam-left { animation: sa-skew-slam-left var(--sa-duration, 0.4s) var(--sa-timing, cubic-bezier(0.55, 0, 0.85, 0.25)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-skew-slam-left { 0% { transform: translateX(0) skewX(0deg); opacity: 1; } 20% { transform: translateX(0) skewX(20deg); opacity: 1; } 100% { transform: translateX(calc(var(--sa-distance) * -4)) skewX(30deg); opacity: 0; } } .sa-skew-slam-down { animation: sa-skew-slam-down var(--sa-duration, 0.4s) var(--sa-timing, cubic-bezier(0.5, 0, 0.9, 0.3)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-skew-slam-down { 0% { transform: translateY(0) skewY(0deg); opacity: 1; } 20% { transform: translateY(0) skewY(12deg); opacity: 1; } 100% { transform: translateY(calc(var(--sa-distance) * 4)) skewY(20deg); opacity: 0; } } .sa-reel-back-snap { animation: sa-reel-back-snap var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.4, 0, 0.8, 0.2)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-reel-back-snap { 0% { transform: translate(0, 0) skew(0deg, 0deg); opacity: 1; } 25% { transform: translate(calc(var(--sa-distance) * -0.3), calc(var(--sa-distance) * -0.15)) skew(10deg, 5deg); opacity: 1; } 100% { transform: translate(calc(var(--sa-distance) * 3.5), calc(var(--sa-distance) * 2)) skew(-15deg, -8deg); opacity: 0; } } .sa-ejector-seat { animation: sa-ejector-seat var(--sa-duration, 0.4s) var(--sa-timing, cubic-bezier(0.6, 0, 0.95, 0.2)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-ejector-seat { to { opacity: 0; transform: translateY(calc(var(--sa-distance) * -5)) rotate(15deg); } } .sa-slingshot-out { animation: sa-slingshot-out var(--sa-duration, 0.55s) var(--sa-timing, cubic-bezier(0.3, 0, 0.7, 0.15)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-slingshot-out { 0% { transform: translateX(0) scale(1); opacity: 1; } 25% { transform: translateX(calc(var(--sa-distance) * -0.5)) scale(0.85); opacity: 1; } 55% { transform: translateX(calc(var(--sa-distance) * 1)) scale(1.15); opacity: 1; } 100% { transform: translateX(calc(var(--sa-distance) * 4.5)) scale(0.6); opacity: 0; } } .sa-rug-pull { animation: sa-rug-pull var(--sa-duration, 0.4s) var(--sa-timing, cubic-bezier(0.7, 0, 1, 0.4)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-rug-pull { to { opacity: 0; transform: translateY(calc(var(--sa-distance) * 5)) rotate(-12deg); } } .sa-trapdoor-drop { animation: sa-trapdoor-drop var(--sa-duration, 0.45s) var(--sa-timing, cubic-bezier(0.6, 0, 1, 0.3)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-trapdoor-drop { 0% { transform: translateY(0) scale(1); opacity: 1; } 30% { transform: translateY(calc(var(--sa-distance) * 0.3)) scale(0.95); opacity: 1; } 100% { transform: translateY(calc(var(--sa-distance) * 5)) scale(0.7); opacity: 0; } } .sa-kick-out-right { animation: sa-kick-out-right var(--sa-duration, 0.45s) var(--sa-timing, cubic-bezier(0.5, 0, 0.85, 0.25)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-kick-out-right { 0% { transform: translateX(0) scale(1) rotate(0deg); opacity: 1; } 15% { transform: translateX(calc(var(--sa-distance) * -0.15)) scaleX(0.8) scaleY(1.1) rotate(0deg); opacity: 1; } 100% { transform: translateX(calc(var(--sa-distance) * 4.5)) scale(0.7) rotate(40deg); opacity: 0; } } .sa-kick-out-left { animation: sa-kick-out-left var(--sa-duration, 0.45s) var(--sa-timing, cubic-bezier(0.5, 0, 0.85, 0.25)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-kick-out-left { 0% { transform: translateX(0) scale(1) rotate(0deg); opacity: 1; } 15% { transform: translateX(calc(var(--sa-distance) * 0.15)) scaleX(0.8) scaleY(1.1) rotate(0deg); opacity: 1; } 100% { transform: translateX(calc(var(--sa-distance) * -4.5)) scale(0.7) rotate(-40deg); opacity: 0; } } .sa-catapult-arc-right { animation: sa-catapult-arc-right var(--sa-duration, 0.6s) var(--sa-timing, cubic-bezier(0.4, 0, 0.7, 0.2)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-catapult-arc-right { 0% { transform: translate(0, 0) rotate(0deg); opacity: 1; } 40% { transform: translate(calc(var(--sa-distance) * 1.2), calc(var(--sa-distance) * -2.5)) rotate(90deg); opacity: 1; } 100% { transform: translate(calc(var(--sa-distance) * 3.5), calc(var(--sa-distance) * 1)) rotate(200deg); opacity: 0; } } .sa-catapult-arc-left { animation: sa-catapult-arc-left var(--sa-duration, 0.6s) var(--sa-timing, cubic-bezier(0.4, 0, 0.7, 0.2)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-catapult-arc-left { 0% { transform: translate(0, 0) rotate(0deg); opacity: 1; } 40% { transform: translate(calc(var(--sa-distance) * -1.2), calc(var(--sa-distance) * -2.5)) rotate(-90deg); opacity: 1; } 100% { transform: translate(calc(var(--sa-distance) * -3.5), calc(var(--sa-distance) * 1)) rotate(-200deg); opacity: 0; } } .sa-dropkick-diagonal { animation: sa-dropkick-diagonal var(--sa-duration, 0.4s) var(--sa-timing, cubic-bezier(0.55, 0, 0.85, 0.3)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-dropkick-diagonal { to { opacity: 0; transform: translate(calc(var(--sa-distance) * 3.5), calc(var(--sa-distance) * 3)) rotate(180deg); } } .sa-bounce-eject-up { animation: sa-bounce-eject-up var(--sa-duration, 0.45s) var(--sa-timing, cubic-bezier(0.45, 0, 0.8, 0.2)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-bounce-eject-up { 0% { transform: translateY(0); opacity: 1; } 20% { transform: translateY(calc(var(--sa-distance) * 0.3)); opacity: 1; } 100% { transform: translateY(calc(var(--sa-distance) * -5)); opacity: 0; } } .sa-bounce-eject-down { animation: sa-bounce-eject-down var(--sa-duration, 0.45s) var(--sa-timing, cubic-bezier(0.45, 0, 0.8, 0.2)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-bounce-eject-down { 0% { transform: translateY(0); opacity: 1; } 20% { transform: translateY(calc(var(--sa-distance) * -0.3)); opacity: 1; } 100% { transform: translateY(calc(var(--sa-distance) * 5)); opacity: 0; } } .sa-rapid-fire-out { animation: sa-rapid-fire-out var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.6, 0, 0.4, 1)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-rapid-fire-out { 0% { transform: translateX(0); opacity: 1; } 10% { transform: translateX(calc(var(--sa-distance) * -0.2)); opacity: 1; } 20% { transform: translateX(calc(var(--sa-distance) * 0.2)); opacity: 1; } 30% { transform: translateX(calc(var(--sa-distance) * -0.2)); opacity: 1; } 40% { transform: translateX(calc(var(--sa-distance) * 0.2)); opacity: 1; } 50% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(0) scale(0); opacity: 0; } } .sa-whip-crack-out { animation: sa-whip-crack-out var(--sa-duration, 0.45s) var(--sa-timing, cubic-bezier(0.5, 0, 0.75, 0.25)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-whip-crack-out { 0% { transform: rotate(0deg) scale(1); opacity: 1; } 50% { transform: rotate(50deg) scale(1.05); opacity: 1; } 70% { transform: rotate(35deg) scale(1); opacity: 1; } 100% { transform: rotate(90deg) scale(0); opacity: 0; } } .sa-flick-up-arc { animation: sa-flick-up-arc var(--sa-duration, 0.4s) var(--sa-timing, cubic-bezier(0.45, 0, 0.8, 0.25)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-flick-up-arc { to { opacity: 0; transform: translate(calc(var(--sa-distance) * 0.8), calc(var(--sa-distance) * -3.5)) rotate(20deg); } } .sa-flick-down-arc { animation: sa-flick-down-arc var(--sa-duration, 0.4s) var(--sa-timing, cubic-bezier(0.45, 0, 0.8, 0.25)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-flick-down-arc { to { opacity: 0; transform: translate(calc(var(--sa-distance) * -0.8), calc(var(--sa-distance) * 3.5)) rotate(-20deg); } } .sa-gone-in-a-blink { animation: sa-gone-in-a-blink var(--sa-duration, 0.35s) var(--sa-timing, cubic-bezier(0.6, 0, 0.9, 0.3)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-gone-in-a-blink { 0% { transform: scale(1, 1); opacity: 1; } 50% { transform: scale(1, 0.05); opacity: 1; } 100% { transform: scale(0, 0.05); opacity: 0; } } /* ==================================================================== exit An element leaving. Runs once and holds its finished (hidden) state. Remove the element from the DOM on `animationend`; the class only animates it out of the way. Under reduced motion, `playAnimation()` skips waiting for `animationend` (it never fires once CSS disables the animation) and resolves immediately instead, so the caller's own removal code still runs right away — no motion, but the dismissal still happens. */ .sa-fade-out { animation: sa-fade-out var(--sa-duration, 0.35s) var(--sa-timing, ease-in) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-fade-out { to { opacity: 0; } } .sa-slide-out-up { animation: sa-slide-out-up var(--sa-duration, 0.35s) var(--sa-timing, cubic-bezier(0.7, 0, 0.84, 0)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-slide-out-up { to { opacity: 0; transform: translateY(calc(var(--sa-distance) * -1)); } } .sa-slide-out-down { animation: sa-slide-out-down var(--sa-duration, 0.35s) var(--sa-timing, cubic-bezier(0.7, 0, 0.84, 0)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-slide-out-down { to { opacity: 0; transform: translateY(var(--sa-distance)); } } .sa-slide-out-left { animation: sa-slide-out-left var(--sa-duration, 0.35s) var(--sa-timing, cubic-bezier(0.7, 0, 0.84, 0)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-slide-out-left { to { opacity: 0; transform: translateX(calc(var(--sa-distance) * -1)); } } .sa-slide-out-right { animation: sa-slide-out-right var(--sa-duration, 0.35s) var(--sa-timing, cubic-bezier(0.7, 0, 0.84, 0)) var(--sa-delay) var(--sa-repeat, 1) forwards; } @keyframes sa-slide-out-right { to { opacity: 0; transform: translateX(var(--sa-distance)); } } .sa-scale-out { animation: sa-scale-out var(--sa-duration, 0.3s) var(--sa-timing, cubic-bezier(0.7, 0, 0.84, 0)) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-scale-out { to { opacity: 0; transform: scale(0.85); } } .sa-victory-bounce { animation: sa-victory-bounce var(--sa-duration, 0.75s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-victory-bounce { 0% { transform: scale(1); } 30% { transform: scale(1.35); } 50% { transform: scale(0.9); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } } .sa-level-up-burst { animation: sa-level-up-burst var(--sa-duration, 0.55s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-level-up-burst { 0% { transform: scale(1) translateY(0); } 40% { transform: scale(1.25) translateY(calc(var(--sa-distance, 10px) * -1)); } 100% { transform: scale(1) translateY(0); } } .sa-high-five-pulse { animation: sa-high-five-pulse var(--sa-duration, 0.5s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-high-five-pulse { 0% { transform: scale(1); } 20% { transform: scale(1.2); } 40% { transform: scale(1); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } } .sa-checkmark-settle { animation: sa-checkmark-settle var(--sa-duration, 0.45s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-checkmark-settle { 0% { transform: scale(0.9) rotate(-8deg); } 50% { transform: scale(1.12) rotate(6deg); } 100% { transform: scale(1) rotate(0deg); } } .sa-combo-escalate { animation: sa-combo-escalate var(--sa-duration, 0.6s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-combo-escalate { 0% { transform: scale(1); } 30% { transform: scale(1.28); } 55% { transform: scale(0.97); } 75% { transform: scale(1.05); } 100% { transform: scale(1); } } .sa-quiet-win-settle { animation: sa-quiet-win-settle var(--sa-duration, 0.35s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-quiet-win-settle { 0% { transform: scale(1); } 50% { transform: scale(1.04); } 100% { transform: scale(1); } } .sa-achievement-float-pop { animation: sa-achievement-float-pop var(--sa-duration, 0.7s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-achievement-float-pop { 0% { transform: scale(1) translateY(0); } 35% { transform: scale(1.2) translateY(calc(var(--sa-distance, 10px) * -1)); } 65% { transform: scale(1.05) translateY(calc(var(--sa-distance, 10px) * -1.6)); } 100% { transform: scale(1) translateY(0); } } .sa-joy-spin-settle { animation: sa-joy-spin-settle var(--sa-duration, 0.6s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-joy-spin-settle { 0% { transform: scale(1) rotate(0deg); } 40% { transform: scale(1.2) rotate(18deg); } 100% { transform: scale(1) rotate(0deg); } } .sa-triumph-swell { animation: sa-triumph-swell var(--sa-duration, 0.65s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-triumph-swell { 0% { transform: scale(1) rotate(0deg); } 45% { transform: scale(1.3) rotate(-4deg); } 100% { transform: scale(1) rotate(0deg); } } .sa-milestone-bump { animation: sa-milestone-bump var(--sa-duration, 0.45s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-milestone-bump { 0% { transform: scale(1) translateY(0); } 45% { transform: scale(1.12) translateY(calc(var(--sa-distance, 6px) * -1)); } 100% { transform: scale(1) translateY(0); } } .sa-streak-ignite { animation: sa-streak-ignite var(--sa-duration, 0.45s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-streak-ignite { 0% { transform: scale(1); filter: brightness(1); } 45% { transform: scale(1.12); filter: brightness(1.4); } 100% { transform: scale(1); filter: brightness(1); } } .sa-personal-best-lift { animation: sa-personal-best-lift var(--sa-duration, 0.6s) var(--sa-timing, cubic-bezier(0.22, 1, 0.36, 1)) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-personal-best-lift { 0% { transform: scale(1) translateY(0); } 50% { transform: scale(1.15) translateY(calc(var(--sa-distance, 8px) * -1)); } 100% { transform: scale(1) translateY(0); } } .sa-badge-earn { animation: sa-badge-earn var(--sa-duration, 0.55s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-badge-earn { 0% { transform: scale(1) rotate(0deg); } 35% { transform: scale(1.2) rotate(-5deg); } 65% { transform: scale(1.05) rotate(4deg); } 100% { transform: scale(1) rotate(0deg); } } .sa-trophy-raise { animation: sa-trophy-raise var(--sa-duration, 0.9s) var(--sa-timing, cubic-bezier(0.22, 1, 0.36, 1)) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-trophy-raise { 0% { transform: scale(1) translateY(0); } 40% { transform: scale(1.2) translateY(calc(var(--sa-distance, 12px) * -1)); } 70% { transform: scale(1.2) translateY(calc(var(--sa-distance, 12px) * -1)); } 100% { transform: scale(1) translateY(0); } } .sa-confetti-burst { animation: sa-confetti-burst var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-confetti-burst { 0% { transform: scale(1); opacity: 1; filter: brightness(1); } 30% { transform: scale(1.4); opacity: 0.7; filter: brightness(1.3); } 100% { transform: scale(1); opacity: 1; filter: brightness(1); } } .sa-gold-star-pop { animation: sa-gold-star-pop var(--sa-duration, 0.65s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-gold-star-pop { 0% { transform: scale(1) rotate(0deg); } 60% { transform: scale(1.3) rotate(360deg); } 100% { transform: scale(1) rotate(360deg); } } .sa-cheer-bounce { animation: sa-cheer-bounce var(--sa-duration, 0.7s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-cheer-bounce { 0% { transform: translateY(0) scale(1); } 30% { transform: translateY(calc(var(--sa-distance, 10px) * -1)) scale(1.1); } 55% { transform: translateY(0) scale(1); } 75% { transform: translateY(calc(var(--sa-distance, 10px) * -0.5)) scale(1.05); } 100% { transform: translateY(0) scale(1); } } .sa-fist-pump { animation: sa-fist-pump var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.68, -0.55, 0.27, 1.55)) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-fist-pump { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(calc(var(--sa-distance, 14px) * -1)) scale(1.08); } 60% { transform: translateY(3px) scale(1.02); } 100% { transform: translateY(0) scale(1); } } .sa-round-won { animation: sa-round-won var(--sa-duration, 0.5s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-round-won { 0% { transform: scale(1); filter: brightness(1); } 40% { transform: scale(1.2); filter: brightness(1.25); } 100% { transform: scale(1); filter: brightness(1); } } .sa-quest-complete { animation: sa-quest-complete var(--sa-duration, 0.6s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-quest-complete { 0% { transform: scale(1) rotate(0deg) translateY(0); } 45% { transform: scale(1.25) rotate(3deg) translateY(calc(var(--sa-distance, 3px) * -1)); } 100% { transform: scale(1) rotate(0deg) translateY(0); } } .sa-new-record-pop { animation: sa-new-record-pop var(--sa-duration, 0.4s) var(--sa-timing, cubic-bezier(0.68, -0.55, 0.27, 1.55)) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-new-record-pop { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } } .sa-unlock-reveal { animation: sa-unlock-reveal var(--sa-duration, 0.55s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-unlock-reveal { 0% { transform: scale(0.9) rotate(-6deg); opacity: 0.6; filter: brightness(0.8); } 60% { transform: scale(1.1) rotate(0deg); opacity: 1; filter: brightness(1.1); } 100% { transform: scale(1) rotate(0deg); opacity: 1; filter: brightness(1); } } .sa-points-scored { animation: sa-points-scored var(--sa-duration, 0.32s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-points-scored { 0% { transform: translateY(0) scale(1); } 45% { transform: translateY(calc(var(--sa-distance, 6px) * -1)) scale(1.1); } 100% { transform: translateY(0) scale(1); } } .sa-goal-net { animation: sa-goal-net var(--sa-duration, 0.55s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-goal-net { 0% { transform: scale(1) rotate(0deg); } 30% { transform: scale(1.2) rotate(-3deg); } 55% { transform: scale(1.1) rotate(3deg); } 80% { transform: scale(1.05) rotate(-2deg); } 100% { transform: scale(1) rotate(0deg); } } .sa-jackpot-flash { animation: sa-jackpot-flash var(--sa-duration, 0.6s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-jackpot-flash { 0% { transform: scale(1); filter: brightness(1); box-shadow: 0 0 0 rgba(255, 215, 0, 0); } 40% { transform: scale(1.18); filter: brightness(1.5); box-shadow: 0 0 18px rgba(255, 215, 0, 0.7); } 100% { transform: scale(1); filter: brightness(1); box-shadow: 0 0 0 rgba(255, 215, 0, 0); } } .sa-quiz-correct { animation: sa-quiz-correct var(--sa-duration, 0.35s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-quiz-correct { 0% { transform: scale(1); opacity: 1; } 40% { transform: scale(1.12); opacity: 0.7; } 100% { transform: scale(1); opacity: 1; } } .sa-exam-passed { animation: sa-exam-passed var(--sa-duration, 0.7s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-exam-passed { 0% { transform: scale(1); } 50% { transform: scale(1.18); } 100% { transform: scale(1); } } .sa-verified-check { animation: sa-verified-check var(--sa-duration, 0.4s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-verified-check { 0% { transform: scale(1) rotate(0deg); } 40% { transform: scale(1.08) rotate(-10deg); } 70% { transform: scale(1.08) rotate(5deg); } 100% { transform: scale(1) rotate(0deg); } } .sa-approved-nod { animation: sa-approved-nod var(--sa-duration, 0.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-approved-nod { 0% { transform: translateY(0) scale(1); } 25% { transform: translateY(3px) scale(0.98); } 65% { transform: translateY(calc(var(--sa-distance, 5px) * -1)) scale(1.08); } 100% { transform: translateY(0) scale(1); } } .sa-certified-seal { animation: sa-certified-seal var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-certified-seal { 0% { transform: scale(0.9) rotate(-15deg); } 100% { transform: scale(1) rotate(0deg); } } .sa-promoted-rise { animation: sa-promoted-rise var(--sa-duration, 0.85s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-promoted-rise { 0% { transform: translateY(0) scale(1); } 60% { transform: translateY(calc(var(--sa-distance, 16px) * -1)) scale(1.15); } 100% { transform: translateY(0) scale(1); } } .sa-graduate-toss { animation: sa-graduate-toss var(--sa-duration, 0.75s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-graduate-toss { 0% { transform: translateY(0) rotate(0deg); } 35% { transform: translateY(calc(var(--sa-distance, 14px) * -1)) rotate(12deg); } 70% { transform: translateY(2px) rotate(-4deg); } 100% { transform: translateY(0) rotate(0deg); } } .sa-deal-closed { animation: sa-deal-closed var(--sa-duration, 0.5s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-deal-closed { 0% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.15); filter: brightness(1.15); } 100% { transform: scale(1.05); filter: brightness(1.05); } } .sa-payment-confirmed { animation: sa-payment-confirmed var(--sa-duration, 0.4s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-payment-confirmed { 0% { transform: scale(1); opacity: 1; } 40% { transform: scale(1.14); opacity: 0.85; } 100% { transform: scale(1); opacity: 1; } } .sa-upvote-lift { animation: sa-upvote-lift var(--sa-duration, 0.28s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-upvote-lift { 0% { transform: translateY(0) scale(1); } 50% { transform: translateY(calc(var(--sa-distance, 4px) * -1)) scale(1.06); } 100% { transform: translateY(0) scale(1); } } .sa-like-heart-pop { animation: sa-like-heart-pop var(--sa-duration, 0.35s) var(--sa-timing, cubic-bezier(0.68, -0.55, 0.27, 1.55)) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-like-heart-pop { 0% { transform: scale(1); } 50% { transform: scale(1.35); } 100% { transform: scale(1); } } .sa-follow-gained { animation: sa-follow-gained var(--sa-duration, 0.5s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-follow-gained { 0% { transform: scale(1) rotate(0deg); } 35% { transform: scale(1.1) rotate(4deg); } 65% { transform: scale(1.05) rotate(-3deg); } 100% { transform: scale(1) rotate(0deg); } } .sa-ribbon-award { animation: sa-ribbon-award var(--sa-duration, 0.55s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-ribbon-award { 0% { transform: scale(0.95) rotate(0deg); } 45% { transform: scale(1.2) rotate(10deg); } 100% { transform: scale(1) rotate(0deg); } } .sa-medal-shine { animation: sa-medal-shine var(--sa-duration, 0.6s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-medal-shine { 0% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.2); filter: brightness(1.5); } 100% { transform: scale(1); filter: brightness(1); } } .sa-boss-defeated { animation: sa-boss-defeated var(--sa-duration, 0.8s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-boss-defeated { 0% { transform: scale(1) rotate(0deg); } 25% { transform: scale(1.3) rotate(-6deg); } 50% { transform: scale(1.15) rotate(6deg); } 75% { transform: scale(1.05) rotate(-3deg); } 100% { transform: scale(1) rotate(0deg); } } .sa-level-cleared { animation: sa-level-cleared var(--sa-duration, 0.55s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-level-cleared { 0% { transform: translateX(0) scale(1); } 30% { transform: translateX(var(--sa-distance, 6px)) scale(1.12); } 60% { transform: translateX(calc(var(--sa-distance, 6px) * -0.5)) scale(1.05); } 100% { transform: translateX(0) scale(1); } } .sa-combo-multiplier { animation: sa-combo-multiplier var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-combo-multiplier { 0% { transform: scale(1); } 25% { transform: scale(1.1); } 50% { transform: scale(1); } 70% { transform: scale(1.22); } 100% { transform: scale(1); } } .sa-first-try-win { animation: sa-first-try-win var(--sa-duration, 0.3s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-first-try-win { 0% { transform: scale(1); } 50% { transform: scale(1.16); } 100% { transform: scale(1); } } .sa-daily-goal-met { animation: sa-daily-goal-met var(--sa-duration, 0.45s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-daily-goal-met { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.9; } 100% { transform: scale(1); opacity: 1; } } .sa-bonus-earned { animation: sa-bonus-earned var(--sa-duration, 0.6s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-bonus-earned { 0% { transform: scale(1); } 30% { transform: scale(1.2); } 55% { transform: scale(1.05); } 75% { transform: scale(1.1); } 100% { transform: scale(1); } } .sa-streak-saved { animation: sa-streak-saved var(--sa-duration, 0.55s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-streak-saved { 0% { transform: scale(0.95); } 40% { transform: scale(1.18); } 70% { transform: scale(0.98); } 100% { transform: scale(1); } } .sa-high-score-beat { animation: sa-high-score-beat var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-high-score-beat { 0% { transform: scale(1) rotate(0deg); filter: brightness(1); } 45% { transform: scale(1.25) rotate(5deg); filter: brightness(1.3); } 100% { transform: scale(1) rotate(0deg); filter: brightness(1); } } .sa-perfect-score { animation: sa-perfect-score var(--sa-duration, 0.75s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-perfect-score { 0% { transform: scale(1); filter: brightness(1); } 25% { transform: scale(1.22); filter: brightness(1.3); } 60% { transform: scale(1.22); filter: brightness(1.3); } 100% { transform: scale(1); filter: brightness(1); } } .sa-small-victory { animation: sa-small-victory var(--sa-duration, 0.32s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-small-victory { 0% { transform: scale(1) translateY(0); } 50% { transform: scale(1.08) translateY(calc(var(--sa-distance, 2px) * -1)); } 100% { transform: scale(1) translateY(0); } } .sa-quiet-confirm { animation: sa-quiet-confirm var(--sa-duration, 0.3s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-quiet-confirm { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.75; transform: scale(1.02); } 100% { opacity: 1; transform: scale(1); } } .sa-bounce-back-down { animation: sa-bounce-back-down var(--sa-duration, 0.6s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-bounce-back-down { 0% { transform: translateY(0); } 30% { transform: translateY(8px); } 55% { transform: translateY(-3px); } 78% { transform: translateY(1px); } 100% { transform: translateY(0); } } .sa-bounce-back-up { animation: sa-bounce-back-up var(--sa-duration, 0.6s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-bounce-back-up { 0% { transform: translateY(0); } 30% { transform: translateY(-8px); } 55% { transform: translateY(3px); } 78% { transform: translateY(-1px); } 100% { transform: translateY(0); } } .sa-reject-drop-bounce { animation: sa-reject-drop-bounce var(--sa-duration, 0.8s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-reject-drop-bounce { 0% { transform: translateY(0); } 25% { transform: translateY(14px); } 50% { transform: translateY(-5px); } 70% { transform: translateY(2px); } 85% { transform: translateY(-1px); } 100% { transform: translateY(0); } } .sa-push-back-settle { animation: sa-push-back-settle var(--sa-duration, 0.5s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-push-back-settle { 0% { transform: translateY(0); } 40% { transform: translateY(6px); } 100% { transform: translateY(0); } } .sa-deny-bounce-small { animation: sa-deny-bounce-small var(--sa-duration, 0.35s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-deny-bounce-small { 0% { transform: translateY(0); } 35% { transform: translateY(4px); } 65% { transform: translateY(-1px); } 100% { transform: translateY(0); } } .sa-reject-lift-bounce { animation: sa-reject-lift-bounce var(--sa-duration, 0.7s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-reject-lift-bounce { 0% { transform: translateY(0); } 28% { transform: translateY(-10px); } 55% { transform: translateY(4px); } 80% { transform: translateY(-2px); } 100% { transform: translateY(0); } } .sa-bounce-back-scale { animation: sa-bounce-back-scale var(--sa-duration, 0.55s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-bounce-back-scale { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(7px) scale(0.97); } 60% { transform: translateY(-2px) scale(1.02); } 100% { transform: translateY(0) scale(1); } } .sa-double-bounce-refuse { animation: sa-double-bounce-refuse var(--sa-duration, 0.85s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-double-bounce-refuse { 0% { transform: translateY(0); } 20% { transform: translateY(9px); } 40% { transform: translateY(-3px); } 60% { transform: translateY(6px); } 80% { transform: translateY(-1px); } 100% { transform: translateY(0); } } .sa-droop-fade-empty { animation: sa-droop-fade-empty var(--sa-duration, 0.7s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-droop-fade-empty { 0% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(5px); opacity: 0.55; } 100% { transform: translateY(0); opacity: 1; } } .sa-wilt-recover { animation: sa-wilt-recover var(--sa-duration, 0.75s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-wilt-recover { 0% { transform: translateY(0) scale(1); opacity: 1; } 45% { transform: translateY(4px) scale(0.95); opacity: 0.6; } 100% { transform: translateY(0) scale(1); opacity: 1; } } .sa-slump-settle { animation: sa-slump-settle var(--sa-duration, 0.9s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-slump-settle { 0% { transform: translateY(0); opacity: 1; } 55% { transform: translateY(10px); opacity: 0.65; } 100% { transform: translateY(0); opacity: 1; } } .sa-empty-results-sag { animation: sa-empty-results-sag var(--sa-duration, 0.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-empty-results-sag { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 50% { transform: translateY(6px) rotate(-2deg); opacity: 0.7; } 100% { transform: translateY(0) rotate(0deg); opacity: 1; } } .sa-soft-fail-dip { animation: sa-soft-fail-dip var(--sa-duration, 0.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-soft-fail-dip { 0% { transform: translateY(0); opacity: 1; } 40% { transform: translateY(3px); opacity: 0.7; } 100% { transform: translateY(0); opacity: 1; } } .sa-field-invalid-tint { animation: sa-field-invalid-tint var(--sa-duration, 0.5s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-field-invalid-tint { 0% { transform: scale(1); filter: brightness(1); opacity: 1; } 40% { transform: scale(0.98); filter: brightness(0.95); opacity: 0.95; } 100% { transform: scale(0.97); filter: brightness(0.9); opacity: 0.85; } } .sa-recoil-pull { animation: sa-recoil-pull var(--sa-duration, 0.35s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-recoil-pull { 0% { transform: translateX(0); } 40% { transform: translateX(-6px); } 70% { transform: translateX(1px); } 100% { transform: translateX(0); } } .sa-flinch-recoil { animation: sa-flinch-recoil var(--sa-duration, 0.35s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-flinch-recoil { 0% { transform: translateY(0); } 40% { transform: translateY(-5px); } 70% { transform: translateY(1px); } 100% { transform: translateY(0); } } .sa-snap-back-scale { animation: sa-snap-back-scale var(--sa-duration, 0.4s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-snap-back-scale { 0% { transform: scale(1); } 35% { transform: scale(0.9); } 65% { transform: scale(1.04); } 100% { transform: scale(1); } } .sa-jolt-recoil-tilt { animation: sa-jolt-recoil-tilt var(--sa-duration, 0.35s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-jolt-recoil-tilt { 0% { transform: rotate(0deg); } 40% { transform: rotate(-4deg); } 70% { transform: rotate(1deg); } 100% { transform: rotate(0deg); } } .sa-pull-back-release { animation: sa-pull-back-release var(--sa-duration, 0.5s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-pull-back-release { 0% { transform: translateX(0); } 45% { transform: translateX(-9px); } 75% { transform: translateX(2px); } 100% { transform: translateX(0); } } .sa-instant-recoil { animation: sa-instant-recoil var(--sa-duration, 0.2s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-instant-recoil { 0% { transform: translateX(0); } 50% { transform: translateX(-3px); } 100% { transform: translateX(0); } } .sa-wrong-answer-wobble { animation: sa-wrong-answer-wobble var(--sa-duration, 0.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-wrong-answer-wobble { 0% { transform: rotate(0deg) translateX(0); } 25% { transform: rotate(-5deg) translateX(-3px); } 50% { transform: rotate(4deg) translateX(3px); } 75% { transform: rotate(-2deg) translateX(-1px); } 100% { transform: rotate(0deg) translateX(0); } } .sa-mismatch-wobble { animation: sa-mismatch-wobble var(--sa-duration, 0.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-mismatch-wobble { 0% { transform: rotate(0deg) translateY(0); } 25% { transform: rotate(3deg) translateY(3px); } 50% { transform: rotate(-3deg) translateY(-2px); } 75% { transform: rotate(1deg) translateY(1px); } 100% { transform: rotate(0deg) translateY(0); } } .sa-confused-shake-tilt { animation: sa-confused-shake-tilt var(--sa-duration, 0.65s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-confused-shake-tilt { 0% { transform: rotate(0deg) translateX(0); } 15% { transform: rotate(6deg) translateX(2px); } 35% { transform: rotate(-6deg) translateX(-3px); } 55% { transform: rotate(4deg) translateX(2px); } 75% { transform: rotate(-2deg) translateX(-1px); } 100% { transform: rotate(0deg) translateX(0); } } .sa-off-target-wobble { animation: sa-off-target-wobble var(--sa-duration, 0.45s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-off-target-wobble { 0% { transform: rotate(0deg) translate(0, 0); } 30% { transform: rotate(-3deg) translate(-2px, 1px); } 60% { transform: rotate(2deg) translate(2px, -1px); } 100% { transform: rotate(0deg) translate(0, 0); } } .sa-quiz-wrong-wobble { animation: sa-quiz-wrong-wobble var(--sa-duration, 0.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-quiz-wrong-wobble { 0% { transform: rotate(0deg) translateX(0); } 25% { transform: rotate(-5deg) translateX(-3px); } 50% { transform: rotate(0deg) translateX(0); } 75% { transform: rotate(5deg) translateX(3px); } 100% { transform: rotate(0deg) translateX(0); } } .sa-uncertain-wobble-shake { animation: sa-uncertain-wobble-shake var(--sa-duration, 0.75s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-uncertain-wobble-shake { 0% { transform: rotate(0deg) translateX(0); } 30% { transform: rotate(-8deg) translateX(-5px); } 60% { transform: rotate(6deg) translateX(4px); } 85% { transform: rotate(-2deg) translateX(-1px); } 100% { transform: rotate(0deg) translateX(0); } } .sa-warn-pulse-once { animation: sa-warn-pulse-once var(--sa-duration, 0.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-warn-pulse-once { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.97); } 100% { opacity: 1; transform: scale(1); } } .sa-soft-alert-fade { animation: sa-soft-alert-fade var(--sa-duration, 0.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-soft-alert-fade { 0% { opacity: 1; filter: brightness(1); } 50% { opacity: 0.65; filter: brightness(0.85); } 100% { opacity: 1; filter: brightness(1); } } .sa-gentle-warning-flash { animation: sa-gentle-warning-flash var(--sa-duration, 0.3s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-gentle-warning-flash { 0% { opacity: 1; } 50% { opacity: 0.75; } 100% { opacity: 1; } } .sa-caution-fade-once { animation: sa-caution-fade-once var(--sa-duration, 0.55s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-caution-fade-once { 0% { opacity: 1; transform: scale(1); } 45% { opacity: 0.6; transform: scale(0.94); } 100% { opacity: 1; transform: scale(1); } } .sa-mild-error-glow-dim { animation: sa-mild-error-glow-dim var(--sa-duration, 0.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-mild-error-glow-dim { 0% { filter: brightness(1); } 50% { filter: brightness(0.8); } 100% { filter: brightness(1); } } .sa-attention-dim-once { animation: sa-attention-dim-once var(--sa-duration, 0.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-attention-dim-once { 0% { opacity: 1; transform: translateY(0); } 50% { opacity: 0.6; transform: translateY(2px); } 100% { opacity: 1; transform: translateY(0); } } .sa-stubborn-shake { animation: sa-stubborn-shake var(--sa-duration, 0.9s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-stubborn-shake { 0% { transform: translateX(0); } 25% { transform: translateX(-7px); } 50% { transform: translateX(7px); } 75% { transform: translateX(-4px); } 100% { transform: translateX(0); } } .sa-locked-refuse-shake { animation: sa-locked-refuse-shake var(--sa-duration, 1s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-locked-refuse-shake { 0% { transform: translateX(0); } 20% { transform: translateX(-3px); } 45% { transform: translateX(3px); } 70% { transform: translateX(-2px); } 100% { transform: translateX(0); } } .sa-immovable-shake { animation: sa-immovable-shake var(--sa-duration, 0.85s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-immovable-shake { 0% { transform: translateX(0) scale(1); } 25% { transform: translateX(-5px) scale(0.98); } 50% { transform: translateX(5px) scale(0.98); } 75% { transform: translateX(-2px) scale(0.99); } 100% { transform: translateX(0) scale(1); } } .sa-heavy-denial-shake { animation: sa-heavy-denial-shake var(--sa-duration, 0.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-heavy-denial-shake { 0% { transform: translateX(0); } 30% { transform: translateX(-10px); } 65% { transform: translateX(10px); } 100% { transform: translateX(0); } } .sa-stuck-shake-drag { animation: sa-stuck-shake-drag var(--sa-duration, 0.75s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-stuck-shake-drag { 0% { transform: translateX(0); } 45% { transform: translateX(-6px); } 60% { transform: translateX(4px); } 75% { transform: translateX(-2px); } 100% { transform: translateX(0); } } .sa-rigid-refusal-shake { animation: sa-rigid-refusal-shake var(--sa-duration, 0.85s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-rigid-refusal-shake { 0% { transform: translateX(0) rotate(0deg); } 30% { transform: translateX(-5px) rotate(-2deg); } 60% { transform: translateX(5px) rotate(2deg); } 100% { transform: translateX(0) rotate(0deg); } } .sa-locked-field-shake { animation: sa-locked-field-shake var(--sa-duration, 0.7s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-locked-field-shake { 0% { transform: translateX(0) scale(1); opacity: 1; } 25% { transform: translateX(-5px) scale(1); opacity: 1; } 50% { transform: translateX(5px) scale(1); opacity: 1; } 75% { transform: translateX(-2px) scale(0.98); opacity: 0.9; } 100% { transform: translateX(0) scale(0.97); opacity: 0.85; } } .sa-diagonal-reject-shake { animation: sa-diagonal-reject-shake var(--sa-duration, 0.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-diagonal-reject-shake { 0% { transform: translate(0, 0); } 25% { transform: translate(-5px, -5px); } 50% { transform: translate(5px, 5px); } 75% { transform: translate(-3px, -3px); } 100% { transform: translate(0, 0); } } .sa-corner-reject-shake { animation: sa-corner-reject-shake var(--sa-duration, 0.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-corner-reject-shake { 0% { transform: translate(0, 0); } 25% { transform: translate(5px, -5px); } 50% { transform: translate(-5px, 5px); } 75% { transform: translate(3px, -3px); } 100% { transform: translate(0, 0); } } .sa-cross-diagonal-shake { animation: sa-cross-diagonal-shake var(--sa-duration, 0.65s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-cross-diagonal-shake { 0% { transform: translate(0, 0); } 20% { transform: translate(-5px, -5px); } 40% { transform: translate(5px, -5px); } 60% { transform: translate(5px, 5px); } 80% { transform: translate(-5px, 5px); } 100% { transform: translate(0, 0); } } .sa-diagonal-recoil-shake { animation: sa-diagonal-recoil-shake var(--sa-duration, 0.4s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-diagonal-recoil-shake { 0% { transform: translate(0, 0); } 45% { transform: translate(-7px, 7px); } 75% { transform: translate(2px, -2px); } 100% { transform: translate(0, 0); } } .sa-slant-reject-wobble { animation: sa-slant-reject-wobble var(--sa-duration, 0.55s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-slant-reject-wobble { 0% { transform: translate(0, 0) rotate(0deg); } 30% { transform: translate(-4px, 4px) rotate(-3deg); } 60% { transform: translate(4px, -4px) rotate(3deg); } 100% { transform: translate(0, 0) rotate(0deg); } } .sa-diagonal-drop-shake { animation: sa-diagonal-drop-shake var(--sa-duration, 0.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-diagonal-drop-shake { 0% { transform: translate(0, 0); } 30% { transform: translate(-5px, 6px); } 55% { transform: translate(4px, 3px); } 80% { transform: translate(-2px, 1px); } 100% { transform: translate(0, 0); } } .sa-timeout-fade { animation: sa-timeout-fade var(--sa-duration, 1.1s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-timeout-fade { 0% { opacity: 1; } 50% { opacity: 0.45; } 100% { opacity: 1; } } .sa-session-expired-fade { animation: sa-session-expired-fade var(--sa-duration, 0.9s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-session-expired-fade { 0% { opacity: 1; filter: brightness(1); } 100% { opacity: 0.55; filter: brightness(0.85); } } .sa-connection-timeout-dim { animation: sa-connection-timeout-dim var(--sa-duration, 1.3s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-connection-timeout-dim { 0% { opacity: 1; filter: brightness(1); } 55% { opacity: 0.5; filter: brightness(0.8); } 100% { opacity: 1; filter: brightness(1); } } .sa-request-timeout-pulse { animation: sa-request-timeout-pulse var(--sa-duration, 1s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-request-timeout-pulse { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.96); } 100% { opacity: 1; transform: scale(1); } } .sa-link-expired-fade { animation: sa-link-expired-fade var(--sa-duration, 1.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-link-expired-fade { 0% { opacity: 1; } 60% { opacity: 0.4; } 100% { opacity: 1; } } .sa-quiet-nod { animation: sa-quiet-nod var(--sa-duration, 0.4s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-quiet-nod { 0% { transform: scale(1); } 50% { transform: scale(1.025); } 100% { transform: scale(1); } } .sa-soft-blink { animation: sa-soft-blink var(--sa-duration, 0.35s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-soft-blink { 0% { opacity: 1; } 10% { opacity: 0.5; } 20% { opacity: 1; } 100% { opacity: 1; } } .sa-gentle-tilt-settle { animation: sa-gentle-tilt-settle var(--sa-duration, 0.45s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-gentle-tilt-settle { 0% { transform: rotate(0deg) translateY(0); } 45% { transform: rotate(-4deg) translateY(-1px); } 100% { transform: rotate(0deg) translateY(0); } } .sa-micro-nod-down { animation: sa-micro-nod-down var(--sa-duration, 0.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-micro-nod-down { 0% { transform: translateY(0); } 50% { transform: translateY(2px); } 100% { transform: translateY(0); } } .sa-corner-glow { animation: sa-corner-glow var(--sa-duration, 0.5s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-corner-glow { 0% { filter: brightness(1); } 50% { filter: brightness(1.25); } 100% { filter: brightness(1); } } .sa-scale-tick { animation: sa-scale-tick var(--sa-duration, 0.28s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-scale-tick { 0% { transform: scale(1); } 50% { transform: scale(1.015); } 100% { transform: scale(1); } } .sa-registered-bounce { animation: sa-registered-bounce var(--sa-duration, 0.35s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-registered-bounce { 0% { transform: translateY(0); } 35% { transform: translateY(-3px); } 65% { transform: translateY(0.5px); } 100% { transform: translateY(0); } } .sa-dim-and-hold { animation: sa-dim-and-hold var(--sa-duration, 0.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-dim-and-hold { 0% { opacity: 1; } 100% { opacity: 0.55; } } .sa-quiet-tilt-right { animation: sa-quiet-tilt-right var(--sa-duration, 0.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-quiet-tilt-right { 0% { transform: rotate(0deg); } 50% { transform: rotate(2.5deg); } 100% { transform: rotate(0deg); } } .sa-soft-lift { animation: sa-soft-lift var(--sa-duration, 0.4s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-soft-lift { 0% { transform: translateY(0); } 50% { transform: translateY(-2px); } 100% { transform: translateY(0); } } .sa-gentle-squeeze { animation: sa-gentle-squeeze var(--sa-duration, 0.35s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-gentle-squeeze { 0% { transform: scaleY(1); } 50% { transform: scaleY(0.96); } 100% { transform: scaleY(1); } } .sa-gentle-widen { animation: sa-gentle-widen var(--sa-duration, 0.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-gentle-widen { 0% { transform: scaleX(1); } 50% { transform: scaleX(1.035); } 100% { transform: scaleX(1); } } .sa-quiet-press { animation: sa-quiet-press var(--sa-duration, 0.35s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-quiet-press { 0% { transform: scale(1); } 25% { transform: scale(0.97); } 100% { transform: scale(1); } } .sa-hush-fade { animation: sa-hush-fade var(--sa-duration, 0.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-hush-fade { 0% { opacity: 1; } 50% { opacity: 0.85; } 100% { opacity: 1; } } .sa-drift-right { animation: sa-drift-right var(--sa-duration, 0.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-drift-right { 0% { transform: translateX(0); } 50% { transform: translateX(2px); } 100% { transform: translateX(0); } } .sa-drift-left { animation: sa-drift-left var(--sa-duration, 0.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-drift-left { 0% { transform: translateX(0); } 50% { transform: translateX(-2px); } 100% { transform: translateX(0); } } .sa-glimmer-tick { animation: sa-glimmer-tick var(--sa-duration, 0.35s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-glimmer-tick { 0% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.01); filter: brightness(1.15); } 100% { transform: scale(1); filter: brightness(1); } } .sa-hushed-settle { animation: sa-hushed-settle var(--sa-duration, 0.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-hushed-settle { 0% { transform: scale(1); } 40% { transform: scale(1.02); } 70% { transform: scale(0.99); } 100% { transform: scale(1); } } .sa-check-whisper { animation: sa-check-whisper var(--sa-duration, 0.4s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-check-whisper { 0% { transform: rotate(0deg) translateY(0); } 50% { transform: rotate(-3deg) translateY(-1px); } 100% { transform: rotate(0deg) translateY(0); } } .sa-quiet-contrast-pulse { animation: sa-quiet-contrast-pulse var(--sa-duration, 0.45s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-quiet-contrast-pulse { 0% { filter: contrast(1); } 50% { filter: contrast(0.85); } 100% { filter: contrast(1); } } .sa-tiny-tap { animation: sa-tiny-tap var(--sa-duration, 0.25s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-tiny-tap { 0% { transform: scale(1); } 40% { transform: scale(0.985); } 100% { transform: scale(1); } } .sa-settle-low { animation: sa-settle-low var(--sa-duration, 0.4s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-settle-low { 0% { transform: translateY(0); } 100% { transform: translateY(2px); } } .sa-quiet-flicker { animation: sa-quiet-flicker var(--sa-duration, 0.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-quiet-flicker { 0% { opacity: 1; } 15% { opacity: 0.6; } 30% { opacity: 1; } 45% { opacity: 0.8; } 60% { opacity: 1; } 100% { opacity: 1; } } .sa-soft-hum { animation: sa-soft-hum var(--sa-duration, 0.45s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-soft-hum { 0% { filter: saturate(1); } 50% { filter: saturate(1.3); } 100% { filter: saturate(1); } } .sa-gentle-dip-right { animation: sa-gentle-dip-right var(--sa-duration, 0.4s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-gentle-dip-right { 0% { transform: translate(0, 0); } 50% { transform: translate(1px, 1px); } 100% { transform: translate(0, 0); } } .sa-quiet-shrink-breathe { animation: sa-quiet-shrink-breathe var(--sa-duration, 0.55s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-quiet-shrink-breathe { 0% { transform: scale(1); } 30% { transform: scale(0.99); } 70% { transform: scale(0.99); } 100% { transform: scale(1); } } .sa-muted-glow-hold { animation: sa-muted-glow-hold var(--sa-duration, 0.4s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-muted-glow-hold { 0% { filter: brightness(1); } 100% { filter: brightness(1.2); } } .sa-soft-recede { animation: sa-soft-recede var(--sa-duration, 0.45s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-soft-recede { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.98); opacity: 0.7; } } .sa-quiet-two-step { animation: sa-quiet-two-step var(--sa-duration, 0.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-quiet-two-step { 0% { opacity: 1; transform: translateY(0); } 50% { opacity: 0.8; transform: translateY(1px); } 100% { opacity: 1; transform: translateY(0); } } .sa-quiet-roll { animation: sa-quiet-roll var(--sa-duration, 0.45s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-quiet-roll { 0% { transform: rotate(0deg); } 30% { transform: rotate(-2deg); } 65% { transform: rotate(2deg); } 100% { transform: rotate(0deg); } } .sa-hush-blur-clear { animation: sa-hush-blur-clear var(--sa-duration, 0.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-hush-blur-clear { 0% { filter: blur(0); } 50% { filter: blur(1px); } 100% { filter: blur(0); } } .sa-soft-nudge-up { animation: sa-soft-nudge-up var(--sa-duration, 0.3s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-soft-nudge-up { 0% { transform: translateY(0); filter: brightness(1); } 50% { transform: translateY(-1.5px); filter: brightness(1.1); } 100% { transform: translateY(0); filter: brightness(1); } } .sa-quiet-scale-hold { animation: sa-quiet-scale-hold var(--sa-duration, 0.35s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-quiet-scale-hold { 0% { transform: scale(1); } 100% { transform: scale(1.02); } } .sa-gentle-fade-tick { animation: sa-gentle-fade-tick var(--sa-duration, 0.25s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-gentle-fade-tick { 0% { opacity: 1; } 50% { opacity: 0.9; } 100% { opacity: 1; } } .sa-muted-corner-pulse { animation: sa-muted-corner-pulse var(--sa-duration, 0.4s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-muted-corner-pulse { 0% { opacity: 1; filter: brightness(1); } 50% { opacity: 0.95; filter: brightness(1.1); } 100% { opacity: 1; filter: brightness(1); } } .sa-quiet-settle-left { animation: sa-quiet-settle-left var(--sa-duration, 0.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-quiet-settle-left { 0% { transform: translateX(0) scale(1); } 50% { transform: translateX(-1.5px) scale(0.995); } 100% { transform: translateX(0) scale(1); } } .sa-soft-checkmark-nod { animation: sa-soft-checkmark-nod var(--sa-duration, 0.45s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-soft-checkmark-nod { 0% { transform: rotate(0deg) scale(1); } 45% { transform: rotate(5deg) scale(1.015); } 100% { transform: rotate(0deg) scale(1); } } .sa-quiet-hold-dim { animation: sa-quiet-hold-dim var(--sa-duration, 0.55s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-quiet-hold-dim { 0% { opacity: 1; } 100% { opacity: 0.65; } } .sa-tiny-registered-hop { animation: sa-tiny-registered-hop var(--sa-duration, 0.35s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-tiny-registered-hop { 0% { transform: translateY(0) scale(1); } 40% { transform: translateY(-2px) scale(1.01); } 100% { transform: translateY(0) scale(1); } } .sa-soft-waver { animation: sa-soft-waver var(--sa-duration, 0.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-soft-waver { 0% { transform: rotate(0deg); } 35% { transform: rotate(1deg); } 65% { transform: rotate(-1deg); } 100% { transform: rotate(0deg); } } .sa-quiet-pulse-out { animation: sa-quiet-pulse-out var(--sa-duration, 0.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-quiet-pulse-out { 0% { transform: scale(1); } 30% { transform: scale(1.03); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } } .sa-gentle-vanish-tick { animation: sa-gentle-vanish-tick var(--sa-duration, 0.3s) var(--sa-timing, ease-in) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-gentle-vanish-tick { 0% { opacity: 1; } 30% { opacity: 0.4; } 100% { opacity: 1; } } .sa-hush-settle-diagonal { animation: sa-hush-settle-diagonal var(--sa-duration, 0.4s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-hush-settle-diagonal { 0% { transform: translate(1px, -1px); } 100% { transform: translate(0, 0); } } .sa-soft-mark-glow { animation: sa-soft-mark-glow var(--sa-duration, 0.45s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-soft-mark-glow { 0% { filter: drop-shadow(0 0 0 currentColor); } 100% { filter: drop-shadow(0 0 3px currentColor); } } .sa-quiet-tap-tilt { animation: sa-quiet-tap-tilt var(--sa-duration, 0.35s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-quiet-tap-tilt { 0% { transform: rotate(0deg) scale(0.99); } 50% { transform: rotate(-2deg) scale(1); } 100% { transform: rotate(0deg) scale(1); } } .sa-muted-breath-hold { animation: sa-muted-breath-hold var(--sa-duration, 0.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-muted-breath-hold { 0% { transform: scale(1); } 100% { transform: scale(0.97); } } .sa-quiet-two-beat { animation: sa-quiet-two-beat var(--sa-duration, 0.45s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-quiet-two-beat { 0% { transform: scale(1); } 25% { transform: scale(1.015); } 50% { transform: scale(1); } 75% { transform: scale(1.015); } 100% { transform: scale(1); } } .sa-quiet-settle-scale-fade { animation: sa-quiet-settle-scale-fade var(--sa-duration, 0.5s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-quiet-settle-scale-fade { 0% { transform: scale(1); opacity: 1; } 40% { transform: scale(1.02); opacity: 0.9; } 70% { transform: scale(1.02); opacity: 0.9; } 100% { transform: scale(1); opacity: 1; } } .sa-gentle-corner-dim { animation: sa-gentle-corner-dim var(--sa-duration, 0.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-gentle-corner-dim { 0% { filter: brightness(1); } 50% { filter: brightness(0.85); } 100% { filter: brightness(1); } } .sa-hush-final-nod { animation: sa-hush-final-nod var(--sa-duration, 0.65s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-hush-final-nod { 0% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(1px) rotate(1deg); } 100% { transform: translateY(0) rotate(0deg); } } /* ================================================================= feedback The result of an action. Runs once by default and returns to rest, except `sa-success-pop` and `sa-saved-flash`, which hold their settled state. */ .sa-success-pop { animation: sa-success-pop var(--sa-duration, 0.55s) var(--sa-timing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-success-pop { 0% { transform: scale(1); } 40% { transform: scale(1.15); } 100% { transform: scale(1); } } .sa-nope { animation: sa-nope var(--sa-duration, 0.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, 1); transform-origin: center; } @keyframes sa-nope { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } } .sa-saved-flash { animation: sa-saved-flash var(--sa-duration, 0.45s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, 1) forwards; transform-origin: center; } @keyframes sa-saved-flash { 0% { opacity: 1; transform: scale(1); } 35% { opacity: 0.5; transform: scale(0.97); } 100% { opacity: 1; transform: scale(1); } } /* ============================================================ loading-2 Spin, rotate, and orbit variants. Always continuous/infinite. */ .sa-spin-windup { animation: sa-spin-windup var(--sa-duration, 1.4s) var(--sa-timing, cubic-bezier(0.55, 0, 0.85, 0.35)) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-spin-windup { to { transform: rotate(360deg); } } .sa-spin-surge { animation: sa-spin-surge var(--sa-duration, 1.6s) var(--sa-timing, cubic-bezier(0.65, 0, 0.35, 1)) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-spin-surge { to { transform: rotate(360deg); } } .sa-spin-flywheel { animation: sa-spin-flywheel var(--sa-duration, 1.8s) var(--sa-timing, cubic-bezier(0.16, 1, 0.3, 1)) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-spin-flywheel { to { transform: rotate(360deg); } } .sa-spin-anticipate { animation: sa-spin-anticipate var(--sa-duration, 1.4s) var(--sa-timing, ease) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-spin-anticipate { 0% { transform: rotate(0deg); } 8% { transform: rotate(-12deg); } 100% { transform: rotate(360deg); } } .sa-spin-overshoot { animation: sa-spin-overshoot var(--sa-duration, 1.3s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-spin-overshoot { 0% { transform: rotate(0deg); } 88% { transform: rotate(378deg); } 100% { transform: rotate(360deg); } } .sa-spin-crank { animation: sa-spin-crank var(--sa-duration, 1.5s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-spin-crank { 0% { transform: rotate(0deg); } 20% { transform: rotate(15deg); } 40% { transform: rotate(45deg); } 60% { transform: rotate(110deg); } 80% { transform: rotate(220deg); } 100% { transform: rotate(360deg); } } .sa-spin-breathe { animation: sa-spin-breathe var(--sa-duration, 1.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-spin-breathe { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.08); } 100% { transform: rotate(360deg) scale(1); } } .sa-spin-inhale { animation: sa-spin-inhale var(--sa-duration, 1.7s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-spin-inhale { 0% { transform: rotate(0deg) scale(1); } 35% { transform: rotate(126deg) scale(1.15); } 100% { transform: rotate(360deg) scale(1); } } .sa-spin-pulse-double { animation: sa-spin-pulse-double var(--sa-duration, 1.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-spin-pulse-double { 0% { transform: rotate(0deg) scale(1); } 25% { transform: rotate(90deg) scale(1.06); } 50% { transform: rotate(180deg) scale(1); } 75% { transform: rotate(270deg) scale(1.06); } 100% { transform: rotate(360deg) scale(1); } } .sa-orbit-breathe { animation: sa-orbit-breathe var(--sa-duration, 2.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-orbit-breathe { 0% { transform: rotate(0deg) scale(1) translate(0, 0); } 50% { transform: rotate(180deg) scale(1.12) translate(var(--sa-distance, 2px), 0); } 100% { transform: rotate(360deg) scale(1) translate(0, 0); } } .sa-spin-throb { animation: sa-spin-throb var(--sa-duration, 1.3s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-spin-throb { 0% { transform: rotate(0deg) scale(1); } 8% { transform: rotate(29deg) scale(1.18); } 16% { transform: rotate(58deg) scale(1); } 100% { transform: rotate(360deg) scale(1); } } .sa-spin-billow { animation: sa-spin-billow var(--sa-duration, 2.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-spin-billow { 0% { transform: rotate(0deg) scale(1); } 20% { transform: rotate(72deg) scale(1.05); } 50% { transform: rotate(180deg) scale(1); } 80% { transform: rotate(288deg) scale(1.05); } 100% { transform: rotate(360deg) scale(1); } } .sa-spin-tick { animation: sa-spin-tick var(--sa-duration, 2s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-spin-tick { 0% { transform: rotate(0deg); } 22% { transform: rotate(0deg); } 25% { transform: rotate(90deg); } 47% { transform: rotate(90deg); } 50% { transform: rotate(180deg); } 72% { transform: rotate(180deg); } 75% { transform: rotate(270deg); } 97% { transform: rotate(270deg); } 100% { transform: rotate(360deg); } } .sa-spin-ratchet { animation: sa-spin-ratchet var(--sa-duration, 1.6s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-spin-ratchet { 0% { transform: rotate(0deg); } 13% { transform: rotate(0deg); } 17% { transform: rotate(60deg); } 30% { transform: rotate(60deg); } 33% { transform: rotate(120deg); } 47% { transform: rotate(120deg); } 50% { transform: rotate(180deg); } 63% { transform: rotate(180deg); } 67% { transform: rotate(240deg); } 80% { transform: rotate(240deg); } 83% { transform: rotate(300deg); } 97% { transform: rotate(300deg); } 100% { transform: rotate(360deg); } } .sa-spin-notch { animation: sa-spin-notch var(--sa-duration, 1.2s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-spin-notch { 0% { transform: rotate(0deg); } 9% { transform: rotate(0deg); } 13% { transform: rotate(45deg); } 22% { transform: rotate(45deg); } 25% { transform: rotate(90deg); } 34% { transform: rotate(90deg); } 38% { transform: rotate(135deg); } 47% { transform: rotate(135deg); } 50% { transform: rotate(180deg); } 59% { transform: rotate(180deg); } 63% { transform: rotate(225deg); } 72% { transform: rotate(225deg); } 75% { transform: rotate(270deg); } 84% { transform: rotate(270deg); } 88% { transform: rotate(315deg); } 97% { transform: rotate(315deg); } 100% { transform: rotate(360deg); } } .sa-spin-index { animation: sa-spin-index var(--sa-duration, 2.6s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-spin-index { 0% { transform: rotate(0deg); } 28% { transform: rotate(0deg); } 33% { transform: rotate(120deg); } 61% { transform: rotate(120deg); } 67% { transform: rotate(240deg); } 94% { transform: rotate(240deg); } 100% { transform: rotate(360deg); } } .sa-spin-cog { animation: sa-spin-cog var(--sa-duration, 1.8s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-spin-cog { 0% { transform: rotate(0deg); } 18% { transform: rotate(0deg); } 21% { transform: rotate(100deg); } 24% { transform: rotate(88deg); } 25% { transform: rotate(90deg); } 43% { transform: rotate(90deg); } 46% { transform: rotate(190deg); } 49% { transform: rotate(178deg); } 50% { transform: rotate(180deg); } 68% { transform: rotate(180deg); } 71% { transform: rotate(280deg); } 74% { transform: rotate(268deg); } 75% { transform: rotate(270deg); } 93% { transform: rotate(270deg); } 96% { transform: rotate(370deg); } 99% { transform: rotate(358deg); } 100% { transform: rotate(360deg); } } .sa-spin-stepper { animation: sa-spin-stepper var(--sa-duration, 1.4s) var(--sa-timing, steps(12, end)) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-spin-stepper { to { transform: rotate(360deg); } } .sa-orbit-wobble { animation: sa-orbit-wobble var(--sa-duration, 1.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-orbit-wobble { 0% { transform: rotate(0deg) translate(var(--sa-distance, 3px), 0px); } 12.5% { transform: rotate(45deg) translate(calc(var(--sa-distance, 3px) * 0.71), calc(var(--sa-distance, 3px) * 0.71)); } 25% { transform: rotate(90deg) translate(0px, var(--sa-distance, 3px)); } 37.5% { transform: rotate(135deg) translate(calc(var(--sa-distance, 3px) * -0.71), calc(var(--sa-distance, 3px) * 0.71)); } 50% { transform: rotate(180deg) translate(calc(var(--sa-distance, 3px) * -1), 0px); } 62.5% { transform: rotate(225deg) translate(calc(var(--sa-distance, 3px) * -0.71), calc(var(--sa-distance, 3px) * -0.71)); } 75% { transform: rotate(270deg) translate(0px, calc(var(--sa-distance, 3px) * -1)); } 87.5% { transform: rotate(315deg) translate(calc(var(--sa-distance, 3px) * 0.71), calc(var(--sa-distance, 3px) * -0.71)); } 100% { transform: rotate(360deg) translate(var(--sa-distance, 3px), 0px); } } .sa-orbit-drift { animation: sa-orbit-drift var(--sa-duration, 2.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-orbit-drift { 0% { transform: rotate(0deg) translate(var(--sa-distance, 6px), 0px) scale(1); } 12.5% { transform: rotate(45deg) translate(calc(var(--sa-distance, 6px) * 0.71), calc(var(--sa-distance, 6px) * 0.71)) scale(1.02); } 25% { transform: rotate(90deg) translate(0px, var(--sa-distance, 6px)) scale(1.04); } 37.5% { transform: rotate(135deg) translate(calc(var(--sa-distance, 6px) * -0.71), calc(var(--sa-distance, 6px) * 0.71)) scale(1.02); } 50% { transform: rotate(180deg) translate(calc(var(--sa-distance, 6px) * -1), 0px) scale(1); } 62.5% { transform: rotate(225deg) translate(calc(var(--sa-distance, 6px) * -0.71), calc(var(--sa-distance, 6px) * -0.71)) scale(0.98); } 75% { transform: rotate(270deg) translate(0px, calc(var(--sa-distance, 6px) * -1)) scale(0.96); } 87.5% { transform: rotate(315deg) translate(calc(var(--sa-distance, 6px) * 0.71), calc(var(--sa-distance, 6px) * -0.71)) scale(0.98); } 100% { transform: rotate(360deg) translate(var(--sa-distance, 6px), 0px) scale(1); } } .sa-spin-teeter { animation: sa-spin-teeter var(--sa-duration, 1.3s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-spin-teeter { 0% { transform: rotate(0deg) translateX(0px); } 25% { transform: rotate(90deg) translateX(var(--sa-distance, 3px)); } 50% { transform: rotate(180deg) translateX(0px); } 75% { transform: rotate(270deg) translateX(calc(var(--sa-distance, 3px) * -1)); } 100% { transform: rotate(360deg) translateX(0px); } } .sa-orbit-loop { animation: sa-orbit-loop var(--sa-duration, 2.8s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-orbit-loop { 0% { transform: rotate(0deg) translate(var(--sa-distance, 8px), 0px); } 12.5% { transform: rotate(45deg) translate(calc(var(--sa-distance, 8px) * 0.71), calc(var(--sa-distance, 8px) * 0.71)); } 25% { transform: rotate(90deg) translate(0px, var(--sa-distance, 8px)); } 37.5% { transform: rotate(135deg) translate(calc(var(--sa-distance, 8px) * -0.71), calc(var(--sa-distance, 8px) * 0.71)); } 50% { transform: rotate(180deg) translate(calc(var(--sa-distance, 8px) * -1), 0px); } 62.5% { transform: rotate(225deg) translate(calc(var(--sa-distance, 8px) * -0.71), calc(var(--sa-distance, 8px) * -0.71)); } 75% { transform: rotate(270deg) translate(0px, calc(var(--sa-distance, 8px) * -1)); } 87.5% { transform: rotate(315deg) translate(calc(var(--sa-distance, 8px) * 0.71), calc(var(--sa-distance, 8px) * -0.71)); } 100% { transform: rotate(360deg) translate(var(--sa-distance, 8px), 0px); } } .sa-spin-jitter-orbit { animation: sa-spin-jitter-orbit var(--sa-duration, 0.6s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-spin-jitter-orbit { 0% { transform: rotate(0deg) translate(0px, 0px); } 12% { transform: rotate(43deg) translate(var(--sa-distance, 2px), calc(var(--sa-distance, 2px) * -1)); } 25% { transform: rotate(90deg) translate(calc(var(--sa-distance, 2px) * -1), var(--sa-distance, 2px)); } 37% { transform: rotate(129deg) translate(var(--sa-distance, 2px), var(--sa-distance, 2px)); } 50% { transform: rotate(180deg) translate(0px, calc(var(--sa-distance, 2px) * -1)); } 62% { transform: rotate(223deg) translate(calc(var(--sa-distance, 2px) * -1), calc(var(--sa-distance, 2px) * -1)); } 75% { transform: rotate(270deg) translate(var(--sa-distance, 2px), 0px); } 87% { transform: rotate(312deg) translate(calc(var(--sa-distance, 2px) * -1), var(--sa-distance, 2px)); } 100% { transform: rotate(360deg) translate(0px, 0px); } } .sa-orbit-sway { animation: sa-orbit-sway var(--sa-duration, 3.2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-orbit-sway { 0% { transform: rotate(0deg) translate(var(--sa-distance, 2px), 0px); } 25% { transform: rotate(90deg) translate(0px, var(--sa-distance, 2px)); } 50% { transform: rotate(180deg) translate(calc(var(--sa-distance, 2px) * -1), 0px); } 75% { transform: rotate(270deg) translate(0px, calc(var(--sa-distance, 2px) * -1)); } 100% { transform: rotate(360deg) translate(var(--sa-distance, 2px), 0px); } } .sa-spin-grow { animation: sa-spin-grow var(--sa-duration, 1.6s) var(--sa-timing, ease) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-spin-grow { 0% { transform: rotate(0deg) scale(1); } 100% { transform: rotate(360deg) scale(1.15); } } .sa-spin-expand-reset { animation: sa-spin-expand-reset var(--sa-duration, 1.8s) var(--sa-timing, ease-in) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-spin-expand-reset { 0% { transform: rotate(0deg) scale(1); opacity: 1; } 90% { transform: rotate(324deg) scale(1.3); opacity: 0.85; } 100% { transform: rotate(360deg) scale(1.3); opacity: 0.85; } } .sa-spin-balloon { animation: sa-spin-balloon var(--sa-duration, 1.9s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-spin-balloon { 0% { transform: rotate(0deg) scale(1); } 70% { transform: rotate(252deg) scale(1.2); } 85% { transform: rotate(306deg) scale(1.28); } 100% { transform: rotate(360deg) scale(1.18); } } .sa-spin-zoom-loop { animation: sa-spin-zoom-loop var(--sa-duration, 0.9s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-spin-zoom-loop { 0% { transform: rotate(0deg) scale(1); } 100% { transform: rotate(360deg) scale(1.4); } } .sa-spin-amplify { animation: sa-spin-amplify var(--sa-duration, 2s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-spin-amplify { 0% { transform: rotate(0deg) scale(1); } 24% { transform: rotate(90deg) scale(1); } 25% { transform: rotate(90deg) scale(1.05); } 49% { transform: rotate(180deg) scale(1.05); } 50% { transform: rotate(180deg) scale(1.1); } 74% { transform: rotate(270deg) scale(1.1); } 75% { transform: rotate(270deg) scale(1.15); } 99% { transform: rotate(360deg) scale(1.15); } 100% { transform: rotate(360deg) scale(1.2); } } .sa-gyrate { animation: sa-gyrate var(--sa-duration, 1.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-gyrate { 0% { transform: rotate(0deg) skewX(0deg); } 25% { transform: rotate(90deg) skewX(6deg); } 50% { transform: rotate(180deg) skewX(0deg); } 75% { transform: rotate(270deg) skewX(-6deg); } 100% { transform: rotate(360deg) skewX(0deg); } } .sa-gyrate-tilt { animation: sa-gyrate-tilt var(--sa-duration, 1.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-gyrate-tilt { 0% { transform: rotate(0deg) skewY(0deg); } 25% { transform: rotate(90deg) skewY(10deg); } 50% { transform: rotate(180deg) skewY(0deg); } 75% { transform: rotate(270deg) skewY(-10deg); } 100% { transform: rotate(360deg) skewY(0deg); } } .sa-gyrate-twist { animation: sa-gyrate-twist var(--sa-duration, 2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-gyrate-twist { 0% { transform: rotate(0deg) skewX(0deg) skewY(0deg); } 25% { transform: rotate(90deg) skewX(8deg) skewY(0deg); } 50% { transform: rotate(180deg) skewX(0deg) skewY(0deg); } 75% { transform: rotate(270deg) skewX(0deg) skewY(-8deg); } 100% { transform: rotate(360deg) skewX(0deg) skewY(0deg); } } .sa-gyrate-flutter { animation: sa-gyrate-flutter var(--sa-duration, 0.8s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-gyrate-flutter { 0% { transform: rotate(0deg) skewX(0deg); } 12.5% { transform: rotate(45deg) skewX(4deg); } 25% { transform: rotate(90deg) skewX(-4deg); } 37.5% { transform: rotate(135deg) skewX(4deg); } 50% { transform: rotate(180deg) skewX(-4deg); } 62.5% { transform: rotate(225deg) skewX(4deg); } 75% { transform: rotate(270deg) skewX(-4deg); } 87.5% { transform: rotate(315deg) skewX(4deg); } 100% { transform: rotate(360deg) skewX(0deg); } } .sa-gyrate-lean { animation: sa-gyrate-lean var(--sa-duration, 1.7s) var(--sa-timing, ease) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-gyrate-lean { 0% { transform: rotate(0deg) skewX(0deg); } 30% { transform: rotate(108deg) skewX(10deg); } 80% { transform: rotate(288deg) skewX(-4deg); } 100% { transform: rotate(360deg) skewX(0deg); } } .sa-gyrate-shear { animation: sa-gyrate-shear var(--sa-duration, 2.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-gyrate-shear { 0% { transform: rotate(0deg) skewY(0deg); } 50% { transform: rotate(180deg) skewY(14deg); } 100% { transform: rotate(360deg) skewY(0deg); } } .sa-spin-urgent { animation: sa-spin-urgent var(--sa-duration, 0.4s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-spin-urgent { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.04); } 100% { transform: rotate(360deg) scale(1); } } .sa-spin-blitz { animation: sa-spin-blitz var(--sa-duration, 0.35s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-spin-blitz { 0% { transform: rotate(0deg); opacity: 1; } 50% { transform: rotate(180deg); opacity: 0.85; } 100% { transform: rotate(360deg); opacity: 1; } } .sa-spin-frenzy { animation: sa-spin-frenzy var(--sa-duration, 0.3s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-spin-frenzy { 0% { transform: rotate(0deg); } 20% { transform: rotate(80deg); } 35% { transform: rotate(150deg); } 50% { transform: rotate(175deg); } 65% { transform: rotate(260deg); } 80% { transform: rotate(340deg); } 100% { transform: rotate(360deg); } } .sa-spin-dash { animation: sa-spin-dash var(--sa-duration, 0.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-spin-dash { 0% { transform: rotate(0deg) scale(1, 1); } 50% { transform: rotate(180deg) scale(1.15, 0.9); } 100% { transform: rotate(360deg) scale(1, 1); } } .sa-spin-stately { animation: sa-spin-stately var(--sa-duration, 3.6s) var(--sa-timing, cubic-bezier(0.45, 0, 0.15, 1)) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-spin-stately { to { transform: rotate(360deg); } } .sa-spin-regal { animation: sa-spin-regal var(--sa-duration, 4.5s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-spin-regal { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.03); } 100% { transform: rotate(360deg) scale(1); } } .sa-spin-ponder { animation: sa-spin-ponder var(--sa-duration, 5s) var(--sa-timing, ease) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-spin-ponder { 0% { transform: rotate(0deg); } 20% { transform: rotate(0deg); } 25% { transform: rotate(90deg); } 45% { transform: rotate(90deg); } 50% { transform: rotate(180deg); } 70% { transform: rotate(180deg); } 75% { transform: rotate(270deg); } 95% { transform: rotate(270deg); } 100% { transform: rotate(360deg); } } .sa-spin-drift-slow { animation: sa-spin-drift-slow var(--sa-duration, 4.2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-spin-drift-slow { 0% { transform: rotate(0deg) translate(var(--sa-distance, 2px), 0px); } 25% { transform: rotate(90deg) translate(0px, var(--sa-distance, 2px)); } 50% { transform: rotate(180deg) translate(calc(var(--sa-distance, 2px) * -1), 0px); } 75% { transform: rotate(270deg) translate(0px, calc(var(--sa-distance, 2px) * -1)); } 100% { transform: rotate(360deg) translate(var(--sa-distance, 2px), 0px); } } .sa-spin-pendulum { animation: sa-spin-pendulum var(--sa-duration, 1.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-spin-pendulum { 0% { transform: rotate(0deg); } 50% { transform: rotate(170deg); } 100% { transform: rotate(0deg); } } .sa-spin-seesaw { animation: sa-spin-seesaw var(--sa-duration, 2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-spin-seesaw { 0% { transform: rotate(0deg); } 33% { transform: rotate(90deg); } 66% { transform: rotate(-90deg); } 100% { transform: rotate(0deg); } } .sa-spin-tug { animation: sa-spin-tug var(--sa-duration, 1.6s) var(--sa-timing, ease) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-spin-tug { 0% { transform: rotate(0deg); } 60% { transform: rotate(270deg); } 75% { transform: rotate(210deg); } 100% { transform: rotate(360deg); } } .sa-spin-waver { animation: sa-spin-waver var(--sa-duration, 2.2s) var(--sa-timing, ease) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-spin-waver { 0% { transform: rotate(0deg); } 15% { transform: rotate(50deg); } 25% { transform: rotate(35deg); } 40% { transform: rotate(140deg); } 50% { transform: rotate(125deg); } 65% { transform: rotate(230deg); } 75% { transform: rotate(215deg); } 90% { transform: rotate(320deg); } 100% { transform: rotate(360deg); } } .sa-orbit-tick { animation: sa-orbit-tick var(--sa-duration, 2.2s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-orbit-tick { 0% { transform: rotate(0deg) translate(var(--sa-distance, 4px), 0px); } 22% { transform: rotate(0deg) translate(var(--sa-distance, 4px), 0px); } 25% { transform: rotate(90deg) translate(0px, var(--sa-distance, 4px)); } 47% { transform: rotate(90deg) translate(0px, var(--sa-distance, 4px)); } 50% { transform: rotate(180deg) translate(calc(var(--sa-distance, 4px) * -1), 0px); } 72% { transform: rotate(180deg) translate(calc(var(--sa-distance, 4px) * -1), 0px); } 75% { transform: rotate(270deg) translate(0px, calc(var(--sa-distance, 4px) * -1)); } 97% { transform: rotate(270deg) translate(0px, calc(var(--sa-distance, 4px) * -1)); } 100% { transform: rotate(360deg) translate(var(--sa-distance, 4px), 0px); } } .sa-spin-windup-fast { animation: sa-spin-windup-fast var(--sa-duration, 0.5s) var(--sa-timing, cubic-bezier(0.55, 0, 0.85, 0.35)) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-spin-windup-fast { 0% { transform: rotate(0deg) scale(1); } 85% { transform: rotate(324deg) scale(1); } 100% { transform: rotate(360deg) scale(1.06); } } .sa-gyrate-pulse { animation: sa-gyrate-pulse var(--sa-duration, 1.9s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-gyrate-pulse { 0% { transform: rotate(0deg) skewX(0deg) scale(1); } 25% { transform: rotate(90deg) skewX(7deg) scale(1.06); } 50% { transform: rotate(180deg) skewX(0deg) scale(1); } 75% { transform: rotate(270deg) skewX(-7deg) scale(1.06); } 100% { transform: rotate(360deg) skewX(0deg) scale(1); } } .sa-scan-flash-sweep { animation: sa-scan-flash-sweep var(--sa-duration, 1.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-scan-flash-sweep { 0%, 85%, 100% { filter: brightness(1); opacity: 0.8; } 50% { filter: brightness(1.5); opacity: 1; } } .sa-scan-pulse-line { animation: sa-scan-pulse-line var(--sa-duration, 2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-scan-pulse-line { 0% { filter: brightness(1); opacity: 0.75; } 15% { filter: brightness(1.4); opacity: 1; } 30% { filter: brightness(1); opacity: 0.75; } 65% { filter: brightness(1.4); opacity: 1; } 80%, 100% { filter: brightness(1); opacity: 0.75; } } .sa-scan-glow-pass { animation: sa-scan-glow-pass var(--sa-duration, 2.2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-scan-glow-pass { 0%, 100% { filter: brightness(1) saturate(1); opacity: 0.8; } 50% { filter: brightness(1.3) saturate(1.2); opacity: 1; } } .sa-scan-dim-sweep { animation: sa-scan-dim-sweep var(--sa-duration, 1.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-scan-dim-sweep { 0%, 100% { filter: brightness(1); opacity: 1; } 50% { filter: brightness(0.6); opacity: 0.7; } } .sa-scan-soft-pass { animation: sa-scan-soft-pass var(--sa-duration, 2.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-scan-soft-pass { 0% { opacity: 0.85; filter: brightness(1); } 25% { opacity: 0.9; filter: brightness(1.1); } 50% { opacity: 1; filter: brightness(1.2); } 75% { opacity: 0.9; filter: brightness(1.1); } 100% { opacity: 0.85; filter: brightness(1); } } .sa-scan-sharp-pass { animation: sa-scan-sharp-pass var(--sa-duration, 0.9s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-scan-sharp-pass { 0%, 40%, 60%, 100% { filter: brightness(1); opacity: 0.75; } 48%, 52% { filter: brightness(1.8); opacity: 1; } } .sa-scan-reverse-sweep { animation: sa-scan-reverse-sweep var(--sa-duration, 1.5s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-scan-reverse-sweep { 0% { filter: brightness(1); opacity: 0.8; } 10% { filter: brightness(1.6); opacity: 1; } 100% { filter: brightness(1); opacity: 0.8; } } .sa-scan-corner-sweep { animation: sa-scan-corner-sweep var(--sa-duration, 1.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-scan-corner-sweep { 0%, 100% { filter: brightness(1); opacity: 0.85; transform: skewX(0deg); } 50% { filter: brightness(1.35); opacity: 1; transform: skewX(2deg); } } .sa-shimmer-vertical { background-size: 100% 200%; animation: sa-shimmer-vertical var(--sa-duration, 1.4s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-shimmer-vertical { 0% { background-position: 0 150%; } 100% { background-position: 0 -50%; } } .sa-shimmer-vertical-reverse { background-size: 100% 200%; animation: sa-shimmer-vertical-reverse var(--sa-duration, 1.4s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-shimmer-vertical-reverse { 0% { background-position: 0 -50%; } 100% { background-position: 0 150%; } } .sa-shimmer-vertical-soft { background-size: 100% 200%; animation: sa-shimmer-vertical-soft var(--sa-duration, 2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-shimmer-vertical-soft { 0%, 10% { background-position: 0 130%; } 90%, 100% { background-position: 0 -30%; } } .sa-shimmer-vertical-fade { background-size: 100% 200%; animation: sa-shimmer-vertical-fade var(--sa-duration, 1.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-shimmer-vertical-fade { 0% { background-position: 0 150%; opacity: 0.5; } 50% { background-position: 0 50%; opacity: 1; } 100% { background-position: 0 -50%; opacity: 0.5; } } .sa-shimmer-vertical-bounce { background-size: 100% 200%; animation: sa-shimmer-vertical-bounce var(--sa-duration, 1.8s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-shimmer-vertical-bounce { 0% { background-position: 0 140%; } 60% { background-position: 0 -10%; } 80% { background-position: 0 10%; } 100% { background-position: 0 -50%; } } .sa-shimmer-vertical-pause { background-size: 100% 200%; animation: sa-shimmer-vertical-pause var(--sa-duration, 2.2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-shimmer-vertical-pause { 0% { background-position: 0 150%; } 70% { background-position: 0 -50%; } 100% { background-position: 0 -50%; } } .sa-shimmer-vertical-tight { background-size: 100% 140%; animation: sa-shimmer-vertical-tight var(--sa-duration, 1.3s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-shimmer-vertical-tight { 0% { background-position: 0 120%; } 100% { background-position: 0 -20%; } } .sa-radar-scan { animation: sa-radar-scan var(--sa-duration, 1.8s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-radar-scan { 0% { transform: scale(0.6); opacity: 0.7; } 40% { transform: scale(1.1); opacity: 0.4; } 70% { transform: scale(1.5); opacity: 0.15; } 100% { transform: scale(0.6); opacity: 0.7; } } .sa-radar-scan-tight { animation: sa-radar-scan-tight var(--sa-duration, 1.4s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-radar-scan-tight { 0% { transform: scale(0.85); opacity: 0.8; } 50% { transform: scale(1.15); opacity: 0.3; } 100% { transform: scale(0.85); opacity: 0.8; } } .sa-radar-scan-wide { animation: sa-radar-scan-wide var(--sa-duration, 2.2s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-radar-scan-wide { 0% { transform: scale(0.5); opacity: 0.85; } 45% { transform: scale(1.2); opacity: 0.35; } 80% { transform: scale(1.7); opacity: 0.05; } 100% { transform: scale(0.5); opacity: 0.85; } } .sa-radar-scan-fast { animation: sa-radar-scan-fast var(--sa-duration, 1s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-radar-scan-fast { 0% { transform: scale(0.7); opacity: 0.8; } 30% { transform: scale(1.3); opacity: 0.2; } 100% { transform: scale(0.7); opacity: 0.8; } } .sa-radar-scan-slow { animation: sa-radar-scan-slow var(--sa-duration, 2.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-radar-scan-slow { 0% { transform: scale(0.6); opacity: 0.75; } 25% { transform: scale(0.9); opacity: 0.55; } 50% { transform: scale(1.2); opacity: 0.35; } 75% { transform: scale(1.5); opacity: 0.15; } 100% { transform: scale(0.6); opacity: 0.75; } } .sa-radar-pulse-scan { animation: sa-radar-pulse-scan var(--sa-duration, 2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-radar-pulse-scan { 0% { transform: scale(0.6); opacity: 0.8; } 30% { transform: scale(1); opacity: 0.5; } 35% { transform: scale(1.05); opacity: 0.55; } 70% { transform: scale(1.4); opacity: 0.1; } 100% { transform: scale(0.6); opacity: 0.8; } } .sa-radar-scan-soft { animation: sa-radar-scan-soft var(--sa-duration, 2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-radar-scan-soft { 0% { transform: scale(0.9); opacity: 0.7; filter: brightness(1); } 50% { transform: scale(1.15); opacity: 0.3; filter: brightness(1.1); } 100% { transform: scale(0.9); opacity: 0.7; filter: brightness(1); } } .sa-fill-loop { transform-origin: center left; animation: sa-fill-loop var(--sa-duration, 1.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-fill-loop { 0% { transform: scaleX(0); } 70% { transform: scaleX(1); } 100% { transform: scaleX(0); } } .sa-fill-loop-fast { transform-origin: center left; animation: sa-fill-loop-fast var(--sa-duration, 1.2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-fill-loop-fast { 0% { transform: scaleX(0); } 35%, 40% { transform: scaleX(1); } 41%, 100% { transform: scaleX(0); } } .sa-fill-loop-slow { transform-origin: center left; animation: sa-fill-loop-slow var(--sa-duration, 2.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-fill-loop-slow { 0% { transform: scaleX(0); } 20% { transform: scaleX(0.3); } 50% { transform: scaleX(0.6); } 85% { transform: scaleX(1); } 100% { transform: scaleX(0); } } .sa-fill-hold-reset { transform-origin: center left; animation: sa-fill-hold-reset var(--sa-duration, 2.2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-fill-hold-reset { 0% { transform: scaleX(0); } 50%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0); } } .sa-fill-fade-reset { transform-origin: center left; animation: sa-fill-fade-reset var(--sa-duration, 2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-fill-fade-reset { 0% { transform: scaleX(0); opacity: 1; } 60% { transform: scaleX(1); opacity: 1; } 80% { transform: scaleX(1); opacity: 0; } 100% { transform: scaleX(0); opacity: 1; } } .sa-fill-bounce-loop { transform-origin: center left; animation: sa-fill-bounce-loop var(--sa-duration, 2s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-fill-bounce-loop { 0% { transform: scaleX(0); } 60% { transform: scaleX(1.08); } 75% { transform: scaleX(0.96); } 85% { transform: scaleX(1); } 100% { transform: scaleX(0); } } .sa-fill-step-loop { transform-origin: center left; animation: sa-fill-step-loop var(--sa-duration, 2.2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-fill-step-loop { 0% { transform: scaleX(0); } 20%, 21% { transform: scaleX(0.25); } 40%, 41% { transform: scaleX(0.5); } 60%, 61% { transform: scaleX(0.75); } 85% { transform: scaleX(1); } 100% { transform: scaleX(0); } } .sa-fill-elastic-loop { transform-origin: center left; animation: sa-fill-elastic-loop var(--sa-duration, 2.2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-fill-elastic-loop { 0% { transform: scaleX(0); } 40% { transform: scaleX(1.05); } 55% { transform: scaleX(0.92); } 65% { transform: scaleX(1.03); } 75% { transform: scaleX(0.98); } 85% { transform: scaleX(1); } 100% { transform: scaleX(0); } } .sa-shimmer-double-sweep { background-size: 200% 100%; animation: sa-shimmer-double-sweep var(--sa-duration, 2.2s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-shimmer-double-sweep { 0% { background-position: 150% 0; } 45% { background-position: -50% 0; } 50% { background-position: 150% 0; } 95% { background-position: -50% 0; } 100% { background-position: 150% 0; } } .sa-shimmer-double-tight { background-size: 200% 100%; animation: sa-shimmer-double-tight var(--sa-duration, 1.8s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-shimmer-double-tight { 0% { background-position: 150% 0; } 35% { background-position: -50% 0; } 40% { background-position: 150% 0; } 75% { background-position: -50% 0; } 100% { background-position: 150% 0; } } .sa-shimmer-double-wide { background-size: 200% 100%; animation: sa-shimmer-double-wide var(--sa-duration, 2.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-shimmer-double-wide { 0% { background-position: 150% 0; } 20% { background-position: -50% 0; } 45% { background-position: -50% 0; } 65% { background-position: 150% 0; } 85% { background-position: -50% 0; } 100% { background-position: 150% 0; } } .sa-shimmer-double-fast { background-size: 200% 100%; animation: sa-shimmer-double-fast var(--sa-duration, 1.6s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-shimmer-double-fast { 0% { background-position: 150% 0; } 15% { background-position: -50% 0; } 30% { background-position: 150% 0; } 45%, 100% { background-position: -50% 0; } } .sa-shimmer-double-fade { background-size: 200% 100%; animation: sa-shimmer-double-fade var(--sa-duration, 2.2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-shimmer-double-fade { 0% { background-position: 150% 0; opacity: 1; } 40% { background-position: -50% 0; opacity: 1; } 50% { opacity: 0.4; } 60% { background-position: 150% 0; opacity: 1; } 100% { background-position: -50% 0; opacity: 1; } } .sa-shimmer-double-stagger { background-size: 200% 100%; animation: sa-shimmer-double-stagger var(--sa-duration, 2s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-shimmer-double-stagger { 0% { background-position: 150% 0; } 38% { background-position: -50% 0; } 55% { background-position: 100% 0; } 90% { background-position: -50% 0; } 100% { background-position: 150% 0; } } .sa-reading-wave-sweep { animation: sa-reading-wave-sweep var(--sa-duration, 1.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-reading-wave-sweep { 0% { opacity: 0.5; transform: translateX(calc(var(--sa-distance, 6px) * -1)); } 50% { opacity: 1; transform: translateX(var(--sa-distance, 6px)); } 100% { opacity: 0.5; transform: translateX(calc(var(--sa-distance, 6px) * -1)); } } .sa-reading-wave-slow { animation: sa-reading-wave-slow var(--sa-duration, 3s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-reading-wave-slow { 0% { opacity: 0.5; transform: translateX(calc(var(--sa-distance, 6px) * -1)); } 20% { opacity: 0.6; transform: translateX(calc(var(--sa-distance, 6px) * -0.5)); } 50% { opacity: 1; transform: translateX(var(--sa-distance, 6px)); } 80% { opacity: 0.6; transform: translateX(calc(var(--sa-distance, 6px) * 0.5)); } 100% { opacity: 0.5; transform: translateX(calc(var(--sa-distance, 6px) * -1)); } } .sa-reading-wave-step { animation: sa-reading-wave-step var(--sa-duration, 2.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-reading-wave-step { 0%, 20% { opacity: 0.5; transform: translateX(calc(var(--sa-distance, 8px) * -1)); } 25%, 45% { opacity: 1; transform: translateX(0); } 50%, 70% { opacity: 0.5; transform: translateX(var(--sa-distance, 8px)); } 75%, 100% { opacity: 1; transform: translateX(0); } } .sa-reading-wave-pause { animation: sa-reading-wave-pause var(--sa-duration, 2.2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-reading-wave-pause { 0% { opacity: 0.55; } 30%, 60% { opacity: 1; } 100% { opacity: 0.55; } } .sa-saccade-scan { animation: sa-saccade-scan var(--sa-duration, 1.2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-saccade-scan { 0% { opacity: 0.6; transform: translateX(calc(var(--sa-distance, 8px) * -1)); } 10% { opacity: 1; transform: translateX(0); } 20% { opacity: 0.6; transform: translateX(calc(var(--sa-distance, 8px) * -1)); } 55% { opacity: 1; transform: translateX(var(--sa-distance, 8px)); } 65%, 100% { opacity: 0.6; transform: translateX(calc(var(--sa-distance, 8px) * -1)); } } .sa-processing-wave { animation: sa-processing-wave var(--sa-duration, 2.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-processing-wave { 0% { opacity: 0.6; filter: brightness(1); } 50% { opacity: 1; filter: brightness(1.15); } 100% { opacity: 0.6; filter: brightness(1); } } .sa-reading-wave-soft { animation: sa-reading-wave-soft var(--sa-duration, 2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-reading-wave-soft { 0% { opacity: 0.75; transform: translateX(calc(var(--sa-distance, 3px) * -1)); } 50% { opacity: 0.95; transform: translateX(var(--sa-distance, 3px)); } 100% { opacity: 0.75; transform: translateX(calc(var(--sa-distance, 3px) * -1)); } } .sa-flicker-scan { animation: sa-flicker-scan var(--sa-duration, 1.2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-flicker-scan { 0% { opacity: 1; } 10% { opacity: 0.4; } 20% { opacity: 1; } 30% { opacity: 0.5; } 40%, 100% { opacity: 1; } } .sa-flicker-scan-fast { animation: sa-flicker-scan-fast var(--sa-duration, 0.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-flicker-scan-fast { 0% { opacity: 1; } 5% { opacity: 0.3; } 10% { opacity: 1; } 15% { opacity: 0.3; } 20%, 100% { opacity: 1; } } .sa-flicker-scan-strobe { animation: sa-flicker-scan-strobe var(--sa-duration, 1.4s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-flicker-scan-strobe { 0%, 100% { opacity: 1; } 12.5% { opacity: 0.3; } 25% { opacity: 1; } 37.5% { opacity: 0.3; } 50% { opacity: 1; } 62.5% { opacity: 0.3; } 75% { opacity: 1; } 87.5% { opacity: 0.3; } } .sa-flicker-scan-double { animation: sa-flicker-scan-double var(--sa-duration, 1.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-flicker-scan-double { 0% { opacity: 1; } 8% { opacity: 0.35; } 16% { opacity: 1; } 24% { opacity: 0.35; } 32%, 55% { opacity: 1; } 63% { opacity: 0.35; } 71% { opacity: 1; } 79% { opacity: 0.35; } 87%, 100% { opacity: 1; } } .sa-flicker-scan-quick { animation: sa-flicker-scan-quick var(--sa-duration, 2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-flicker-scan-quick { 0%, 92% { opacity: 1; } 94% { opacity: 0.3; } 96% { opacity: 1; } 98% { opacity: 0.3; } 100% { opacity: 1; } } .sa-flicker-scan-energetic { animation: sa-flicker-scan-energetic var(--sa-duration, 1.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-flicker-scan-energetic { 0% { opacity: 1; filter: brightness(1); } 18% { opacity: 0.5; filter: brightness(1.3); } 33% { opacity: 1; filter: brightness(1); } 47% { opacity: 0.5; filter: brightness(1.3); } 68% { opacity: 1; filter: brightness(1); } 82% { opacity: 0.5; filter: brightness(1.3); } 100% { opacity: 1; filter: brightness(1); } } .sa-flicker-scan-rapid { animation: sa-flicker-scan-rapid var(--sa-duration, 1s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-flicker-scan-rapid { 0%, 100% { opacity: 1; } 10% { opacity: 0.6; } 20% { opacity: 1; } 30% { opacity: 0.6; } 40% { opacity: 1; } 50% { opacity: 0.6; } 60% { opacity: 1; } 70% { opacity: 0.6; } 80% { opacity: 1; } 90% { opacity: 0.6; } } /* ================================================================== loading-4 Bouncing and pulsing single-element loading indicators. An ongoing, indeterminate state. Always loops. */ .sa-pulse-dot-soft { animation: sa-pulse-dot-soft var(--sa-duration, 1.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-pulse-dot-soft { 0%, 100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.15); opacity: 1; } } .sa-pulse-dot-sharp { animation: sa-pulse-dot-sharp var(--sa-duration, 0.7s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-pulse-dot-sharp { 0% { transform: scale(1); opacity: 1; } 20% { transform: scale(1.35); opacity: 0.7; } 100% { transform: scale(1); opacity: 1; } } .sa-pulse-dot-slow { animation: sa-pulse-dot-slow var(--sa-duration, 2.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-pulse-dot-slow { 0% { transform: scale(1); opacity: 0.5; } 60% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: 0.5; } } .sa-heartbeat-pulse { animation: sa-heartbeat-pulse var(--sa-duration, 1.2s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-heartbeat-pulse { 0% { transform: scale(1); } 14% { transform: scale(1.3); } 28% { transform: scale(1); } 42% { transform: scale(1.2); } 70% { transform: scale(1); } 100% { transform: scale(1); } } .sa-pulse-fade-dot { animation: sa-pulse-fade-dot var(--sa-duration, 1.3s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-pulse-fade-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } } .sa-pulse-grow-hold { animation: sa-pulse-grow-hold var(--sa-duration, 1.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-pulse-grow-hold { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } } .sa-pulse-blur-dot { animation: sa-pulse-blur-dot var(--sa-duration, 1.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-pulse-blur-dot { 0%, 100% { transform: scale(1); filter: blur(0); } 50% { transform: scale(1.05); filter: blur(2px); } } .sa-pulse-glow-dot { animation: sa-pulse-glow-dot var(--sa-duration, 1.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-pulse-glow-dot { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.08); filter: brightness(1.6); } } .sa-sonar-ping { animation: sa-sonar-ping var(--sa-duration, 1.8s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-sonar-ping { 0% { transform: scale(1); opacity: 0.8; } 70% { transform: scale(2); opacity: 0; } 100% { transform: scale(1); opacity: 0; } } .sa-sonar-ping-tight { animation: sa-sonar-ping-tight var(--sa-duration, 1s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-sonar-ping-tight { 0% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.6); opacity: 0.2; } 100% { transform: scale(2); opacity: 0; } } .sa-squash-pulse-dot { animation: sa-squash-pulse-dot var(--sa-duration, 1.1s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-squash-pulse-dot { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.3, 0.7); } } .sa-ball-bounce-basic { animation: sa-ball-bounce-basic var(--sa-duration, 0.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-ball-bounce-basic { 0%, 100% { transform: translateY(0) scaleY(1); } 40% { transform: translateY(calc(-1 * var(--sa-distance, 20px))) scaleY(1); } 50% { transform: translateY(calc(-1 * var(--sa-distance, 20px))) scaleY(1); } 60% { transform: translateY(0) scaleY(1); } 65% { transform: translateY(0) scaleY(0.8); } 75% { transform: translateY(0) scaleY(1); } } .sa-ball-bounce-squash { animation: sa-ball-bounce-squash var(--sa-duration, 0.9s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-ball-bounce-squash { 0%, 100% { transform: translateY(0) scale(1, 1); } 35% { transform: translateY(calc(-1 * var(--sa-distance, 22px))) scale(1, 1); } 62% { transform: translateY(0) scale(1.4, 0.6); } 75% { transform: translateY(0) scale(0.9, 1.1); } 90% { transform: translateY(0) scale(1, 1); } } .sa-ball-bounce-double { animation: sa-ball-bounce-double var(--sa-duration, 1.1s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-ball-bounce-double { 0%, 100% { transform: translateY(0); } 15% { transform: translateY(calc(-1 * var(--sa-distance, 16px))); } 30% { transform: translateY(0); } 42% { transform: translateY(calc(-1 * var(--sa-distance, 8px))); } 54% { transform: translateY(0); } } .sa-ball-bounce-triple { animation: sa-ball-bounce-triple var(--sa-duration, 1.3s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-ball-bounce-triple { 0%, 100% { transform: translateY(0); } 12% { transform: translateY(calc(-1 * var(--sa-distance, 18px))); } 24% { transform: translateY(0); } 34% { transform: translateY(calc(-1 * var(--sa-distance, 10px))); } 44% { transform: translateY(0); } 52% { transform: translateY(calc(-1 * var(--sa-distance, 4px))); } 60% { transform: translateY(0); } } .sa-ball-bounce-wobble { animation: sa-ball-bounce-wobble var(--sa-duration, 0.9s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-ball-bounce-wobble { 0%, 100% { transform: translateY(0) rotate(0deg); } 40% { transform: translateY(calc(-1 * var(--sa-distance, 18px))) rotate(-8deg); } 60% { transform: translateY(0) rotate(8deg); } 80% { transform: translateY(0) rotate(0deg); } } .sa-ball-bounce-low { animation: sa-ball-bounce-low var(--sa-duration, 0.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-ball-bounce-low { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(-1 * var(--sa-distance, 6px))); } } .sa-ball-bounce-high { animation: sa-ball-bounce-high var(--sa-duration, 1.2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-ball-bounce-high { 0%, 100% { transform: translateY(0) scaleY(1); } 35% { transform: translateY(calc(-1 * var(--sa-distance, 32px))) scaleY(1); } 50% { transform: translateY(calc(-1 * var(--sa-distance, 32px))) scaleY(1); } 65% { transform: translateY(0) scaleY(1); } 70% { transform: translateY(0) scaleY(0.75); } 80% { transform: translateY(0) scaleY(1); } } .sa-ball-bounce-fade { animation: sa-ball-bounce-fade var(--sa-duration, 1s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-ball-bounce-fade { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(calc(-1 * var(--sa-distance, 20px))); opacity: 0.4; } } .sa-ball-drop-squash { animation: sa-ball-drop-squash var(--sa-duration, 1s) var(--sa-timing, ease-in) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-ball-drop-squash { 0% { transform: translateY(calc(-1 * var(--sa-distance, 24px))) scale(1, 1); } 60% { transform: translateY(0) scale(1, 1); } 70% { transform: translateY(0) scale(1.4, 0.6); } 85% { transform: translateY(0) scale(0.9, 1.05); } 100% { transform: translateY(calc(-1 * var(--sa-distance, 24px))) scale(1, 1); } } .sa-ball-hop-lean { animation: sa-ball-hop-lean var(--sa-duration, 0.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-ball-hop-lean { 0%, 100% { transform: translateY(0) rotate(0deg); } 40% { transform: translateY(calc(-1 * var(--sa-distance, 16px))) rotate(12deg); } 70% { transform: translateY(0) rotate(0deg); } } .sa-bar-pulse-height { animation: sa-bar-pulse-height var(--sa-duration, 1s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: bottom; } @keyframes sa-bar-pulse-height { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.5); } } .sa-bar-pulse-fade { animation: sa-bar-pulse-fade var(--sa-duration, 1.1s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: bottom; } @keyframes sa-bar-pulse-fade { 0%, 100% { transform: scaleY(1); opacity: 0.6; } 50% { transform: scaleY(1.4); opacity: 1; } } .sa-bar-fill-snap { animation: sa-bar-fill-snap var(--sa-duration, 1.2s) var(--sa-timing, ease-in) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: left; } @keyframes sa-bar-fill-snap { 0% { transform: scaleX(0); } 85% { transform: scaleX(1); } 86% { transform: scaleX(1); } 100% { transform: scaleX(0); } } .sa-bar-drain-reset { animation: sa-bar-drain-reset var(--sa-duration, 1.2s) var(--sa-timing, ease-in) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: left; } @keyframes sa-bar-drain-reset { 0% { transform: scaleX(1); } 85% { transform: scaleX(0); } 86% { transform: scaleX(0); } 100% { transform: scaleX(1); } } .sa-bar-tick-step { animation: sa-bar-tick-step var(--sa-duration, 1.5s) var(--sa-timing, steps(1, end)) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: left; } @keyframes sa-bar-tick-step { 0% { transform: scaleX(0); } 25% { transform: scaleX(0.33); } 50% { transform: scaleX(0.66); } 75% { transform: scaleX(1); } 99% { transform: scaleX(1); } 100% { transform: scaleX(0); } } .sa-ring-breathe { animation: sa-ring-breathe var(--sa-duration, 2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-ring-breathe { 0%, 100% { transform: scale(0.9); opacity: 0.7; } 50% { transform: scale(1.1); opacity: 1; } } .sa-ring-pulse-glow { animation: sa-ring-pulse-glow var(--sa-duration, 1.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-ring-pulse-glow { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.12); filter: brightness(1.5); } } .sa-ring-expand-fade { animation: sa-ring-expand-fade var(--sa-duration, 1.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-ring-expand-fade { 0%, 100% { transform: scale(0.8); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.3; } } .sa-hourglass-tilt { animation: sa-hourglass-tilt var(--sa-duration, 2.2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-hourglass-tilt { 0%, 100% { transform: rotate(0deg) scaleY(1); } 50% { transform: rotate(8deg) scaleY(0.9); } } .sa-hourglass-flip { animation: sa-hourglass-flip var(--sa-duration, 2.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-hourglass-flip { 0% { transform: rotate(0deg) scale(1); } 45% { transform: rotate(170deg) scale(0.85); } 55% { transform: rotate(190deg) scale(0.85); } 100% { transform: rotate(360deg) scale(1); } } .sa-cursor-blink-scale { animation: sa-cursor-blink-scale var(--sa-duration, 1s) var(--sa-timing, steps(1, end)) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-cursor-blink-scale { 0%, 49% { opacity: 1; transform: scaleY(1); } 50%, 100% { opacity: 0; transform: scaleY(0.8); } } .sa-thinking-breathe { animation: sa-thinking-breathe var(--sa-duration, 2.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-thinking-breathe { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.06); opacity: 1; } } .sa-thinking-drift { animation: sa-thinking-drift var(--sa-duration, 2.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-thinking-drift { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(calc(-1 * var(--sa-distance, 3px))) scale(1.03); } } .sa-orbit-dot-pulse { animation: sa-orbit-dot-pulse var(--sa-duration, 1.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-orbit-dot-pulse { 0%, 100% { transform: translateX(0) scale(1); } 25% { transform: translateX(calc(var(--sa-distance, 4px))) scale(0.9); } 75% { transform: translateX(calc(-1 * var(--sa-distance, 4px))) scale(0.9); } } .sa-blip-pulse { animation: sa-blip-pulse var(--sa-duration, 1.8s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-blip-pulse { 0%, 80%, 100% { transform: scale(1); opacity: 0.4; } 90% { transform: scale(1.4); opacity: 1; } } .sa-beacon-pulse { animation: sa-beacon-pulse var(--sa-duration, 2.2s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-beacon-pulse { 0%, 70%, 100% { transform: scale(1); opacity: 0.5; filter: brightness(1); } 85% { transform: scale(1.2); opacity: 1; filter: brightness(1.5); } } .sa-stretch-pulse-vertical { animation: sa-stretch-pulse-vertical var(--sa-duration, 1s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-stretch-pulse-vertical { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.4); } } .sa-stretch-pulse-horizontal { animation: sa-stretch-pulse-horizontal var(--sa-duration, 1s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-stretch-pulse-horizontal { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(1.4); } } .sa-pulse-rock { animation: sa-pulse-rock var(--sa-duration, 1.3s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-pulse-rock { 0%, 100% { transform: rotate(0deg) scale(1); } 25% { transform: rotate(-6deg) scale(1.05); } 75% { transform: rotate(6deg) scale(1.05); } } .sa-pulse-tilt-shift { animation: sa-pulse-tilt-shift var(--sa-duration, 1.2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-pulse-tilt-shift { 0%, 100% { transform: translateY(0) rotate(0deg); opacity: 1; } 50% { transform: translateY(calc(-1 * var(--sa-distance, 2px))) rotate(4deg); opacity: 0.7; } } .sa-double-bounce-pause { animation: sa-double-bounce-pause var(--sa-duration, 1.4s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-double-bounce-pause { 0%, 100% { transform: translateY(0); } 15% { transform: translateY(calc(-1 * var(--sa-distance, 14px))); } 30% { transform: translateY(0); } 42% { transform: translateY(calc(-1 * var(--sa-distance, 8px))); } 54% { transform: translateY(0); } } .sa-micro-bounce-loop { animation: sa-micro-bounce-loop var(--sa-duration, 0.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-micro-bounce-loop { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(calc(-1 * var(--sa-distance, 5px))); } 50% { transform: translateY(0); } 75% { transform: translateY(calc(-1 * var(--sa-distance, 5px))); } } .sa-bounce-settle { animation: sa-bounce-settle var(--sa-duration, 1.5s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-bounce-settle { 0%, 100% { transform: translateY(0) scale(1); } 30% { transform: translateY(calc(-1 * var(--sa-distance, 18px))) scale(1); } 55% { transform: translateY(0) scale(0.88); } 70% { transform: translateY(0) scale(1.05); } 85% { transform: translateY(0) scale(0.98); } } .sa-pulse-expand-contract { animation: sa-pulse-expand-contract var(--sa-duration, 1.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-pulse-expand-contract { 0%, 100% { transform: scale(0.85); } 50% { transform: scale(1.25); } } .sa-pulse-veil { animation: sa-pulse-veil var(--sa-duration, 1.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-pulse-veil { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.15; transform: scale(0.95); } } .sa-pulse-dim-bright { animation: sa-pulse-dim-bright var(--sa-duration, 1.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-pulse-dim-bright { 0%, 100% { filter: brightness(1); opacity: 0.85; } 50% { filter: brightness(1.8); opacity: 1; } } .sa-pulse-soft-blur-fade { animation: sa-pulse-soft-blur-fade var(--sa-duration, 1.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-pulse-soft-blur-fade { 0%, 100% { filter: blur(0); opacity: 1; } 50% { filter: blur(3px); opacity: 0.5; } } .sa-loader-blob-pulse { animation: sa-loader-blob-pulse var(--sa-duration, 1.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-loader-blob-pulse { 0%, 100% { transform: scale(1, 1); } 25% { transform: scale(1.15, 0.9); } 50% { transform: scale(0.95, 1.1); } 75% { transform: scale(1.1, 0.95); } } .sa-loader-pip-bounce { animation: sa-loader-pip-bounce var(--sa-duration, 0.7s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-loader-pip-bounce { 0%, 100% { transform: translateY(0); opacity: 0.6; } 50% { transform: translateY(calc(-1 * var(--sa-distance, 8px))); opacity: 1; } } /* ================================================================== loading An ongoing, indeterminate state. Always loops. */ .sa-spin { animation: sa-spin var(--sa-duration, 1.1s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-spin { to { transform: rotate(360deg); } } .sa-spin-reverse { animation: sa-spin-reverse var(--sa-duration, 1.1s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-spin-reverse { to { transform: rotate(-360deg); } } /* Needs a gradient background from the caller, e.g. `background-image: linear-gradient(90deg, #eee 25%, #f7f7f7 50%, #eee 75%)` and `background-size: 200% 100%`. */ .sa-shimmer { background-size: 200% 100%; animation: sa-shimmer var(--sa-duration, 1.4s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-shimmer { 0% { background-position: 150% 0; } 100% { background-position: -50% 0; } } /* Three child elements (spans, dots) bounce in sequence. */ .sa-dots-bounce > * { display: inline-block; animation: sa-dots-bounce var(--sa-duration, 0.9s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } .sa-dots-bounce > *:nth-child(2) { animation-delay: calc(var(--sa-delay) + var(--sa-stagger)); } .sa-dots-bounce > *:nth-child(3) { animation-delay: calc(var(--sa-delay) + var(--sa-stagger) * 2); } @keyframes sa-dots-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-6px); opacity: 1; } } /* Needs `position: relative; overflow: hidden` on the container. Draws its own moving bar; the container itself is the track. Reads `currentColor`. */ .sa-progress-sweep { position: relative; overflow: hidden; } .sa-progress-sweep::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 40%; background: currentColor; border-radius: inherit; animation: sa-progress-sweep var(--sa-duration, 1.2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-progress-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } } .sa-drift-x { animation: sa-drift-x var(--sa-duration, 3.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-drift-x { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } } .sa-drift-x-wide { animation: sa-drift-x-wide var(--sa-duration, 4.2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-drift-x-wide { 0%, 100% { transform: translateX(0); } 40%, 60% { transform: translateX(7px); } } .sa-creep-x { animation: sa-creep-x var(--sa-duration, 5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-creep-x { 0% { transform: translateX(0); } 20% { transform: translateX(3px); } 30% { transform: translateX(3px); } 70% { transform: translateX(-2px); } 100% { transform: translateX(0); } } .sa-drift-x-tilt { animation: sa-drift-x-tilt var(--sa-duration, 3.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-drift-x-tilt { 0%, 100% { transform: translateX(0) rotate(0deg); } 50% { transform: translateX(4px) rotate(1.5deg); } } .sa-pendulum-drift { animation: sa-pendulum-drift var(--sa-duration, 4.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-pendulum-drift { 0% { transform: translateX(0); } 30% { transform: translateX(6px); } 70% { transform: translateX(-3px); } 100% { transform: translateX(0); } } .sa-drift-x-flicker { animation: sa-drift-x-flicker var(--sa-duration, 3.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-drift-x-flicker { 0%, 100% { transform: translateX(0); opacity: 1; } 50% { transform: translateX(4px); opacity: 0.92; } } .sa-float-diagonal { animation: sa-float-diagonal var(--sa-duration, 3.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-float-diagonal { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(4px, -5px); } } .sa-float-diagonal-reverse { animation: sa-float-diagonal-reverse var(--sa-duration, 3.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-float-diagonal-reverse { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-5px, 4px); } } .sa-float-diagonal-zigzag { animation: sa-float-diagonal-zigzag var(--sa-duration, 4.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-float-diagonal-zigzag { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(4px, -3px); } 50% { transform: translate(0, -5px); } 75% { transform: translate(-4px, -3px); } } .sa-float-diagonal-tilt { animation: sa-float-diagonal-tilt var(--sa-duration, 3.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-float-diagonal-tilt { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(3px, -4px) rotate(-1.5deg); } } .sa-float-diagonal-quick { animation: sa-float-diagonal-quick var(--sa-duration, 4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-float-diagonal-quick { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(4px, -4px); } } .sa-float-diagonal-triangle { animation: sa-float-diagonal-triangle var(--sa-duration, 5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-float-diagonal-triangle { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(4px, -3px); } 66% { transform: translate(-3px, -4px); } } .sa-float-breathe { animation: sa-float-breathe var(--sa-duration, 3.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-float-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4px) scale(1.02); } } .sa-float-swell { animation: sa-float-swell var(--sa-duration, 4.2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-float-swell { 0%, 100% { transform: translateY(0) scale(1); } 25% { transform: translateY(-2px) scale(1.025); } 50% { transform: translateY(-5px) scale(1); } 75% { transform: translateY(-2px) scale(0.985); } } .sa-float-pulse-soft { animation: sa-float-pulse-soft var(--sa-duration, 3.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-float-pulse-soft { 0%, 100% { transform: translateY(0) scale(1); opacity: 1; } 50% { transform: translateY(-4px) scale(1.015); opacity: 0.95; } } .sa-float-grow { animation: sa-float-grow var(--sa-duration, 4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-float-grow { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-5px) scale(1.03); } } .sa-float-breathe-wide { animation: sa-float-breathe-wide var(--sa-duration, 4.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-float-breathe-wide { 0%, 100% { transform: translateY(0) scale(1); } 20% { transform: translateY(-2px) scale(1.01); } 50% { transform: translateY(-6px) scale(1.03); } 80% { transform: translateY(-2px) scale(1.01); } } .sa-float-breathe-tilt { animation: sa-float-breathe-tilt var(--sa-duration, 3.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-float-breathe-tilt { 0%, 100% { transform: translateY(0) scale(1) rotate(0deg); } 50% { transform: translateY(-4px) scale(1.02) rotate(1deg); } } .sa-float-quick-rise { animation: sa-float-quick-rise var(--sa-duration, 3.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-float-quick-rise { 0%, 100% { transform: translateY(0); } 15% { transform: translateY(-6px); } } .sa-float-quick-fall { animation: sa-float-quick-fall var(--sa-duration, 3.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-float-quick-fall { 0%, 100% { transform: translateY(0); } 85% { transform: translateY(-6px); } } .sa-float-snap-up { animation: sa-float-snap-up var(--sa-duration, 4.2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-float-snap-up { 0%, 100% { transform: translateY(0); } 8%, 15% { transform: translateY(-6px); } } .sa-float-overshoot-settle { animation: sa-float-overshoot-settle var(--sa-duration, 4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-float-overshoot-settle { 0%, 100% { transform: translateY(0); } 20% { transform: translateY(-7px); } 35% { transform: translateY(-5px); } } .sa-float-lag { animation: sa-float-lag var(--sa-duration, 4.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-float-lag { 0%, 100% { transform: translateY(0); } 55%, 65% { transform: translateY(-1px); } 90% { transform: translateY(-6px); } } .sa-suspend { animation: sa-suspend var(--sa-duration, 8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-suspend { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } .sa-suspend-deep { animation: sa-suspend-deep var(--sa-duration, 10s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-suspend-deep { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(-1px); opacity: 0.97; } } .sa-suspend-tilt { animation: sa-suspend-tilt var(--sa-duration, 9s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-suspend-tilt { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(0.6deg); } } .sa-suspend-scale { animation: sa-suspend-scale var(--sa-duration, 9s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-suspend-scale { 0%, 45%, 55%, 100% { transform: scale(1); } 50% { transform: scale(1.008); } } .sa-suspend-drift { animation: sa-suspend-drift var(--sa-duration, 9.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-suspend-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(1px, -1px); } } .sa-breathe-slow-grow { animation: sa-breathe-slow-grow var(--sa-duration, 3.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-breathe-slow-grow { 0%, 100% { transform: scale(1); } 85% { transform: scale(1.035); } } .sa-breathe-quick-grow { animation: sa-breathe-quick-grow var(--sa-duration, 3.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-breathe-quick-grow { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.035); } } .sa-breathe-hold { animation: sa-breathe-hold var(--sa-duration, 4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-breathe-hold { 0%, 100% { transform: scale(1); } 30%, 60% { transform: scale(1.03); } } .sa-breathe-swell-deep { animation: sa-breathe-swell-deep var(--sa-duration, 4.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-breathe-swell-deep { 0%, 100% { transform: scale(1); } 10% { transform: scale(1.015); } 30% { transform: scale(1.05); } } .sa-breathe-flutter { animation: sa-breathe-flutter var(--sa-duration, 4.2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-breathe-flutter { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.02); } 35% { transform: scale(1.005); } 55% { transform: scale(1.03); } } .sa-breathe-float { animation: sa-breathe-float var(--sa-duration, 3.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-breathe-float { 0%, 100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.03) translateY(-3px); } } .sa-breathe-float-offset { animation: sa-breathe-float-offset var(--sa-duration, 4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-breathe-float-offset { 0%, 100% { transform: scale(1) translateY(0); } 40% { transform: scale(1.03) translateY(-1px); } 60% { transform: scale(1.01) translateY(-4px); } } .sa-breathe-float-micro { animation: sa-breathe-float-micro var(--sa-duration, 4.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-breathe-float-micro { 0%, 100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.012) translateY(-2px); } } .sa-breathe-float-deep { animation: sa-breathe-float-deep var(--sa-duration, 5.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-breathe-float-deep { 0%, 100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.045) translateY(-5px); } } .sa-breathe-float-fast { animation: sa-breathe-float-fast var(--sa-duration, 2.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-breathe-float-fast { 0%, 100% { transform: scale(1) translateY(0); } 33%, 66% { transform: scale(1.02) translateY(-2px); } } .sa-breathe-float-hold { animation: sa-breathe-float-hold var(--sa-duration, 4.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-breathe-float-hold { 0%, 100% { transform: scale(1) translateY(0); } 25%, 55% { transform: scale(1.03) translateY(-4px); } } .sa-hover-idle { animation: sa-hover-idle var(--sa-duration, 1.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-hover-idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } .sa-hover-idle-double { animation: sa-hover-idle-double var(--sa-duration, 1.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-hover-idle-double { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-2px); } 50% { transform: translateY(0); } 75% { transform: translateY(-1.5px); } } .sa-hover-flicker { animation: sa-hover-flicker var(--sa-duration, 1.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-hover-flicker { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(-1.5px); opacity: 0.94; } } .sa-hover-tick { animation: sa-hover-tick var(--sa-duration, 2.2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-hover-tick { 0%, 40%, 100% { transform: translateY(0); } 45%, 90% { transform: translateY(-2px); } } .sa-hover-tremble { animation: sa-hover-tremble var(--sa-duration, 1.3s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-hover-tremble { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(1px, -1px); } 50% { transform: translate(0, 0); } 75% { transform: translate(-1px, 1px); } } .sa-hover-idle-scale { animation: sa-hover-idle-scale var(--sa-duration, 1.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-hover-idle-scale { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-2px) scale(1.008); } } .sa-orbit-drift-quarter { animation: sa-orbit-drift-quarter var(--sa-duration, 6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-orbit-drift-quarter { 0%, 100% { transform: translate(0, -3px); } 25% { transform: translate(3px, 0); } 50% { transform: translate(0, 3px); } 75% { transform: translate(-3px, 0); } } .sa-orbit-drift-reverse { animation: sa-orbit-drift-reverse var(--sa-duration, 6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-orbit-drift-reverse { 0%, 100% { transform: translate(0, -3px); } 25% { transform: translate(-3px, 0); } 50% { transform: translate(0, 3px); } 75% { transform: translate(3px, 0); } } .sa-orbit-drift-wide { animation: sa-orbit-drift-wide var(--sa-duration, 7s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-orbit-drift-wide { 0%, 100% { transform: translate(0, -2px); } 25% { transform: translate(5px, 0); } 50% { transform: translate(0, 2px); } 75% { transform: translate(-5px, 0); } } .sa-orbit-drift-tight { animation: sa-orbit-drift-tight var(--sa-duration, 5.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-orbit-drift-tight { 0%, 100% { transform: translate(0, -2px) scale(1); } 25% { transform: translate(2px, 0) scale(1.015); } 50% { transform: translate(0, 2px) scale(1); } 75% { transform: translate(-2px, 0) scale(1.015); } } .sa-orbit-drift-slow { animation: sa-orbit-drift-slow var(--sa-duration, 9s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-orbit-drift-slow { 0%, 100% { transform: translate(0, -4px); } 25% { transform: translate(2px, 0); } 50% { transform: translate(0, 4px); } 75% { transform: translate(-2px, 0); } } .sa-glow-bright { animation: sa-glow-bright var(--sa-duration, 2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-glow-bright { 0%, 100% { filter: brightness(1) drop-shadow(0 0 0 transparent); } 50% { filter: brightness(1.12) drop-shadow(0 0 5px currentColor); } } .sa-glow-luminous { animation: sa-glow-luminous var(--sa-duration, 2.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-glow-luminous { 0%, 100% { filter: brightness(1) drop-shadow(0 0 0 transparent); } 50% { filter: brightness(1.1) drop-shadow(0 0 8px currentColor); } } .sa-glow-radiant-wide { animation: sa-glow-radiant-wide var(--sa-duration, 3s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-glow-radiant-wide { 0%, 100% { filter: brightness(1) drop-shadow(0 0 0 transparent); } 50% { filter: brightness(1.08) drop-shadow(0 0 16px currentColor); } } .sa-glow-brighten-quick { animation: sa-glow-brighten-quick var(--sa-duration, 1.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-glow-brighten-quick { 0%, 100% { filter: brightness(1) drop-shadow(0 0 0 transparent); } 50% { filter: brightness(1.15) drop-shadow(0 0 5px currentColor); } } .sa-glow-luster { animation: sa-glow-luster var(--sa-duration, 2.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-glow-luster { 0%, 100% { filter: brightness(1) drop-shadow(0 0 0 transparent); } 50% { filter: brightness(1.1) drop-shadow(0 0 10px currentColor); } } .sa-glow-shine-soft { animation: sa-glow-shine-soft var(--sa-duration, 2.2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-glow-shine-soft { 0%, 100% { filter: brightness(1) drop-shadow(0 0 0 transparent); } 50% { filter: brightness(1.06) drop-shadow(0 0 7px currentColor); } } .sa-glow-bloom-fade { animation: sa-glow-bloom-fade var(--sa-duration, 2s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-glow-bloom-fade { 0% { filter: drop-shadow(0 0 0 transparent); } 15% { filter: drop-shadow(0 0 9px currentColor); } 100% { filter: drop-shadow(0 0 0 transparent); } } .sa-glow-fade-bloom { animation: sa-glow-fade-bloom var(--sa-duration, 2.2s) var(--sa-timing, ease-in) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-glow-fade-bloom { 0% { filter: drop-shadow(0 0 0 transparent); } 85% { filter: drop-shadow(0 0 9px currentColor); } 100% { filter: drop-shadow(0 0 0 transparent); } } .sa-glow-fast-bloom { animation: sa-glow-fast-bloom var(--sa-duration, 2.6s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-glow-fast-bloom { 0% { filter: drop-shadow(0 0 0 transparent); } 10% { filter: drop-shadow(0 0 12px currentColor); } 100% { filter: drop-shadow(0 0 0 transparent); } } .sa-glow-ember { animation: sa-glow-ember var(--sa-duration, 3.2s) var(--sa-timing, ease-in) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-glow-ember { 0% { filter: brightness(1) drop-shadow(0 0 0 transparent); } 80% { filter: brightness(1.1) drop-shadow(0 0 14px currentColor); } 100% { filter: brightness(1) drop-shadow(0 0 0 transparent); } } .sa-glow-swell { animation: sa-glow-swell var(--sa-duration, 2.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-glow-swell { 0% { filter: drop-shadow(0 0 0 transparent); } 30% { filter: drop-shadow(0 0 11px currentColor); } 100% { filter: drop-shadow(0 0 0 transparent); } } .sa-glow-simmer { animation: sa-glow-simmer var(--sa-duration, 1.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-glow-simmer { 0%, 40%, 80%, 100% { filter: drop-shadow(0 0 0 transparent); } 20%, 60% { filter: drop-shadow(0 0 5px currentColor); } } .sa-shimmer-sheen { animation: sa-shimmer-sheen var(--sa-duration, 1.2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-shimmer-sheen { 0%, 100% { filter: brightness(1); opacity: 1; } 50% { filter: brightness(1.08); opacity: 0.96; } } .sa-shimmer-glint { animation: sa-shimmer-glint var(--sa-duration, 0.9s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-shimmer-glint { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.15); } } .sa-shimmer-veil { animation: sa-shimmer-veil var(--sa-duration, 1.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-shimmer-veil { 0%, 100% { filter: brightness(1) blur(0); } 50% { filter: brightness(1.05) blur(0.4px); } } .sa-shimmer-quick { animation: sa-shimmer-quick var(--sa-duration, 0.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-shimmer-quick { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.05); } } .sa-shimmer-flutter { animation: sa-shimmer-flutter var(--sa-duration, 1s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-shimmer-flutter { 0%, 20%, 40%, 100% { filter: brightness(1); } 10% { filter: brightness(1.06); } 30% { filter: brightness(1.05); } } .sa-shimmer-glaze { animation: sa-shimmer-glaze var(--sa-duration, 1.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-shimmer-glaze { 0%, 100% { filter: brightness(1) saturate(1); } 50% { filter: brightness(1.05) saturate(1.15); } } .sa-shimmer-subtle { animation: sa-shimmer-subtle var(--sa-duration, 1.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-shimmer-subtle { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.02); } } .sa-shimmer-drift { animation: sa-shimmer-drift var(--sa-duration, 3s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-shimmer-drift { 0%, 100% { filter: brightness(1) hue-rotate(0deg); } 50% { filter: brightness(1.05) hue-rotate(6deg); } } .sa-focus-breathe { animation: sa-focus-breathe var(--sa-duration, 3s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-focus-breathe { 0%, 100% { filter: blur(0); } 50% { filter: blur(0.6px); } } .sa-soft-focus-drift { animation: sa-soft-focus-drift var(--sa-duration, 4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-soft-focus-drift { 0%, 100% { filter: blur(0) brightness(1); } 50% { filter: blur(0.4px) brightness(0.98); } } .sa-dreamy-blur-pulse { animation: sa-dreamy-blur-pulse var(--sa-duration, 3.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-dreamy-blur-pulse { 0%, 100% { filter: blur(0); opacity: 1; } 50% { filter: blur(1px); opacity: 0.92; } } .sa-hazy-breathe { animation: sa-hazy-breathe var(--sa-duration, 5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-hazy-breathe { 0%, 100% { filter: blur(0.2px); } 50% { filter: blur(0.8px); } } .sa-blur-dream { animation: sa-blur-dream var(--sa-duration, 4.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-blur-dream { 0%, 100% { transform: scale(1); filter: blur(0); } 50% { transform: scale(1.01); filter: blur(1.2px); } } .sa-blur-soft-focus { animation: sa-blur-soft-focus var(--sa-duration, 2.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-blur-soft-focus { 0%, 100% { filter: blur(0); } 50% { filter: blur(0.3px); } } .sa-blur-veil-breathe { animation: sa-blur-veil-breathe var(--sa-duration, 3.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-blur-veil-breathe { 0%, 100% { filter: blur(0) drop-shadow(0 0 0 transparent); } 50% { filter: blur(0.5px) drop-shadow(0 0 3px currentColor); } } .sa-glow-breathe { animation: sa-glow-breathe var(--sa-duration, 3s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-glow-breathe { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); } 50% { transform: scale(1.02); filter: drop-shadow(0 0 8px currentColor); } } .sa-glow-pulse-soft { animation: sa-glow-pulse-soft var(--sa-duration, 2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-glow-pulse-soft { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.015); filter: brightness(1.05); } } .sa-glow-scale-breathe { animation: sa-glow-scale-breathe var(--sa-duration, 4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-glow-scale-breathe { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); } 50% { transform: scale(1.03); filter: drop-shadow(0 0 6px currentColor); } } .sa-glow-gentle-swell { animation: sa-glow-gentle-swell var(--sa-duration, 3.4s) var(--sa-timing, ease-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-glow-gentle-swell { 0% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); } 25% { transform: scale(1.025); filter: drop-shadow(0 0 9px currentColor); } 100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); } } .sa-glow-drift-scale { animation: sa-glow-drift-scale var(--sa-duration, 5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-glow-drift-scale { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.02); filter: brightness(1.06); } } .sa-two-stage-glow { animation: sa-two-stage-glow var(--sa-duration, 2.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-two-stage-glow { 0%, 100% { filter: drop-shadow(0 0 0 transparent); } 20%, 35% { filter: drop-shadow(0 0 8px currentColor); } } .sa-glow-flash-hold { animation: sa-glow-flash-hold var(--sa-duration, 3s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-glow-flash-hold { 0%, 100% { filter: brightness(1) drop-shadow(0 0 0 transparent); } 10%, 25% { filter: brightness(1.15) drop-shadow(0 0 10px currentColor); } } .sa-glow-step-pulse { animation: sa-glow-step-pulse var(--sa-duration, 2.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-glow-step-pulse { 0%, 100% { filter: drop-shadow(0 0 0 transparent); } 25% { filter: drop-shadow(0 0 6px currentColor); } 50%, 65% { filter: drop-shadow(0 0 12px currentColor); } } .sa-glow-brighten-hold { animation: sa-glow-brighten-hold var(--sa-duration, 2.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-glow-brighten-hold { 0%, 100% { filter: brightness(1); } 15%, 35% { filter: brightness(1.12); } } .sa-glow-two-beat { animation: sa-glow-two-beat var(--sa-duration, 3.2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-glow-two-beat { 0%, 20%, 45%, 100% { filter: drop-shadow(0 0 0 transparent); } 10%, 30% { filter: drop-shadow(0 0 7px currentColor); } } .sa-aura-slow { animation: sa-aura-slow var(--sa-duration, 6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-aura-slow { 0%, 100% { filter: drop-shadow(0 0 0 transparent); } 50% { filter: drop-shadow(0 0 10px currentColor); } } .sa-aura-deep { animation: sa-aura-deep var(--sa-duration, 8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-aura-deep { 0%, 100% { filter: brightness(1) drop-shadow(0 0 0 transparent); } 50% { filter: brightness(1.1) drop-shadow(0 0 18px currentColor); } } .sa-aura-meditative { animation: sa-aura-meditative var(--sa-duration, 10s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-aura-meditative { 0%, 100% { filter: blur(0) drop-shadow(0 0 0 transparent); } 50% { filter: blur(0.5px) drop-shadow(0 0 14px currentColor); } } .sa-aura-drift { animation: sa-aura-drift var(--sa-duration, 7s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-aura-drift { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); } 50% { transform: scale(1.02); filter: drop-shadow(0 0 12px currentColor); } } .sa-aura-long { animation: sa-aura-long var(--sa-duration, 9s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-aura-long { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.2); } } .sa-aura-calm { animation: sa-aura-calm var(--sa-duration, 12s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-aura-calm { 0%, 100% { filter: drop-shadow(0 0 0 transparent); } 50% { filter: drop-shadow(0 0 4px currentColor); } } .sa-glow-wide { animation: sa-glow-wide var(--sa-duration, 2.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-glow-wide { 0%, 100% { filter: drop-shadow(0 0 0 transparent); } 50% { filter: drop-shadow(0 0 18px currentColor); } } .sa-glow-diffuse { animation: sa-glow-diffuse var(--sa-duration, 3s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-glow-diffuse { 0%, 100% { filter: drop-shadow(0 0 0 transparent); } 50% { filter: drop-shadow(0 0 22px currentColor); } } .sa-glow-halo-wide { animation: sa-glow-halo-wide var(--sa-duration, 2.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-glow-halo-wide { 0%, 100% { box-shadow: 0 0 0 transparent; } 50% { box-shadow: 0 0 20px currentColor; } } .sa-glow-spread { animation: sa-glow-spread var(--sa-duration, 3.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-glow-spread { 0%, 100% { filter: drop-shadow(0 0 0 transparent); } 50% { filter: drop-shadow(0 0 26px currentColor); } } .sa-glow-halo-soft { animation: sa-glow-halo-soft var(--sa-duration, 3s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-glow-halo-soft { 0%, 100% { filter: brightness(1) drop-shadow(0 0 0 transparent); } 50% { filter: brightness(1.04) drop-shadow(0 0 16px currentColor); } } .sa-shimmer-flicker { animation: sa-shimmer-flicker var(--sa-duration, 0.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-shimmer-flicker { 0%, 15%, 32%, 60%, 100% { filter: brightness(1); } 8% { filter: brightness(1.04); } 25% { filter: brightness(1.03); } 45% { filter: brightness(1.05); } } .sa-glow-slow-radiance { animation: sa-glow-slow-radiance var(--sa-duration, 11s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-glow-slow-radiance { 0%, 100% { filter: drop-shadow(0 0 0 transparent); } 50% { filter: drop-shadow(0 0 30px currentColor); } } .sa-rock-base { animation: sa-rock-base var(--sa-duration, 3s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: bottom center; } @keyframes sa-rock-base { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } } .sa-rock-corner-left { animation: sa-rock-corner-left var(--sa-duration, 3.2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: bottom left; } @keyframes sa-rock-corner-left { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(4deg); } } .sa-rock-corner-right { animation: sa-rock-corner-right var(--sa-duration, 3.2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: bottom right; } @keyframes sa-rock-corner-right { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-4deg); } } .sa-rock-deep { animation: sa-rock-deep var(--sa-duration, 5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: bottom center; } @keyframes sa-rock-deep { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } } .sa-nudge-up { animation: sa-nudge-up var(--sa-duration, 1.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-nudge-up { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .sa-nudge-down { animation: sa-nudge-down var(--sa-duration, 1.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-nudge-down { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(var(--sa-distance, 4px)); } } .sa-nudge-vertical { animation: sa-nudge-vertical var(--sa-duration, 1.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-nudge-vertical { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } } .sa-nudge-double { animation: sa-nudge-double var(--sa-duration, 2.2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-nudge-double { 0%, 45%, 100% { transform: translateY(0); } 10% { transform: translateY(-4px); } 20% { transform: translateY(0); } 30% { transform: translateY(-4px); } } .sa-drift-ne { animation: sa-drift-ne var(--sa-duration, 9s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-drift-ne { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(5px, -5px); } } .sa-drift-nw { animation: sa-drift-nw var(--sa-duration, 9s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-drift-nw { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-5px, -5px); } } .sa-drift-se { animation: sa-drift-se var(--sa-duration, 9s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-drift-se { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(5px, 5px); } } .sa-drift-sw { animation: sa-drift-sw var(--sa-duration, 9s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-drift-sw { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-5px, 5px); } } .sa-drift-haze { animation: sa-drift-haze var(--sa-duration, 9.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-drift-haze { 0%, 100% { transform: translate(0, 0); opacity: 1; } 50% { transform: translate(4px, -4px); opacity: 0.85; } } .sa-meander { animation: sa-meander var(--sa-duration, 8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-meander { 0% { transform: translate(0, 0); } 20% { transform: translate(3px, -2px); } 45% { transform: translate(-2px, -4px); } 70% { transform: translate(-4px, 2px); } 100% { transform: translate(0, 0); } } .sa-meander-wide { animation: sa-meander-wide var(--sa-duration, 10s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-meander-wide { 0% { transform: translate(0, 0); } 15% { transform: translate(5px, -3px); } 35% { transform: translate(2px, -6px); } 55% { transform: translate(-5px, -2px); } 80% { transform: translate(-3px, 4px); } 100% { transform: translate(0, 0); } } .sa-meander-horizontal { animation: sa-meander-horizontal var(--sa-duration, 8.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-meander-horizontal { 0% { transform: translate(0, 0); } 25% { transform: translate(5px, -1px); } 50% { transform: translate(2px, 1px); } 75% { transform: translate(-5px, -1px); } 100% { transform: translate(0, 0); } } .sa-meander-vertical { animation: sa-meander-vertical var(--sa-duration, 8.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-meander-vertical { 0% { transform: translate(0, 0); } 25% { transform: translate(-1px, 5px); } 50% { transform: translate(1px, 2px); } 75% { transform: translate(-1px, -5px); } 100% { transform: translate(0, 0); } } .sa-meander-pause { animation: sa-meander-pause var(--sa-duration, 9s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-meander-pause { 0%, 10% { transform: translate(0, 0); } 25%, 40% { transform: translate(4px, -3px); } 55%, 70% { transform: translate(-3px, 3px); } 90%, 100% { transform: translate(0, 0); } } .sa-pendulum-wide { animation: sa-pendulum-wide var(--sa-duration, 4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: top center; } @keyframes sa-pendulum-wide { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } } .sa-pendulum-slow { animation: sa-pendulum-slow var(--sa-duration, 6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: top center; } @keyframes sa-pendulum-slow { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } } .sa-pendulum-corner { animation: sa-pendulum-corner var(--sa-duration, 4.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: top left; } @keyframes sa-pendulum-corner { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(6deg); } } .sa-pendulum-drift-bob { animation: sa-pendulum-drift-bob var(--sa-duration, 4.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: top center; } @keyframes sa-pendulum-drift-bob { 0%, 100% { transform: rotate(-5deg) translateY(0); } 50% { transform: rotate(5deg) translateY(2px); } } .sa-loll-left { animation: sa-loll-left var(--sa-duration, 3.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: top center; } @keyframes sa-loll-left { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(-6deg); } 65% { transform: rotate(-6deg); } 85% { transform: rotate(0deg); } } .sa-loll-right { animation: sa-loll-right var(--sa-duration, 3.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: top center; } @keyframes sa-loll-right { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(6deg); } 65% { transform: rotate(6deg); } 85% { transform: rotate(0deg); } } .sa-loll-bob { animation: sa-loll-bob var(--sa-duration, 3.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: top center; } @keyframes sa-loll-bob { 0%, 100% { transform: rotate(0deg) translateY(0); } 20% { transform: rotate(-5deg) translateY(1px); } 65% { transform: rotate(-5deg) translateY(1px); } 85% { transform: rotate(0deg) translateY(0); } } .sa-loll-deep { animation: sa-loll-deep var(--sa-duration, 4.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: top center; } @keyframes sa-loll-deep { 0%, 100% { transform: rotate(0deg); } 15% { transform: rotate(-8deg); } 75% { transform: rotate(-8deg); } 90% { transform: rotate(0deg); } } .sa-skew-sway { animation: sa-skew-sway var(--sa-duration, 3s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-skew-sway { 0%, 100% { transform: skewX(-3deg); } 50% { transform: skewX(3deg); } } .sa-skew-sway-wide { animation: sa-skew-sway-wide var(--sa-duration, 3.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-skew-sway-wide { 0%, 100% { transform: skewX(-6deg); } 50% { transform: skewX(6deg); } } .sa-skew-tilt { animation: sa-skew-tilt var(--sa-duration, 3s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-skew-tilt { 0%, 100% { transform: skewY(-3deg); } 50% { transform: skewY(3deg); } } .sa-skew-drift { animation: sa-skew-drift var(--sa-duration, 4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-skew-drift { 0%, 100% { transform: skewX(-3deg) translateX(-2px); } 50% { transform: skewX(3deg) translateX(2px); } } .sa-skew-breathe { animation: sa-skew-breathe var(--sa-duration, 3.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-skew-breathe { 0%, 100% { transform: skewX(-3deg); opacity: 1; } 50% { transform: skewX(3deg); opacity: 0.9; } } .sa-nudge-corner-ne { animation: sa-nudge-corner-ne var(--sa-duration, 1.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-nudge-corner-ne { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(3px, -3px); } } .sa-nudge-corner-nw { animation: sa-nudge-corner-nw var(--sa-duration, 1.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-nudge-corner-nw { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-3px, -3px); } } .sa-nudge-corner-se { animation: sa-nudge-corner-se var(--sa-duration, 1.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-nudge-corner-se { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(3px, 3px); } } .sa-nudge-corner-sw { animation: sa-nudge-corner-sw var(--sa-duration, 1.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-nudge-corner-sw { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-3px, 3px); } } .sa-orbit-drift-loop { animation: sa-orbit-drift-loop var(--sa-duration, 9s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-orbit-drift-loop { 0% { transform: translate(3px, 0); } 25% { transform: translate(0, -3px); } 50% { transform: translate(-3px, 0); } 75% { transform: translate(0, 3px); } 100% { transform: translate(3px, 0); } } .sa-orbit-loop-tight { animation: sa-orbit-loop-tight var(--sa-duration, 5s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-orbit-loop-tight { 0% { transform: translate(2px, 0); } 25% { transform: translate(0, -2px); } 50% { transform: translate(-2px, 0); } 75% { transform: translate(0, 2px); } 100% { transform: translate(2px, 0); } } .sa-orbit-tilt { animation: sa-orbit-tilt var(--sa-duration, 9s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-orbit-tilt { 0% { transform: translate(3px, 0) rotate(-2deg); } 25% { transform: translate(0, -3px) rotate(0deg); } 50% { transform: translate(-3px, 0) rotate(2deg); } 75% { transform: translate(0, 3px) rotate(0deg); } 100% { transform: translate(3px, 0) rotate(-2deg); } } .sa-orbit-reverse { animation: sa-orbit-reverse var(--sa-duration, 9s) var(--sa-timing, linear) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-orbit-reverse { 0% { transform: translate(-3px, 0); } 25% { transform: translate(0, -3px); } 50% { transform: translate(3px, 0); } 75% { transform: translate(0, 3px); } 100% { transform: translate(-3px, 0); } } .sa-lean-corner-ne { animation: sa-lean-corner-ne var(--sa-duration, 3.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-lean-corner-ne { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(3px, -3px) rotate(3deg); } 65% { transform: translate(3px, -3px) rotate(3deg); } } .sa-lean-corner-sw { animation: sa-lean-corner-sw var(--sa-duration, 3.6s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-lean-corner-sw { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(-3px, 3px) rotate(-3deg); } 65% { transform: translate(-3px, 3px) rotate(-3deg); } } .sa-tilt-drift { animation: sa-tilt-drift var(--sa-duration, 8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-tilt-drift { 0%, 100% { transform: translate(-3px, -3px) rotate(-2deg); } 50% { transform: translate(3px, 3px) rotate(2deg); } } .sa-tilt-drift-reverse { animation: sa-tilt-drift-reverse var(--sa-duration, 8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-tilt-drift-reverse { 0%, 100% { transform: translate(-3px, -3px) rotate(2deg); } 50% { transform: translate(3px, 3px) rotate(-2deg); } } .sa-bob-tilt { animation: sa-bob-tilt var(--sa-duration, 3s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: top center; } @keyframes sa-bob-tilt { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-3px) rotate(2deg); } } .sa-bob-tilt-wide { animation: sa-bob-tilt-wide var(--sa-duration, 5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: top center; } @keyframes sa-bob-tilt-wide { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-5px) rotate(4deg); } } .sa-bob-lean { animation: sa-bob-lean var(--sa-duration, 4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: top center; } @keyframes sa-bob-lean { 0%, 100% { transform: translateY(0) rotate(0deg); } 20% { transform: translateY(-3px) rotate(-4deg); } 65% { transform: translateY(-3px) rotate(-4deg); } 85% { transform: translateY(0) rotate(0deg); } } .sa-sway-asymmetric { animation: sa-sway-asymmetric var(--sa-duration, 4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: top center; } @keyframes sa-sway-asymmetric { 0% { transform: rotate(-3deg); } 30% { transform: rotate(3deg); } 70% { transform: rotate(3deg); } 100% { transform: rotate(-3deg); } } .sa-arc-nudge { animation: sa-arc-nudge var(--sa-duration, 1.8s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-arc-nudge { 0%, 100% { transform: translate(0, 0); } 40% { transform: translate(2px, -3px); } 60% { transform: translate(3px, -1px); } } .sa-wander-drift { animation: sa-wander-drift var(--sa-duration, 11s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-wander-drift { 0% { transform: translate(0, 0); } 35% { transform: translate(6px, -4px); } 65% { transform: translate(-4px, -7px); } 100% { transform: translate(0, 0); } } .sa-sway-deep-bottom { animation: sa-sway-deep-bottom var(--sa-duration, 5.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: bottom center; } @keyframes sa-sway-deep-bottom { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(-6deg); } 60% { transform: rotate(-6deg); } 85% { transform: rotate(0deg); } } /* ===================================================================== state An ambient, idle-state loop. Small amplitude by design: these earn their place at rest, not as the main event. */ .sa-float { animation: sa-float var(--sa-duration, 3s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .sa-breathe { animation: sa-breathe var(--sa-duration, 3.2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: center; } @keyframes sa-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } } .sa-sway { animation: sa-sway var(--sa-duration, 3.5s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); transform-origin: top center; } @keyframes sa-sway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } } /* filter, not box-shadow: works on any element shape with no layout cost. Reads `currentColor`. */ .sa-glow { animation: sa-glow var(--sa-duration, 2.2s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-glow { 0%, 100% { filter: drop-shadow(0 0 0 transparent); } 50% { filter: drop-shadow(0 0 6px currentColor); } } .sa-nudge { animation: sa-nudge var(--sa-duration, 1.4s) var(--sa-timing, ease-in-out) var(--sa-delay) var(--sa-repeat, infinite); } @keyframes sa-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }