[class*="split-animation-"] .word {
display: inline-block;
will-change: transform, opacity;
} .split-animation-fade-up .word {
opacity: 0;
transform: translateY(100%);
}
.split-animation-fade-up.animate .word {
opacity: 1;
transform: translateY(0);
transition: all var(--animation-duration, 800ms) cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition-delay: calc(var(--animation-delay, 0ms) + (var(--word-index) * var(--stagger, 50ms)));
} .split-animation-fade-down .word {
opacity: 0;
transform: translateY(-50px);
}
.split-animation-fade-down.animate .word {
opacity: 1;
transform: translateY(0);
transition: all var(--animation-duration, 600ms) ease-out;
transition-delay: calc(var(--animation-delay, 0ms) + (var(--word-index) * var(--stagger, 80ms)));
} .split-animation-slide-left .word {
opacity: 0;
transform: translateX(-50px);
}
.split-animation-slide-left.animate .word {
opacity: 1;
transform: translateX(0);
transition: all var(--animation-duration, 700ms) cubic-bezier(0.34, 1.56, 0.64, 1);
transition-delay: calc(var(--animation-delay, 0ms) + (var(--word-index) * var(--stagger, 60ms)));
} .split-animation-slide-right .word {
opacity: 0;
transform: translateX(50px);
}
.split-animation-slide-right.animate .word {
opacity: 1;
transform: translateX(0);
transition: all var(--animation-duration, 700ms) cubic-bezier(0.34, 1.56, 0.64, 1);
transition-delay: calc(var(--animation-delay, 0ms) + (var(--word-index) * var(--stagger, 60ms)));
} .split-animation-scale .word {
opacity: 0;
transform: scale(0.5);
}
.split-animation-scale.animate .word {
opacity: 1;
transform: scale(1);
transition: all var(--animation-duration, 600ms) cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition-delay: calc(var(--animation-delay, 0ms) + (var(--word-index) * var(--stagger, 70ms)));
} .split-animation-blur .word {
opacity: 0;
filter: blur(10px);
transform: translateY(30px);
}
.split-animation-blur.animate .word {
opacity: 1;
filter: blur(0);
transform: translateY(0);
transition: all var(--animation-duration, 900ms) ease-out;
transition-delay: calc(var(--animation-delay, 0ms) + (var(--word-index) * var(--stagger, 60ms)));
} .split-animation-rotate-x .word {
opacity: 0;
transform: rotateX(90deg) translateY(20px);
transform-origin: center bottom;
}
.split-animation-rotate-x.animate .word {
opacity: 1;
transform: rotateX(0deg) translateY(0);
transition: all var(--animation-duration, 800ms) cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition-delay: calc(var(--animation-delay, 0ms) + (var(--word-index) * var(--stagger, 50ms)));
} .split-animation-flip {
perspective: 1000px;
}
.split-animation-flip .word {
opacity: 0;
transform: rotateY(180deg);
transform-style: preserve-3d;
}
.split-animation-flip.animate .word {
opacity: 1;
transform: rotateY(0deg);
transition: all var(--animation-duration, 800ms) ease-out;
transition-delay: calc(var(--animation-delay, 0ms) + (var(--word-index) * var(--stagger, 60ms)));
} .split-animation-bounce .word {
opacity: 0;
transform: translateY(-100px);
}
.split-animation-bounce.animate .word {
opacity: 1;
transform: translateY(0);
transition: all var(--animation-duration, 800ms) cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition-delay: calc(var(--animation-delay, 0ms) + (var(--word-index) * var(--stagger, 80ms)));
} .split-animation-elastic .word {
opacity: 0;
transform: scale(0);
}
.split-animation-elastic.animate .word {
opacity: 1;
transform: scale(1);
transition: all var(--animation-duration, 1000ms) cubic-bezier(0.68, -0.6, 0.32, 1.6);
transition-delay: calc(var(--animation-delay, 0ms) + (var(--word-index) * var(--stagger, 50ms)));
} .split-animation-typewriter .word {
opacity: 0;
transform: translateX(-10px);
}
.split-animation-typewriter.animate .word {
opacity: 1;
transform: translateX(0);
transition: all var(--animation-duration, 300ms) ease;
transition-delay: calc(var(--animation-delay, 0ms) + (var(--word-index) * var(--stagger, 150ms)));
} .split-animation-glitch .word {
opacity: 0;
transform: translateX(-20px) skewX(-10deg);
}
.split-animation-glitch.animate .word {
opacity: 1;
transform: translateX(0) skewX(0);
transition: all var(--animation-duration, 400ms) cubic-bezier(0.87, 0, 0.13, 1);
transition-delay: calc(var(--animation-delay, 0ms) + (var(--word-index) * var(--stagger, 40ms)));
}  .split-instant {
--animation-delay: 0ms;
--animation-duration: 300ms;
--stagger: 20ms;
}
.split-fast {
--animation-delay: 0ms;
--animation-duration: 500ms;
--stagger: 30ms;
}
.split-normal {
--animation-delay: 0ms;
--animation-duration: 800ms;
--stagger: 50ms;
}
.split-slow {
--animation-delay: 0ms;
--animation-duration: 1200ms;
--stagger: 80ms;
}
.split-elegant {
--animation-delay: 300ms;
--animation-duration: 1000ms;
--stagger: 70ms;
}
.split-dramatic {
--animation-delay: 500ms;
--animation-duration: 1500ms;
--stagger: 100ms;
} .split-delay-0 { --animation-delay: 0ms; }
.split-delay-200 { --animation-delay: 200ms; }
.split-delay-300 { --animation-delay: 300ms; }
.split-delay-500 { --animation-delay: 500ms; }
.split-delay-700 { --animation-delay: 700ms; }
.split-delay-1000 { --animation-delay: 1000ms; }
.split-delay-1500 { --animation-delay: 1500ms; }
.split-delay-2000 { --animation-delay: 2000ms; }
.split-delay-2500 { --animation-delay: 2500ms; }
.split-delay-3000 { --animation-delay: 3000ms; } .split-stagger-none { --stagger: 0ms; } .split-stagger-minimal { --stagger: 10ms; } .split-stagger-tight { --stagger: 20ms; } .split-stagger-compact { --stagger: 30ms; } .split-stagger-normal { --stagger: 50ms; } .split-stagger-relaxed { --stagger: 80ms; } .split-stagger-loose { --stagger: 120ms; } .split-stagger-dramatic { --stagger: 200ms; }  .split-duration-quick { --animation-duration: 300ms; }
.split-duration-fast { --animation-duration: 500ms; }
.split-duration-medium { --animation-duration: 800ms; }
.split-duration-slow { --animation-duration: 1200ms; }
.split-duration-glacial { --animation-duration: 2000ms; }  .split-hero {
--animation-delay: 0ms;
--animation-duration: 600ms;
--stagger: 40ms;
} .split-subtitle {
--animation-delay: 400ms;
--animation-duration: 700ms;
--stagger: 50ms;
} .split-quote {
--animation-delay: 0ms;
--animation-duration: 300ms;
--stagger: 150ms;
} .split-cta {
--animation-delay: 200ms;
--animation-duration: 800ms;
--stagger: 80ms;
} .split-elegant-title {
--animation-delay: 300ms;
--animation-duration: 1000ms;
--stagger: 70ms;
} .split-section-title {
--animation-delay: 0ms;
--animation-duration: 700ms;
--stagger: 50ms;
} .split-description {
--animation-delay: 500ms;
--animation-duration: 500ms;
--stagger: 30ms;
} .split-feature {
--animation-delay: 0ms;
--animation-duration: 600ms;
--stagger: 45ms;
} .split-portfolio {
--animation-delay: 0ms;
--animation-duration: 900ms;
--stagger: 60ms;
}  .split-cinematic {
--animation-delay: 800ms;
--animation-duration: 1800ms;
--stagger: 120ms;
} .split-flash {
--animation-delay: 0ms;
--animation-duration: 250ms;
--stagger: 15ms;
} .split-reveal {
--animation-delay: 0ms;
--animation-duration: 1400ms;
--stagger: 90ms;
} .split-signature {
--animation-delay: 300ms;
--animation-duration: 400ms;
--stagger: 180ms;
} .split-cascade {
--animation-delay: 0ms;
--animation-duration: 600ms;
--stagger: 150ms;
} .split-wave {
--animation-delay: 0ms;
--animation-duration: 700ms;
--stagger: 100ms;
} .split-punch {
--animation-delay: 0ms;
--animation-duration: 400ms;
--stagger: 40ms;
} .split-whisper {
--animation-delay: 200ms;
--animation-duration: 1200ms;
--stagger: 60ms;
} .split-thunder {
--animation-delay: 300ms;
--animation-duration: 350ms;
--stagger: 25ms;
} .split-luxury {
--animation-delay: 600ms;
--animation-duration: 1600ms;
--stagger: 100ms;
}  .split-hero-blur {
--animation-delay: 0ms;
--animation-duration: 900ms;
--stagger: 60ms;
} .split-cta-urgent {
--animation-delay: 0ms;
--animation-duration: 400ms;
--stagger: 30ms;
} .split-premium {
--animation-delay: 500ms;
--animation-duration: 1200ms;
--stagger: 80ms;
} .split-tech {
--animation-delay: 0ms;
--animation-duration: 500ms;
--stagger: 35ms;
} .split-story {
--animation-delay: 300ms;
--animation-duration: 1000ms;
--stagger: 120ms;
} .split-impact {
--animation-delay: 0ms;
--animation-duration: 550ms;
--stagger: 45ms;
} .split-teaser {
--animation-delay: 700ms;
--animation-duration: 1100ms;
--stagger: 130ms;
} .split-express {
--animation-delay: 0ms;
--animation-duration: 450ms;
--stagger: 25ms;
} .split-museum {
--animation-delay: 500ms;
--animation-duration: 1400ms;
--stagger: 90ms;
} .split-promo {
--animation-delay: 100ms;
--animation-duration: 500ms;
--stagger: 50ms;
}  @media (max-width: 767px) {
[class*="split-animation-"] .word {
transition-duration: 500ms !important;
}
.split-slow .word,
.split-dramatic .word,
.split-elegant .word,
.split-cinematic .word,
.split-reveal .word,
.split-luxury .word {
transition-duration: 700ms !important;
} .split-cascade,
.split-wave,
.split-signature,
.split-luxury {
--stagger: 80ms !important;
}
} @media (min-width: 768px) {
[class*="split-animation-"] .word { }
} @media (min-width: 768px) and (max-width: 1024px) {
.split-dramatic,
.split-cinematic,
.split-luxury {
--animation-duration: 1200ms;
}
}  .split-turbo {
--animation-duration: 300ms !important;
--stagger: 20ms !important;
} .split-ultra-slow {
--animation-duration: 2000ms !important;
--stagger: 150ms !important;
} .split-no-delay {
--animation-delay: 0ms !important;
} .split-heavy-stagger {
--stagger: 200ms !important;
} .split-light-stagger {
--stagger: 20ms !important;
} .split-simultaneous {
--stagger: 0ms !important;
} .split-pause {
--animation-delay: 1000ms !important;
}  .split-headline {
--animation-delay: 0ms;
--animation-duration: 550ms;
--stagger: 40ms;
} .split-article {
--animation-delay: 200ms;
--animation-duration: 700ms;
--stagger: 55ms;
} .split-price {
--animation-delay: 300ms;
--animation-duration: 600ms;
--stagger: 70ms;
} .split-product {
--animation-delay: 0ms;
--animation-duration: 650ms;
--stagger: 50ms;
} .split-event {
--animation-delay: 400ms;
--animation-duration: 800ms;
--stagger: 60ms;
}