/*!
* SDS Motion Forge — standalone inputs bundle
* Generated from src/categories/ by scripts/build-categories.js — do not edit.
* Contains: core (tokens, modifiers, reduced-motion, scroll gate) + inputs +
* cross-category keyframe dependencies. Combining 2+ categories? Use
* dist/motion.css instead — it ships exactly one copy of core.
*/
/*!
* SDS Motion Forge — core.css
* Core — design tokens, utility modifiers, reduced-motion neutralization,
* and scroll-gate infrastructure shared by every category.
* Part of the lossless v5 category split — combined entry: src/motion.css
*/
/**
* SDS Motion Forge — Premium CSS Animation System
* Version: 5.0.0
* Author: Salkom Design Studio
* License: MIT
* https://github.com/salkomdesignstudio/SDS-Motion-Forge
*
* 600+ production-ready CSS animations · Framework-agnostic
* Text (104) · Buttons (100) · Inputs (100) · Cards (100) · Loaders (100) · Scroll (100)
*
* Optional engines (load with defer):
* sds-scroll.min.js — scroll-gate via [data-sds] attribute
* motion-interactive.min.js — cursor-reactive & hover interactive animations
*
* ─── HOW TO INSTALL ──────────────────────────────────────────
*
* CDN (simplest — paste in ):
* Heading
* Paragraph
* Button
* Card
*
* Word By Word
*
*
* Classes that need this: sds-kinetic-wave, sds-stagger-chars,
* sds-arc-orbit, sds-signal-wave, sds-card-stagger,
* sds-card-cascade, sds-card-slice, sds-loader-dots,
* sds-loader-wave, sds-loader-signal, sds-loader-cascade,
* sds-loader-grid, sds-scroll-stagger-pop, sds-scroll-stagger-grid,
* sds-scroll-cascade
*
* ─── SCROLL ANIMATIONS ───────────────────────────────────────
*
* Scroll animations fire when the class is added to the element,
* not automatically on scroll. Use one of these two methods:
*
* Method 1 — data-sds-scroll (works everywhere, paste once):
* Content
*
*
* Method 2 — sds-scroll-auto (Chrome 115+, zero JS):
* Content
*
* ─── BUG FIXES IN THIS BUILD ─────────────────────────────────
*
* ✓ sds-loader-progress/data/bar — position:relative added
* ✓ will-change on GPU-heavy animations — no jank
* ✓ backface-visibility on 3D transforms — no Chrome flicker
* ✓ max-width:max-content on typewriter — no text clipping
* ✓ prefers-reduced-motion — scroll elements stay visible
* ✓ CSS scroll-driven animations via .sds-scroll-auto
*
*/
/* ============================================================
DESIGN TOKENS
Override these in :root to theme SDS Motion to your brand.
============================================================ */
:root {
--sds-primary: #0015d1;
--sds-primary-dim: rgba(0, 21, 209, 0.08);
--sds-primary-glow: rgba(0, 21, 209, 0.3);
--sds-accent: #d10028;
--sds-success: #00c48c;
/* ── v5 Motion Token Scale ──────────────────────────────────
Source of truth: tokens/motion.tokens.json (W3C Design Tokens).
Regenerate with `npm run build:tokens`. See SPEC.md. */
/* @sds-generated-tokens:start — generated from tokens/motion.tokens.json by scripts/generate-tokens.js; do not edit by hand */
--sds-duration-instant: 0.3s;
--sds-duration-fast: 0.4s;
--sds-duration-base: 0.8s;
--sds-duration-slow: 1.4s;
--sds-duration-slower: 2.2s;
--sds-duration-dramatic: 3s;
--sds-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
--sds-ease-decelerate: cubic-bezier(0.16, 1, 0.3, 1);
--sds-ease-accelerate: cubic-bezier(0.6, -0.28, 0.74, 0.05);
--sds-ease-emphasized: cubic-bezier(0.215, 0.61, 0.355, 1);
--sds-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--sds-ease-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);
--sds-distance-sm: 24px;
--sds-distance-md: 48px;
--sds-distance-lg: 80px;
/* @sds-generated-tokens:end */
/* Legacy tokens — permanent public API (R2). They now resolve
through the v5 scale; computed defaults are unchanged
(0.8s / cubic-bezier(0.22, 1, 0.36, 1)). */
--sds-duration: var(--sds-duration-base, 0.8s);
--sds-easing: var(--sds-ease-standard, cubic-bezier(0.22, 1, 0.36, 1));
}
/* ============================================================
ACCESSIBILITY — REDUCED MOTION
Matches the user's OS preference. Skips all animation.
============================================================ */
@media (prefers-reduced-motion: reduce) {
/* `> *` added in v5 (R5 gate): child-driven effects (kinetic-wave,
staggers, loader dots/bars) animate plain child elements that carry no
sds- class of their own — without it they kept moving under reduced
motion in <= 4.0.3. */
[class*="sds-"],
[class*="sds-"] > *,
[class*="sds-"]::before,
[class*="sds-"]::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
animation-delay: 0ms !important;
transition-duration: 0.01ms !important;
transition-delay: 0ms !important;
scroll-behavior: auto !important;
}
/* Scroll-animated elements must stay visible under reduced motion */
[class*="sds-scroll-"],
[class*="sds-scroll-"] > * {
opacity: 1 !important;
transform: none !important;
filter: none !important;
clip-path: none !important;
-webkit-clip-path: none !important;
}
}
/* ============================================================
UTILITY MODIFIERS
Stack these on any animation class.
============================================================ */
/* Delay helpers */
.sds-delay-1 {
animation-delay: 0.1s !important;
}
.sds-delay-2 {
animation-delay: 0.2s !important;
}
.sds-delay-3 {
animation-delay: 0.3s !important;
}
.sds-delay-4 {
animation-delay: 0.4s !important;
}
.sds-delay-5 {
animation-delay: 0.5s !important;
}
.sds-delay-6 {
animation-delay: 0.6s !important;
}
.sds-delay-8 {
animation-delay: 0.8s !important;
}
.sds-delay-10 {
animation-delay: 1s !important;
}
/* Duration helpers — override --sds-duration token */
.sds-fast {
--sds-duration: var(--sds-duration-fast, 0.4s);
}
.sds-normal {
--sds-duration: var(--sds-duration-base, 0.8s);
}
.sds-slow {
--sds-duration: var(--sds-duration-slow, 1.4s);
}
.sds-xslow {
--sds-duration: var(--sds-duration-slower, 2.2s);
}
/* Iteration helpers */
.sds-once {
animation-iteration-count: 1 !important;
animation-fill-mode: both !important;
}
/* Cascade to > * so stagger/wave containers (arc-orbit, kinetic-wave, signal-wave,
stagger-pop, stagger-grid) loop correctly — their animations live on children. */
.sds-loop,
.sds-loop > * {
animation-iteration-count: infinite !important;
}
.sds-alt,
.sds-alt > * {
animation-direction: alternate;
animation-iteration-count: infinite !important;
}
/* Fill modes */
.sds-fill-both {
animation-fill-mode: both !important;
}
.sds-fill-forward {
animation-fill-mode: forwards !important;
}
/* Pause on hover */
.sds-pause-hover:hover,
.sds-pause-hover:hover *,
.sds-pause-hover:hover::before,
.sds-pause-hover:hover::after {
animation-play-state: paused !important;
}
/* ============================================================
SCROLL ANIMATION ACTIVATION
============================================================
Add data-sds-scroll to your element, then include this
script once in your page. The animation fires when the
element enters the viewport.
Your content
============================================================ */
[data-sds-scroll][class*="sds-scroll-"] {
opacity: 0;
animation-play-state: paused;
}
[data-sds-scroll].sds-in[class*="sds-scroll-"] {
opacity: 1;
animation-play-state: running;
}
/* CSS Scroll-Driven Animations — Chrome 115+, zero JS */
@supports (animation-timeline: scroll()) {
.sds-scroll-auto[class*="sds-scroll-"] {
animation-timeline: view();
animation-range: entry 0% entry 40%;
animation-play-state: running;
opacity: 1;
}
}
/* ============================================================
SCROLL GATE — sds-scroll.js engine (data-sds attribute)
============================================================
Requires:
The JS adds "sds-js" to and "sds-play" to each
[data-sds] element when it enters the viewport.
============================================================ */
/* Gate: hidden + paused until JS grants sds-play */
[data-sds]:not(.sds-play) {
animation-play-state: paused !important;
animation-delay: -1ms !important;
opacity: 0 !important;
}
/* Release: visible + running */
[data-sds].sds-play {
opacity: 1;
animation-play-state: running !important;
}
/* Fallback: if JS never loads, show content normally */
html:not(.sds-js) [data-sds] {
opacity: 1 !important;
animation-play-state: running !important;
}
/* v5 fix (additive): while an element is scroll-gated it is opacity:0, but
its PAUSED 0% keyframe still applied clip-path/transform — and Chromium
computes IntersectionObserver geometry AFTER the target's own clip and
transform. Effects whose first frame fully clips (curtain, clip-left/right,
radial, ink, scan, split) or moves the box off-screen (velvet, gravity)
therefore NEVER intersected and never played in <= 4.0.3, with every
documented scroll method. Neutralizing clip/transform only in the hidden,
gated state restores the element's real box for the observer; the moment
sds-play / sds-in lands, these rules stop matching and the animation plays
from its true 0% frame. */
[data-sds]:not(.sds-play),
[data-sds-scroll][class*="sds-scroll-"]:not(.sds-in) {
clip-path: none !important;
-webkit-clip-path: none !important;
transform: none !important;
}
/*!
* SDS Motion Forge — inputs.css
* Input animations (Section 3).
* Part of the lossless v5 category split — combined entry: src/motion.css
*/
/* ============================================================
SECTION 3 — INPUT ANIMATIONS
Namespace: .sds-input-*
============================================================ */
/* 44 · Focus Field ----------------------------------------- */
.sds-input-focus:focus {
animation: sds-focusField var(--sds-duration-instant, 0.3s) ease both;
}
@keyframes sds-focusField {
from {
box-shadow:
0 0 0 0 var(--sds-primary-glow),
0 0 0 0 var(--sds-primary-dim);
}
to {
box-shadow:
0 0 0 3px var(--sds-primary-dim),
0 0 16px rgba(0, 21, 209, 0.08);
}
}
/* 45 · Border Morph ---------------------------------------- */
.sds-input-morph {
animation: sds-borderMorph 2.5s ease infinite;
}
@keyframes sds-borderMorph {
0%,
100% {
border-radius: 8px;
}
50% {
border-radius: 16px 4px 16px 4px;
}
}
/* 46 · Shimmer Scan ---------------------------------------- */
.sds-input-shimmer {
background: linear-gradient(
90deg,
transparent 40%,
rgba(0, 21, 209, 0.08) 50%,
transparent 60%
);
background-size: 300% 100%;
animation: sds-shimmerScan 2.5s ease infinite;
}
@keyframes sds-shimmerScan {
from {
background-position: -200% center;
}
to {
background-position: 300% center;
}
}
/* 47 · Voltage Pulse --------------------------------------- */
.sds-input-voltage {
animation: sds-voltagePulse 2s ease infinite;
}
@keyframes sds-voltagePulse {
0%,
100% {
border-color: rgba(0, 21, 209, 0.3);
}
10% {
border-color: var(--sds-primary);
box-shadow: 0 0 12px var(--sds-primary-glow);
}
20% {
border-color: rgba(0, 21, 209, 0.3);
box-shadow: none;
}
30% {
border-color: var(--sds-primary);
box-shadow: 0 0 8px var(--sds-primary-glow);
}
40% {
border-color: rgba(0, 21, 209, 0.3);
}
}
/* 48 · Seismic Shake --------------------------------------- */
.sds-input-shake {
animation: sds-seismicShake 0.5s ease both;
}
@keyframes sds-seismicShake {
0%,
100% {
transform: translateX(0);
}
10% {
transform: translateX(-6px) rotate(-0.5deg);
}
25% {
transform: translateX(6px) rotate(0.5deg);
}
40% {
transform: translateX(-5px);
}
55% {
transform: translateX(4px);
}
70% {
transform: translateX(-2px);
}
85% {
transform: translateX(2px);
}
}
/* 49 · Success Glow ---------------------------------------- */
.sds-input-success {
animation: sds-successGlow 0.6s ease both;
}
@keyframes sds-successGlow {
0% {
border-color: rgba(0, 196, 140, 0.3);
box-shadow: none;
}
40% {
border-color: var(--sds-success);
box-shadow:
0 0 16px rgba(0, 196, 140, 0.3),
0 0 4px rgba(0, 196, 140, 0.5);
}
100% {
border-color: rgba(0, 196, 140, 0.5);
box-shadow: 0 0 8px rgba(0, 196, 140, 0.15);
}
}
/* 50 · Caret Trail ----------------------------------------- */
.sds-input-caret {
animation: sds-caretTrail 2s ease infinite;
}
@keyframes sds-caretTrail {
0%,
100% {
box-shadow: 0 0 0 0 rgba(0, 21, 209, 0);
}
50% {
box-shadow:
0 0 0 4px var(--sds-primary-dim),
inset 0 0 0 1px rgba(0, 21, 209, 0.3);
}
}
/* 51 · Morph Placeholder ----------------------------------- */
.sds-input-morph-ph::-moz-placeholder {
animation: sds-morphPlaceholder 2s ease infinite;
}
.sds-input-morph-ph::placeholder {
animation: sds-morphPlaceholder 2s ease infinite;
}
@keyframes sds-morphPlaceholder {
0%,
100% {
letter-spacing: 0;
opacity: 0.4;
}
50% {
letter-spacing: 2px;
opacity: 0.1;
filter: blur(1px);
}
}
/* 52 · Elevate Focus --------------------------------------- */
.sds-input-elevate-wrap {
position: relative;
}
.sds-input-elevate-wrap label {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%) scale(1);
transform-origin: left;
pointer-events: none;
transition:
transform 0.25s var(--sds-easing),
color 0.25s ease;
color: rgba(0, 0, 0, 0.4);
}
.sds-input-elevate-wrap input:not(:-moz-placeholder) ~ label {
transform: translateY(-140%) scale(0.82);
color: var(--sds-primary);
}
.sds-input-elevate-wrap input:focus ~ label,
.sds-input-elevate-wrap input:not(:placeholder-shown) ~ label {
transform: translateY(-140%) scale(0.82);
color: var(--sds-primary);
}
/* 53 · Ink Stroke ------------------------------------------ */
.sds-input-ink:focus {
outline-style: solid;
animation: sds-inkStroke var(--sds-duration-instant, 0.3s) ease both;
}
@keyframes sds-inkStroke {
0% {
outline-offset: 0;
outline-color: rgba(0, 21, 209, 0);
}
100% {
outline-offset: 2px;
outline-color: rgba(0, 21, 209, 0.2);
}
}
/* 54 · Plasma Field ---------------------------------------- */
.sds-input-plasma {
animation: sds-plasmaGlow var(--sds-duration-dramatic, 3s) ease infinite;
}
/* 55 · Ring Pulse ------------------------------------------ */
.sds-input-ring {
animation: sds-magnetPulse 2s ease 0.5s infinite;
}
/* 56 · Neon Input ------------------------------------------ */
.sds-input-neon {
animation: sds-neonSign 4s ease infinite;
}
/* 57 · Scan ---------------------------------------------- */
.sds-input-scan {
background-image: linear-gradient(
90deg,
transparent 30%,
rgba(0, 21, 209, 0.1) 50%,
transparent 70%
);
background-size: 300% 100%;
animation: sds-inputScan 2s ease infinite;
}
@keyframes sds-inputScan {
0% {
background-position: -200% center;
}
100% {
background-position: 300% center;
}
}
/* 58 · Glow Border --------------------------------------- */
.sds-input-glow-border {
animation: sds-inputGlowBorder 2s ease-in-out infinite;
}
@keyframes sds-inputGlowBorder {
0%,
100% {
box-shadow:
0 0 0 1.5px rgba(0, 21, 209, 0.2),
0 0 0 rgba(0, 21, 209, 0);
}
50% {
box-shadow:
0 0 0 1.5px var(--sds-primary),
0 0 16px var(--sds-primary-glow);
}
}
/* 59 · Neural -------------------------------------------- */
.sds-input-neural {
animation: sds-inputNeural var(--sds-duration-dramatic, 3s) ease-in-out infinite;
}
@keyframes sds-inputNeural {
0%,
100% {
box-shadow:
0 0 0 2px rgba(0, 21, 209, 0.15),
0 0 0 6px rgba(0, 21, 209, 0);
}
33% {
box-shadow:
0 0 0 2px rgba(0, 21, 209, 0.5),
0 0 0 6px rgba(0, 21, 209, 0.08);
}
66% {
box-shadow:
0 0 0 2px rgba(0, 21, 209, 0.3),
0 0 0 10px rgba(0, 21, 209, 0.04);
}
}
/* 60 · Aurora -------------------------------------------- */
.sds-input-aurora {
animation: sds-inputAurora 4s ease-in-out infinite;
}
@keyframes sds-inputAurora {
0%,
100% {
box-shadow: 0 0 8px rgba(0, 21, 209, 0.2);
}
25% {
box-shadow: 0 0 12px rgba(139, 92, 246, 0.35);
}
50% {
box-shadow: 0 0 10px rgba(6, 182, 212, 0.3);
}
75% {
box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}
}
/* 61 · Border Beam --------------------------------------- */
.sds-input-border-beam {
animation: sds-inputBorderBeam 2s linear infinite;
outline-style: solid;
outline-color: transparent;
}
@keyframes sds-inputBorderBeam {
0% {
outline-offset: 0;
outline-width: 0;
outline-color: var(--sds-primary-glow);
}
40% {
outline-offset: 3px;
outline-width: 2px;
outline-color: rgba(0, 21, 209, 0.5);
}
100% {
outline-offset: 8px;
outline-width: 0;
outline-color: rgba(0, 21, 209, 0);
}
}
/* 62 · Depth -------------------------------------------- */
.sds-input-depth {
animation: sds-inputDepth 2.4s ease-in-out infinite;
}
@keyframes sds-inputDepth {
0%,
100% {
transform: perspective(300px) translateZ(0);
box-shadow: 0 2px 6px rgba(0, 21, 209, 0.08);
}
50% {
transform: perspective(300px) translateZ(4px);
box-shadow: 0 8px 24px rgba(0, 21, 209, 0.16);
}
}
/* 63 · Charge ------------------------------------------- */
.sds-input-charge {
animation: sds-inputCharge var(--sds-duration-slower, 2.2s) ease-in-out infinite;
}
@keyframes sds-inputCharge {
0% {
border-color: rgba(0, 21, 209, 0.2);
box-shadow: none;
}
70% {
border-color: var(--sds-primary);
box-shadow:
0 0 20px var(--sds-primary-glow),
0 0 4px var(--sds-primary-glow);
}
100% {
border-color: rgba(0, 21, 209, 0.2);
box-shadow: none;
}
}
/* 64 · Ripple ------------------------------------------- */
.sds-input-ripple {
animation: sds-inputRipple 2.4s ease infinite;
}
@keyframes sds-inputRipple {
0% {
box-shadow: 0 0 0 0 var(--sds-primary-glow);
}
60% {
box-shadow: 0 0 0 8px rgba(0, 21, 209, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(0, 21, 209, 0);
}
}
/* 65 · Pulse Dot ---------------------------------------- */
.sds-input-pulse-dot {
border-left: 3px solid var(--sds-primary);
animation: sds-inputPulseDot var(--sds-duration-slow, 1.4s) ease-in-out infinite;
}
@keyframes sds-inputPulseDot {
0%,
100% {
border-left-color: rgba(0, 21, 209, 0.3);
}
50% {
border-left-color: var(--sds-primary);
box-shadow: -4px 0 12px var(--sds-primary-glow);
}
}
/* 66 · Orbit ------------------------------------------- */
.sds-input-orbit {
animation: sds-inputOrbit 2s linear infinite;
outline: 2px solid transparent;
}
@keyframes sds-inputOrbit {
0% {
outline-color: rgba(0, 21, 209, 0.6);
outline-offset: 0;
}
50% {
outline-offset: 4px;
outline-color: rgba(0, 21, 209, 0.2);
}
100% {
outline-color: rgba(0, 21, 209, 0);
outline-offset: 8px;
}
}
/* 67 · Gradient Border ---------------------------------- */
.sds-input-gradient-border {
border: none;
background-image:
linear-gradient(white, white),
linear-gradient(
135deg,
var(--sds-primary),
#8b5cf6,
var(--sds-accent),
var(--sds-primary)
);
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
animation: sds-inputGradBorder var(--sds-duration-dramatic, 3s) linear infinite;
}
@keyframes sds-inputGradBorder {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
/* 68 · Active Line -------------------------------------- */
.sds-input-active-line {
border-bottom: 2px solid var(--sds-primary);
border-radius: 0;
animation: sds-inputActiveLine 1.8s ease-in-out infinite;
}
@keyframes sds-inputActiveLine {
0%,
100% {
border-bottom-color: rgba(0, 21, 209, 0.25);
}
50% {
border-bottom-color: var(--sds-primary);
box-shadow: 0 2px 8px var(--sds-primary-glow);
}
}
/* 69 · Glitch Valid ------------------------------------- */
.sds-input-glitch-valid {
animation: sds-inputGlitchValid var(--sds-duration-fast, 0.4s) steps(1) both;
}
@keyframes sds-inputGlitchValid {
0% {
transform: translateX(0);
border-color: var(--sds-success);
}
10% {
transform: translateX(-3px);
}
20% {
transform: translateX(3px);
border-color: var(--sds-primary);
}
30% {
transform: translateX(0);
border-color: var(--sds-success);
}
40% {
transform: translateX(-2px);
}
100% {
transform: translateX(0);
border-color: var(--sds-success);
}
}
/* 70 · Flicker ------------------------------------------ */
.sds-input-flicker {
animation: sds-inputFlicker 4s steps(1) infinite;
}
@keyframes sds-inputFlicker {
0%,
100% {
opacity: 1;
}
45% {
opacity: 0.85;
}
46% {
opacity: 1;
}
80% {
opacity: 0.92;
}
81% {
opacity: 1;
}
}
/* 71 · Kinetic ------------------------------------------ */
.sds-input-kinetic {
animation: sds-inputKinetic var(--sds-duration-dramatic, 3s) ease-in-out infinite;
}
@keyframes sds-inputKinetic {
0%,
100% {
transform: scaleX(1);
}
25% {
transform: scaleX(1.015);
}
75% {
transform: scaleX(0.988);
}
}
/* 72 · Waveform ----------------------------------------- */
.sds-input-waveform {
animation: sds-inputWaveform 1.6s ease-in-out infinite;
}
@keyframes sds-inputWaveform {
0%,
100% {
transform: scaleY(1);
border-color: rgba(0, 21, 209, 0.3);
}
25% {
transform: scaleY(1.03) scaleX(1.008);
border-color: var(--sds-primary);
}
75% {
transform: scaleY(0.97) scaleX(0.992);
}
}
/* 73 · Solar -------------------------------------------- */
.sds-input-solar {
animation: sds-inputSolar 2.8s ease-in-out infinite;
}
@keyframes sds-inputSolar {
0%,
100% {
box-shadow: 0 0 0 rgba(251, 191, 36, 0);
}
50% {
box-shadow:
0 0 20px rgba(251, 191, 36, 0.35),
0 0 40px rgba(251, 191, 36, 0.12),
0 0 60px rgba(251, 191, 36, 0.04);
}
}
/* 74 · Burst -------------------------------------------- */
.sds-input-burst {
animation: sds-inputBurst 1.8s var(--sds-easing) both;
}
@keyframes sds-inputBurst {
0% {
transform: scale(0.92);
opacity: 0;
box-shadow: 0 0 0 rgba(0, 21, 209, 0);
}
40% {
transform: scale(1.04);
box-shadow: 0 0 24px var(--sds-primary-glow);
}
70% {
transform: scale(0.98);
box-shadow: 0 0 8px rgba(0, 21, 209, 0.1);
}
100% {
transform: scale(1);
opacity: 1;
box-shadow: none;
}
}
/* 75 · Momentum ----------------------------------------- */
.sds-input-momentum {
animation: sds-inputMomentum 0.7s var(--sds-easing) both;
}
@keyframes sds-inputMomentum {
0% {
opacity: 0;
transform: translateY(16px) scaleY(0.85);
filter: blur(4px);
}
60% {
opacity: 1;
transform: translateY(-2px) scaleY(1.02);
filter: blur(0);
}
100% {
opacity: 1;
transform: translateY(0) scaleY(1);
}
}
/* 76 · Echo -------------------------------------------- */
.sds-input-echo {
animation: sds-inputEcho 2.4s ease-out infinite;
outline-style: solid;
outline-color: transparent;
}
@keyframes sds-inputEcho {
0% {
outline-offset: 0;
outline-width: 0;
outline-color: var(--sds-primary-glow);
}
20% {
outline-width: 2px;
}
100% {
outline-offset: 12px;
outline-width: 0;
outline-color: rgba(0, 21, 209, 0);
}
}
/* 77 · Laser -------------------------------------------- */
.sds-input-laser {
background-image: linear-gradient(
90deg,
transparent 0%,
rgba(0, 21, 209, 0.15) 40%,
rgba(0, 21, 209, 0.25) 50%,
rgba(0, 21, 209, 0.15) 60%,
transparent 100%
);
background-size: 200% 100%;
animation: sds-inputLaser 1.5s linear infinite;
}
@keyframes sds-inputLaser {
0% {
background-position: -100% center;
}
100% {
background-position: 200% center;
}
}
/* 78 · Gravity ------------------------------------------ */
.sds-input-gravity {
animation: sds-inputGravity var(--sds-duration-base, 0.8s) var(--sds-ease-bounce, cubic-bezier(0.68, -0.55, 0.27, 1.55)) both;
}
@keyframes sds-inputGravity {
0% {
opacity: 0;
transform: translateY(-30px);
}
70% {
opacity: 1;
transform: translateY(4px);
}
85% {
transform: translateY(-2px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* 79 · Void -------------------------------------------- */
.sds-input-void {
animation: sds-inputVoid 2.6s ease-in-out infinite;
}
@keyframes sds-inputVoid {
0%,
100% {
box-shadow: inset 0 0 0 rgba(0, 21, 209, 0);
}
50% {
box-shadow:
inset 0 0 24px rgba(0, 21, 209, 0.1),
inset 0 0 8px rgba(0, 21, 209, 0.08);
}
}
/* 80 · Comet ------------------------------------------- */
.sds-input-comet {
animation: sds-inputComet var(--sds-duration-dramatic, 3s) linear infinite;
}
@keyframes sds-inputComet {
0% {
box-shadow:
-4px 0 0 0 transparent,
0 0 0 0 transparent;
}
50% {
box-shadow:
0 0 0 1.5px rgba(0, 21, 209, 0.5),
0 0 12px var(--sds-primary-glow);
}
100% {
box-shadow:
4px 0 0 0 transparent,
0 0 0 0 transparent;
}
}
/* 81 · Zap --------------------------------------------- */
.sds-input-zap {
animation: sds-inputZap var(--sds-duration-dramatic, 3s) ease infinite;
}
@keyframes sds-inputZap {
0%,
100% {
transform: none;
border-color: rgba(0, 21, 209, 0.3);
}
8% {
transform: skewX(3deg);
border-color: var(--sds-primary);
box-shadow: 0 0 12px var(--sds-primary-glow);
}
10% {
transform: skewX(-2deg);
}
12% {
transform: none;
border-color: rgba(0, 21, 209, 0.3);
box-shadow: none;
}
}
/* 82 · Ghost ------------------------------------------- */
.sds-input-ghost {
background-image: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.6) 50%,
rgba(255, 255, 255, 0) 100%
);
background-size: 200% 100%;
animation: sds-inputGhost var(--sds-duration-dramatic, 3s) ease-in-out infinite;
}
@keyframes sds-inputGhost {
0% {
background-position: -100% center;
opacity: 0.8;
}
50% {
opacity: 1;
}
100% {
background-position: 200% center;
opacity: 0.8;
}
}
/* 83 · Crystal ----------------------------------------- */
.sds-input-crystal {
animation: sds-inputCrystal 2.4s ease-in-out infinite;
}
@keyframes sds-inputCrystal {
0%,
100% {
filter: brightness(1) contrast(1);
border-color: rgba(0, 21, 209, 0.25);
}
50% {
filter: brightness(1.15) contrast(1.05);
border-color: rgba(6, 182, 212, 0.6);
box-shadow: 0 0 12px rgba(6, 182, 212, 0.2);
}
}
/* 84 · Prism ------------------------------------------- */
.sds-input-prism {
animation: sds-inputPrism 4s linear infinite;
}
@keyframes sds-inputPrism {
0% {
border-color: rgba(0, 21, 209, 0.4);
box-shadow: 0 0 6px rgba(0, 21, 209, 0.2);
}
25% {
border-color: rgba(139, 92, 246, 0.4);
box-shadow: 0 0 6px rgba(139, 92, 246, 0.2);
}
50% {
border-color: rgba(209, 0, 40, 0.4);
box-shadow: 0 0 6px rgba(209, 0, 40, 0.15);
}
75% {
border-color: rgba(6, 182, 212, 0.4);
box-shadow: 0 0 6px rgba(6, 182, 212, 0.2);
}
100% {
border-color: rgba(0, 21, 209, 0.4);
box-shadow: 0 0 6px rgba(0, 21, 209, 0.2);
}
}
/* 85 · Fire -------------------------------------------- */
.sds-input-fire {
animation: sds-inputFire 2s ease-in-out infinite;
}
@keyframes sds-inputFire {
0%,
100% {
border-color: rgba(239, 68, 68, 0.3);
box-shadow: 0 0 4px rgba(239, 68, 68, 0.1);
}
33% {
border-color: rgba(251, 113, 133, 0.6);
box-shadow: 0 0 14px rgba(251, 146, 60, 0.25);
}
66% {
border-color: rgba(239, 68, 68, 0.5);
box-shadow: 0 0 10px rgba(239, 68, 68, 0.2);
}
}
/* 86 · Quantum ----------------------------------------- */
.sds-input-quantum {
animation: sds-inputQuantum var(--sds-duration-dramatic, 3s) steps(1) infinite;
}
@keyframes sds-inputQuantum {
0%,
100% {
border-color: rgba(0, 21, 209, 0.35);
}
10% {
border-color: var(--sds-primary);
}
11% {
border-color: rgba(0, 21, 209, 0.35);
}
50% {
border-color: rgba(139, 92, 246, 0.5);
}
51% {
border-color: rgba(0, 21, 209, 0.35);
}
}
/* 87 · Expand ------------------------------------------ */
.sds-input-expand {
animation: sds-inputExpand 0.6s var(--sds-easing) both;
}
@keyframes sds-inputExpand {
from {
transform: scaleX(0.6);
opacity: 0;
border-radius: 99px;
}
to {
transform: scaleX(1);
opacity: 1;
border-radius: inherit;
}
}
/* 88 · Unlock ------------------------------------------ */
.sds-input-unlock {
animation: sds-inputUnlock var(--sds-duration-base, 0.8s) var(--sds-easing) both;
}
@keyframes sds-inputUnlock {
0% {
transform: rotate(-8deg) scale(0.9);
opacity: 0;
}
60% {
transform: rotate(2deg) scale(1.02);
opacity: 1;
}
100% {
transform: rotate(0) scale(1);
opacity: 1;
}
}
/* 89 · Flow -------------------------------------------- */
.sds-input-flow {
background-image: linear-gradient(
90deg,
rgba(0, 21, 209, 0.05),
rgba(139, 92, 246, 0.08),
rgba(0, 21, 209, 0.05)
);
background-size: 300% 100%;
animation: sds-inputFlow var(--sds-duration-dramatic, 3s) ease-in-out infinite;
}
@keyframes sds-inputFlow {
0%,
100% {
background-position: 0% center;
}
50% {
background-position: 100% center;
}
}
/* 90 · Frost ------------------------------------------- */
.sds-input-frost {
animation: sds-inputFrost 2s ease both;
}
@keyframes sds-inputFrost {
0% {
filter: blur(4px) brightness(1.4);
transform: scale(1.04);
opacity: 0;
}
50% {
filter: blur(1px) brightness(1.1);
transform: scale(1.01);
opacity: 1;
}
100% {
filter: blur(0) brightness(1);
transform: scale(1);
opacity: 1;
}
}
/* 91 · Electric ---------------------------------------- */
.sds-input-electric {
animation: sds-inputElectric 2s ease infinite;
}
@keyframes sds-inputElectric {
0%,
100% {
border-color: rgba(0, 21, 209, 0.3);
box-shadow: none;
}
15% {
border-color: var(--sds-primary);
box-shadow: 0 0 8px var(--sds-primary-glow);
}
17% {
border-color: rgba(0, 21, 209, 0.3);
box-shadow: none;
}
30% {
border-color: rgba(0, 21, 209, 0.6);
box-shadow: 0 0 4px var(--sds-primary-glow);
}
32% {
border-color: rgba(0, 21, 209, 0.3);
box-shadow: none;
}
}
/* 92 · Radar ------------------------------------------- */
.sds-input-radar {
animation: sds-inputRadar 2s linear infinite;
}
@keyframes sds-inputRadar {
0% {
box-shadow:
0 0 0 0 var(--sds-primary-glow),
0 0 0 0 rgba(0, 21, 209, 0.08);
}
50% {
box-shadow:
0 0 0 6px rgba(0, 21, 209, 0),
0 0 0 12px rgba(0, 21, 209, 0);
}
100% {
box-shadow:
0 0 0 0 rgba(0, 21, 209, 0),
0 0 0 0 rgba(0, 21, 209, 0);
}
}
/* 93 · Bloom ------------------------------------------- */
.sds-input-bloom {
animation: sds-inputBloom 2.4s ease-in-out infinite;
}
@keyframes sds-inputBloom {
0%,
100% {
box-shadow: 0 0 0 rgba(0, 21, 209, 0);
filter: brightness(1);
}
50% {
box-shadow:
0 0 28px rgba(0, 21, 209, 0.18),
0 0 56px rgba(0, 21, 209, 0.06);
filter: brightness(1.06);
}
}
.sds-input-focus-glow:focus {
animation: sds-focusField 0.45s ease both;
}
/* ============================================================
SECTION 3b — INPUT ANIMATIONS (v5 additions, 131–179)
Compositor-only (R4). Wrapper classes (div around the input)
are used wherever pseudo-element overlays are needed —