/* Site Name Animations - 100+ Comprehensive Animation Library */
/* Base site-name class */
.site-name {
    position: relative;
    display: inline-block;
}

/* 1. FADE ANIMATIONS */
@keyframes site-name-fade-in {
    0% { opacity: 0; transform: translateY(-10px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes site-name-fade-in-up {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes site-name-fade-in-down {
    0% { opacity: 0; transform: translateY(-30px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes site-name-fade-in-left {
    0% { opacity: 0; transform: translateX(-30px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes site-name-fade-in-right {
    0% { opacity: 0; transform: translateX(30px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* 2. SLIDE ANIMATIONS */
@keyframes site-name-slide-in-left {
    0% { opacity: 0; transform: translateX(-100px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes site-name-slide-in-right {
    0% { opacity: 0; transform: translateX(100px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes site-name-slide-in-up {
    0% { opacity: 0; transform: translateY(100px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes site-name-slide-in-down {
    0% { opacity: 0; transform: translateY(-100px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 3. BOUNCE ANIMATIONS */
@keyframes site-name-bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-15px); }
    60% { transform: translateY(-7px); }
}

@keyframes site-name-bounce-in {
    0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
    20% { transform: scale3d(1.1, 1.1, 1.1); }
    40% { transform: scale3d(0.9, 0.9, 0.9); }
    60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); }
    80% { transform: scale3d(0.97, 0.97, 0.97); }
    100% { opacity: 1; transform: scale3d(1, 1, 1); }
}

@keyframes site-name-bounce-in-up {
    0% { opacity: 0; transform: translateY(3000px) scaleY(5); }
    60% { opacity: 1; transform: translateY(-20px) scaleY(0.9); }
    75% { transform: translateY(10px) scaleY(0.95); }
    90% { transform: translateY(-5px) scaleY(0.985); }
    100% { transform: translateY(0) scaleY(1); }
}

@keyframes site-name-bounce-in-down {
    0% { opacity: 0; transform: translateY(-3000px) scaleY(3); }
    60% { opacity: 1; transform: translateY(25px) scaleY(0.9); }
    75% { transform: translateY(-10px) scaleY(0.95); }
    90% { transform: translateY(5px) scaleY(0.985); }
    100% { transform: translateY(0) scaleY(1); }
}

@keyframes site-name-bounce-in-left {
    0% { opacity: 0; transform: translateX(-3000px) scaleX(3); }
    60% { opacity: 1; transform: translateX(25px) scaleX(1); }
    75% { transform: translateX(-10px) scaleX(0.98); }
    90% { transform: translateX(5px) scaleX(0.995); }
    100% { transform: translateX(0) scaleX(1); }
}

@keyframes site-name-bounce-in-right {
    0% { opacity: 0; transform: translateX(3000px) scaleX(3); }
    60% { opacity: 1; transform: translateX(-25px) scaleX(1); }
    75% { transform: translateX(10px) scaleX(0.98); }
    90% { transform: translateX(-5px) scaleX(0.995); }
    100% { transform: translateX(0) scaleX(1); }
}

/* 4. ZOOM ANIMATIONS */
@keyframes site-name-zoom-in {
    0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
    50% { opacity: 1; }
    100% { transform: scale3d(1, 1, 1); }
}

@keyframes site-name-zoom-in-up {
    0% { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translateY(1000px); }
    60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translateY(-60px); }
    100% { transform: scale3d(1, 1, 1) translateY(0); }
}

@keyframes site-name-zoom-in-down {
    0% { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translateY(-1000px); }
    60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translateY(60px); }
    100% { transform: scale3d(1, 1, 1) translateY(0); }
}

@keyframes site-name-zoom-in-left {
    0% { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translateX(-1000px); }
    60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translateX(10px); }
    100% { transform: scale3d(1, 1, 1) translateX(0); }
}

@keyframes site-name-zoom-in-right {
    0% { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translateX(1000px); }
    60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translateX(-10px); }
    100% { transform: scale3d(1, 1, 1) translateX(0); }
}

@keyframes site-name-zoom-out {
    0% { opacity: 0; transform: scale3d(1.5, 1.5, 1.5); }
    100% { opacity: 1; transform: scale3d(1, 1, 1); }
}

@keyframes site-name-zoom-out-up {
    0% { opacity: 0; transform: scale3d(0.475, 0.475, 0.475) translateY(60px); }
    60% { opacity: 1; transform: scale3d(0.1, 0.1, 0.1) translateY(-1000px); }
    100% { transform: scale3d(1, 1, 1) translateY(0); }
}

@keyframes site-name-zoom-out-down {
    0% { opacity: 0; transform: scale3d(0.475, 0.475, 0.475) translateY(-60px); }
    60% { opacity: 1; transform: scale3d(0.1, 0.1, 0.1) translateY(1000px); }
    100% { transform: scale3d(1, 1, 1) translateY(0); }
}

@keyframes site-name-zoom-out-left {
    0% { opacity: 0; transform: scale3d(0.475, 0.475, 0.475) translateX(10px); }
    60% { opacity: 1; transform: scale3d(0.1, 0.1, 0.1) translateX(-1000px); }
    100% { transform: scale3d(1, 1, 1) translateX(0); }
}

@keyframes site-name-zoom-out-right {
    0% { opacity: 0; transform: scale3d(0.475, 0.475, 0.475) translateX(-10px); }
    60% { opacity: 1; transform: scale3d(0.1, 0.1, 0.1) translateX(1000px); }
    100% { transform: scale3d(1, 1, 1) translateX(0); }
}

/* 5. ROTATE ANIMATIONS */
@keyframes site-name-rotate-in {
    0% { opacity: 0; transform: rotate(-200deg); }
    100% { opacity: 1; transform: rotate(0); }
}

@keyframes site-name-rotate-in-up-left {
    0% { opacity: 0; transform: rotate(-45deg) translate3d(-100%, 100%, 0); }
    100% { opacity: 1; transform: rotate(0deg) translate3d(0, 0, 0); }
}

@keyframes site-name-rotate-in-up-right {
    0% { opacity: 0; transform: rotate(45deg) translate3d(100%, 100%, 0); }
    100% { opacity: 1; transform: rotate(0deg) translate3d(0, 0, 0); }
}

@keyframes site-name-rotate-in-down-left {
    0% { opacity: 0; transform: rotate(45deg) translate3d(-100%, -100%, 0); }
    100% { opacity: 1; transform: rotate(0deg) translate3d(0, 0, 0); }
}

@keyframes site-name-rotate-in-down-right {
    0% { opacity: 0; transform: rotate(-45deg) translate3d(100%, -100%, 0); }
    100% { opacity: 1; transform: rotate(0deg) translate3d(0, 0, 0); }
}

/* 6. FLIP ANIMATIONS */
@keyframes site-name-flip-in-x {
    0% { opacity: 0; transform: perspective(400px) rotateX(90deg); }
    40% { transform: perspective(400px) rotateX(-20deg); }
    60% { transform: perspective(400px) rotateX(10deg); opacity: 1; }
    80% { transform: perspective(400px) rotateX(-5deg); }
    100% { transform: perspective(400px) rotateX(0deg); }
}

@keyframes site-name-flip-in-y {
    0% { opacity: 0; transform: perspective(400px) rotateY(90deg); }
    40% { transform: perspective(400px) rotateY(-20deg); }
    60% { transform: perspective(400px) rotateY(10deg); opacity: 1; }
    80% { transform: perspective(400px) rotateY(-5deg); }
    100% { transform: perspective(400px) rotateY(0deg); }
}

/* 7. LIGHT SPEED ANIMATIONS */
@keyframes site-name-light-speed-in {
    0% { opacity: 0; transform: translate3d(100%, 0, 0) skewX(-30deg); }
    60% { opacity: 1; transform: skewX(20deg); }
    80% { transform: skewX(-5deg); }
    100% { transform: translate3d(0, 0, 0); }
}

@keyframes site-name-light-speed-in-right {
    0% { opacity: 0; transform: translate3d(100%, 0, 0) skewX(-30deg); }
    60% { opacity: 1; transform: skewX(20deg); }
    80% { transform: skewX(-5deg); }
    100% { transform: translate3d(0, 0, 0); }
}

@keyframes site-name-light-speed-in-left {
    0% { opacity: 0; transform: translate3d(-100%, 0, 0) skewX(30deg); }
    60% { opacity: 1; transform: skewX(-20deg); }
    80% { transform: skewX(5deg); }
    100% { transform: translate3d(0, 0, 0); }
}

/* 8. ROLL ANIMATION */
@keyframes site-name-roll-in {
    0% { opacity: 0; transform: translate3d(-100%, 0, 0) rotate(-120deg); }
    100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* 9. TYPEWRITER ANIMATIONS */
@keyframes site-name-typewriter {
    0% { width: 0; opacity: 0; }
    1% { opacity: 1; }
    100% { width: 100%; opacity: 1; }
}

@keyframes site-name-typewriter-slow {
    0% { width: 0; opacity: 0; }
    1% { opacity: 1; }
    100% { width: 100%; opacity: 1; }
}

@keyframes site-name-typewriter-fast {
    0% { width: 0; opacity: 0; }
    1% { opacity: 1; }
    100% { width: 100%; opacity: 1; }
}

@keyframes blink-cursor {
    0%, 50% { border-color: rgba(255, 255, 255, 0.8); }
    51%, 100% { border-color: transparent; }
}

/* 10. GLOW ANIMATIONS */
@keyframes site-name-glow {
    0%, 100% { text-shadow: 0 0 5px rgba(255, 255, 255, 0.8), 0 0 10px rgba(255, 255, 255, 0.6); }
    50% { text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 0.8), 0 0 30px rgba(255, 255, 255, 0.6); }
}

@keyframes site-name-glow-pulse {
    0%, 100% { text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); }
    50% { text-shadow: 0 0 20px rgba(255, 255, 255, 1), 0 0 30px rgba(255, 255, 255, 0.8); }
}

@keyframes site-name-neon-flicker {
    0%, 18%, 22%, 25%, 53%, 57%, 100% {
        text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px #0fa, 0 0 80px #0fa, 0 0 90px #0fa, 0 0 100px #0fa, 0 0 150px #0fa;
    }
    20%, 24%, 55% { text-shadow: none; }
}

@keyframes site-name-rainbow-text {
    0% { color: #ff0000; }
    14% { color: #ff7f00; }
    28% { color: #ffff00; }
    42% { color: #00ff00; }
    57% { color: #0000ff; }
    71% { color: #4b0082; }
    85% { color: #9400d3; }
    100% { color: #ff0000; }
}

@keyframes site-name-gradient-shift {
    0% { background: linear-gradient(45deg, #ff0000, #ffff00); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
    25% { background: linear-gradient(45deg, #ffff00, #00ff00); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
    50% { background: linear-gradient(45deg, #00ff00, #0000ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
    75% { background: linear-gradient(45deg, #0000ff, #ff00ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
    100% { background: linear-gradient(45deg, #ff00ff, #ff0000); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
}

@keyframes site-name-text-shadow-pop {
    0% { text-shadow: 0 0 0 transparent; transform: scale(1); }
    50% { text-shadow: 0 0 20px rgba(255, 255, 255, 0.8); transform: scale(1.1); }
    100% { text-shadow: 0 0 0 transparent; transform: scale(1); }
}

/* 11. ELASTIC ANIMATIONS */
@keyframes site-name-elastic {
    0% { transform: scale3d(1, 1, 1); }
    30% { transform: scale3d(1.25, 0.75, 1); }
    40% { transform: scale3d(0.75, 1.25, 1); }
    50% { transform: scale3d(1.15, 0.85, 1); }
    65% { transform: scale3d(0.95, 1.05, 1); }
    75% { transform: scale3d(1.05, 0.95, 1); }
    100% { transform: scale3d(1, 1, 1); }
}

@keyframes site-name-rubber-band {
    0% { transform: scale3d(1, 1, 1); }
    30% { transform: scale3d(1.25, 0.75, 1); }
    40% { transform: scale3d(0.75, 1.25, 1); }
    50% { transform: scale3d(1.15, 0.85, 1); }
    65% { transform: scale3d(0.95, 1.05, 1); }
    75% { transform: scale3d(1.05, 0.95, 1); }
    100% { transform: scale3d(1, 1, 1); }
}

/* 12. SHAKE & WOBBLE ANIMATIONS */
@keyframes site-name-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
    20%, 40%, 60%, 80% { transform: translateX(10px); }
}

@keyframes site-name-wobble {
    0% { transform: translateX(0%); }
    15% { transform: translateX(-25%) rotateZ(-5deg); }
    30% { transform: translateX(20%) rotateZ(3deg); }
    45% { transform: translateX(-15%) rotateZ(-3deg); }
    60% { transform: translateX(10%) rotateZ(2deg); }
    75% { transform: translateX(-5%) rotateZ(-1deg); }
    100% { transform: translateX(0%); }
}

@keyframes site-name-jello {
    0%, 11.1%, 100% { transform: translate3d(0, 0, 0); }
    22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); }
    33.3% { transform: skewX(6.25deg) skewY(6.25deg); }
    44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); }
    55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); }
    66.6% { transform: skewX(-0.78125deg) skewY(-0.78125deg); }
    77.7% { transform: skewX(0.390625deg) skewY(0.390625deg); }
    88.8% { transform: skewX(-0.1953125deg) skewY(-0.1953125deg); }
}

/* 13. PULSE & BEAT ANIMATIONS */
@keyframes site-name-heart-beat {
    0% { transform: scale(1); }
    14% { transform: scale(1.3); }
    28% { transform: scale(1); }
    42% { transform: scale(1.3); }
    70% { transform: scale(1); }
}

@keyframes site-name-pulse {
    0% { transform: scale3d(1, 1, 1); }
    50% { transform: scale3d(1.05, 1.05, 1.05); }
    100% { transform: scale3d(1, 1, 1); }
}

@keyframes site-name-pulse-grow {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes site-name-pulse-shrink {
    0% { transform: scale(1); }
    50% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

/* 14. FLASH & STROBE */
@keyframes site-name-flash {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0; }
}

@keyframes site-name-strobe {
    0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100% { opacity: 1; }
    5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% { opacity: 0; }
}

/* 15. SWING & MOTION */
@keyframes site-name-swing {
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(5deg); }
    80% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

@keyframes site-name-tada {
    0% { transform: scale3d(1, 1, 1); }
    10%, 20% { transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); }
    30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); }
    40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); }
    100% { transform: scale3d(1, 1, 1); }
}

@keyframes site-name-wave {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(14deg); }
    20% { transform: rotate(-8deg); }
    30% { transform: rotate(14deg); }
    40% { transform: rotate(-4deg); }
    50% { transform: rotate(10deg); }
    60% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

/* 16. FLIP VARIATIONS */
@keyframes site-name-flip {
    0% { transform: perspective(400px) rotateY(0); }
    40% { transform: perspective(400px) translateZ(150px) rotateY(170deg); }
    50% { transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); }
    80% { transform: perspective(400px) rotateY(360deg) scale(0.95); }
    100% { transform: perspective(400px) scale(1); }
}

@keyframes site-name-flip-horizontal {
    0% { transform: perspective(400px) rotateY(0); }
    40% { transform: perspective(400px) translateZ(150px) rotateY(170deg); }
    50% { transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); }
    80% { transform: perspective(400px) rotateY(360deg) scale(0.95); }
    100% { transform: perspective(400px) scale(1); }
}

@keyframes site-name-flip-vertical {
    0% { transform: perspective(400px) rotateX(0); }
    40% { transform: perspective(400px) translateZ(150px) rotateX(170deg); }
    50% { transform: perspective(400px) translateZ(150px) rotateX(190deg) scale(1); }
    80% { transform: perspective(400px) rotateX(360deg) scale(0.95); }
    100% { transform: perspective(400px) scale(1); }
}

/* 17. SPECIAL EFFECTS */
@keyframes site-name-hinge {
    0% { transform-origin: top left; }
    20%, 60% { transform: rotate(80deg); transform-origin: top left; }
    40%, 80% { transform: rotate(60deg); transform-origin: top left; opacity: 1; }
    100% { transform: translateY(700px); opacity: 0; }
}

@keyframes site-name-jack-in-the-box {
    0% { opacity: 0; transform: scale(0.1) rotate(30deg); transform-origin: center bottom; }
    50% { transform: rotate(-10deg); }
    70% { transform: rotate(3deg); }
    100% { opacity: 1; transform: scale(1); }
}

/* 18. BACK IN ANIMATIONS */
@keyframes site-name-back-in-up {
    0% { opacity: 0.7; transform: translateY(1200px) scale(0.7); }
    80% { opacity: 0.7; transform: translateY(0px) scale(0.7); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes site-name-back-in-down {
    0% { opacity: 0.7; transform: translateY(-1200px) scale(0.7); }
    80% { opacity: 0.7; transform: translateY(0px) scale(0.7); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes site-name-back-in-left {
    0% { opacity: 0.7; transform: translateX(-2000px) scale(0.7); }
    80% { opacity: 0.7; transform: translateX(0px) scale(0.7); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes site-name-back-in-right {
    0% { opacity: 0.7; transform: translateX(2000px) scale(0.7); }
    80% { opacity: 0.7; transform: translateX(0px) scale(0.7); }
    100% { opacity: 1; transform: scale(1); }
}

/* 19. HOVER EFFECTS */
@keyframes site-name-float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

@keyframes site-name-sink {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(20px); }
}

@keyframes site-name-hover {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes site-name-hang {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(10px); }
}

/* 20. SKEW ANIMATIONS */
@keyframes site-name-skew {
    0% { transform: skew(0deg, 0deg); }
    20% { transform: skew(25deg, 5deg); }
    40% { transform: skew(-15deg, -5deg); }
    60% { transform: skew(15deg, 3deg); }
    80% { transform: skew(-5deg, -1deg); }
    100% { transform: skew(0deg, 0deg); }
}

@keyframes site-name-skew-forward {
    0% { transform: perspective(400px) translateZ(0px) skew(0deg, 0deg); }
    25% { transform: perspective(400px) translateZ(160px) skew(-10deg, 0deg); }
    50% { transform: perspective(400px) translateZ(160px) skew(10deg, 0deg); }
    75% { transform: perspective(400px) translateZ(160px) skew(-5deg, 0deg); }
    100% { transform: perspective(400px) translateZ(0px) skew(0deg, 0deg); }
}

@keyframes site-name-skew-backward {
    0% { transform: perspective(400px) translateZ(0px) skew(0deg, 0deg); }
    25% { transform: perspective(400px) translateZ(-160px) skew(10deg, 0deg); }
    50% { transform: perspective(400px) translateZ(-160px) skew(-10deg, 0deg); }
    75% { transform: perspective(400px) translateZ(-160px) skew(5deg, 0deg); }
    100% { transform: perspective(400px) translateZ(0px) skew(0deg, 0deg); }
}

/* 21. WOBBLE VARIATIONS */
@keyframes site-name-wobble-vertical {
    16.65% { transform: translateY(8px); }
    33.3% { transform: translateY(-6px); }
    49.95% { transform: translateY(4px); }
    66.6% { transform: translateY(-2px); }
    83.25% { transform: translateY(1px); }
    100% { transform: translateY(0); }
}

@keyframes site-name-wobble-horizontal {
    16.65% { transform: translateX(8px); }
    33.3% { transform: translateX(-6px); }
    49.95% { transform: translateX(4px); }
    66.6% { transform: translateX(-2px); }
    83.25% { transform: translateX(1px); }
    100% { transform: translateX(0); }
}

@keyframes site-name-wobble-to-bottom-right {
    16.65% { transform: translate(8px, 8px); }
    33.3% { transform: translate(-6px, -6px); }
    49.95% { transform: translate(4px, 4px); }
    66.6% { transform: translate(-2px, -2px); }
    83.25% { transform: translate(1px, 1px); }
    100% { transform: translate(0, 0); }
}

@keyframes site-name-wobble-to-top-right {
    16.65% { transform: translate(8px, -8px); }
    33.3% { transform: translate(-6px, 6px); }
    49.95% { transform: translate(4px, -4px); }
    66.6% { transform: translate(-2px, 2px); }
    83.25% { transform: translate(1px, -1px); }
    100% { transform: translate(0, 0); }
}

@keyframes site-name-wobble-top {
    16.65% { transform: skew(-12deg); }
    33.3% { transform: skew(10deg); }
    49.95% { transform: skew(-6deg); }
    66.6% { transform: skew(4deg); }
    83.25% { transform: skew(-2deg); }
    100% { transform: skew(0); }
}

@keyframes site-name-wobble-bottom {
    16.65% { transform: skew(-12deg); }
    33.3% { transform: skew(10deg); }
    49.95% { transform: skew(-6deg); }
    66.6% { transform: skew(4deg); }
    83.25% { transform: skew(-2deg); }
    100% { transform: skew(0); }
}

/* 22. VIBRATE ANIMATIONS */
@keyframes site-name-vibrate {
    0% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
    100% { transform: translate(0); }
}

@keyframes site-name-vibrate-1 {
    0% { transform: translate(0); }
    20% { transform: translate(-1px, 1px); }
    40% { transform: translate(-1px, -1px); }
    60% { transform: translate(1px, 1px); }
    80% { transform: translate(1px, -1px); }
    100% { transform: translate(0); }
}

@keyframes site-name-vibrate-2 {
    0% { transform: translate(0); }
    20% { transform: translate(-3px, 3px); }
    40% { transform: translate(-3px, -3px); }
    60% { transform: translate(3px, 3px); }
    80% { transform: translate(3px, -3px); }
    100% { transform: translate(0); }
}

@keyframes site-name-vibrate-3 {
    0% { transform: translate(0); }
    20% { transform: translate(-4px, 4px); }
    40% { transform: translate(-4px, -4px); }
    60% { transform: translate(4px, 4px); }
    80% { transform: translate(4px, -4px); }
    100% { transform: translate(0); }
}

/* 23. FOCUS ANIMATIONS */
@keyframes site-name-focus-in-contract {
    0% { letter-spacing: 1em; filter: blur(12px); opacity: 0; }
    100% { filter: blur(0px); opacity: 1; }
}

@keyframes site-name-focus-in-expand {
    0% { letter-spacing: -0.5em; filter: blur(12px); opacity: 0; }
    100% { filter: blur(0px); opacity: 1; }
}

/* 24. SLIDE BLURRED ANIMATIONS */
@keyframes site-name-slide-in-blurred-top {
    0% { transform: translateY(-1000px) scaleY(2.5) scaleX(0.2); filter: blur(40px); opacity: 0; }
    100% { transform: translateY(0) scaleY(1) scaleX(1); filter: blur(0); opacity: 1; }
}

@keyframes site-name-slide-in-blurred-bottom {
    0% { transform: translateY(1000px) scaleY(2.5) scaleX(0.2); filter: blur(40px); opacity: 0; }
    100% { transform: translateY(0) scaleY(1) scaleX(1); filter: blur(0); opacity: 1; }
}

@keyframes site-name-slide-in-blurred-left {
    0% { transform: translateX(-1000px) scaleX(2.5) scaleY(0.2); filter: blur(40px); opacity: 0; }
    100% { transform: translateX(0) scaleY(1) scaleX(1); filter: blur(0); opacity: 1; }
}

@keyframes site-name-slide-in-blurred-right {
    0% { transform: translateX(1000px) scaleX(2.5) scaleY(0.2); filter: blur(40px); opacity: 0; }
    100% { transform: translateX(0) scaleY(1) scaleX(1); filter: blur(0); opacity: 1; }
}

/* 25. ELLIPTIC ANIMATIONS */
@keyframes site-name-slide-in-elliptic-top-fwd {
    0% { transform: translateY(-600px) rotateX(-30deg) scale(0); opacity: 0; }
    100% { transform: translateY(0) rotateX(0) scale(1); opacity: 1; }
}

@keyframes site-name-slide-in-elliptic-bottom-fwd {
    0% { transform: translateY(600px) rotateX(30deg) scale(0); opacity: 0; }
    100% { transform: translateY(0) rotateX(0) scale(1); opacity: 1; }
}

@keyframes site-name-slide-in-elliptic-left-fwd {
    0% { transform: translateX(-800px) rotateY(-30deg) scale(0); opacity: 0; }
    100% { transform: translateX(0) rotateY(0) scale(1); opacity: 1; }
}

@keyframes site-name-slide-in-elliptic-right-fwd {
    0% { transform: translateX(800px) rotateY(30deg) scale(0); opacity: 0; }
    100% { transform: translateX(0) rotateY(0) scale(1); opacity: 1; }
}

/* 26. FORWARD SLIDE ANIMATIONS */
@keyframes site-name-slide-in-fwd-center {
    0% { transform: translateZ(-1400px); opacity: 0; }
    100% { transform: translateZ(0); opacity: 1; }
}

@keyframes site-name-slide-in-fwd-top {
    0% { transform: translateY(-1300px) translateZ(-1300px); opacity: 0; }
    100% { transform: translateY(0) translateZ(0); opacity: 1; }
}

@keyframes site-name-slide-in-fwd-bottom {
    0% { transform: translateY(1300px) translateZ(-1300px); opacity: 0; }
    100% { transform: translateY(0) translateZ(0); opacity: 1; }
}

@keyframes site-name-slide-in-fwd-left {
    0% { transform: translateX(-1300px) translateZ(-1300px); opacity: 0; }
    100% { transform: translateX(0) translateZ(0); opacity: 1; }
}

@keyframes site-name-slide-in-fwd-right {
    0% { transform: translateX(1300px) translateZ(-1300px); opacity: 0; }
    100% { transform: translateX(0) translateZ(0); opacity: 1; }
}

/* 27. FLICKER & TRACKING */
@keyframes site-name-text-flicker-in-glow {
    0% { opacity: 0; }
    10% { opacity: 0; text-shadow: none; }
    10.1% { opacity: 1; text-shadow: none; }
    10.2% { opacity: 0; text-shadow: none; }
    20% { opacity: 0; text-shadow: none; }
    20.1% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.25); }
    20.6% { opacity: 0; text-shadow: none; }
    30% { opacity: 0; text-shadow: none; }
    30.1% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); }
    30.5% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); }
    30.6% { opacity: 0; text-shadow: none; }
    45% { opacity: 0; text-shadow: none; }
    45.1% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); }
    50% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); }
    55% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); }
    55.1% { opacity: 0; text-shadow: none; }
    57% { opacity: 0; text-shadow: none; }
    57.1% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35); }
    60% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35); }
    60.1% { opacity: 0; text-shadow: none; }
    65% { opacity: 0; text-shadow: none; }
    65.1% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1); }
    75% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1); }
    75.1% { opacity: 0; text-shadow: none; }
    77% { opacity: 0; text-shadow: none; }
    77.1% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1); }
    85% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1); }
    85.1% { opacity: 0; text-shadow: none; }
    86% { opacity: 0; text-shadow: none; }
    86.1% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1); }
    100% { opacity: 1; text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1); }
}

@keyframes site-name-tracking-in-expand {
    0% { letter-spacing: -0.5em; opacity: 0; }
    40% { opacity: 0.6; }
    100% { opacity: 1; }
}

@keyframes site-name-tracking-in-contract {
    0% { letter-spacing: 1em; opacity: 0; }
    40% { opacity: 0.6; }
    100% { opacity: 1; }
}

/* 28. KEN BURNS EFFECTS */
@keyframes site-name-kenburns-top {
    0% { transform: scale(1) translateY(0); transform-origin: 50% 16%; }
    100% { transform: scale(1.25) translateY(-15px); transform-origin: top; }
}

@keyframes site-name-kenburns-bottom {
    0% { transform: scale(1) translateY(0); transform-origin: 50% 84%; }
    100% { transform: scale(1.25) translateY(15px); transform-origin: bottom; }
}

@keyframes site-name-kenburns-left {
    0% { transform: scale(1) translateX(0); transform-origin: 16% 50%; }
    100% { transform: scale(1.25) translateX(-15px); transform-origin: left; }
}

@keyframes site-name-kenburns-right {
    0% { transform: scale(1) translateX(0); transform-origin: 84% 50%; }
    100% { transform: scale(1.25) translateX(15px); transform-origin: right; }
}

/* ANIMATION CLASSES */
.site-name-fade-in { animation: site-name-fade-in 1s ease-out; }
.site-name-fade-in-up { animation: site-name-fade-in-up 1s ease-out; }
.site-name-fade-in-down { animation: site-name-fade-in-down 1s ease-out; }
.site-name-fade-in-left { animation: site-name-fade-in-left 1s ease-out; }
.site-name-fade-in-right { animation: site-name-fade-in-right 1s ease-out; }

.site-name-slide-in-left { animation: site-name-slide-in-left 1s ease-out; }
.site-name-slide-in-right { animation: site-name-slide-in-right 1s ease-out; }
.site-name-slide-in-up { animation: site-name-slide-in-up 1s ease-out; }
.site-name-slide-in-down { animation: site-name-slide-in-down 1s ease-out; }

.site-name-bounce { animation: site-name-bounce 1s ease-out; }
.site-name-bounce-in { animation: site-name-bounce-in 1s ease-out; }
.site-name-bounce-in-up { animation: site-name-bounce-in-up 1s ease-out; }
.site-name-bounce-in-down { animation: site-name-bounce-in-down 1s ease-out; }
.site-name-bounce-in-left { animation: site-name-bounce-in-left 1s ease-out; }
.site-name-bounce-in-right { animation: site-name-bounce-in-right 1s ease-out; }

.site-name-zoom-in { animation: site-name-zoom-in 1s ease-out; }
.site-name-zoom-in-up { animation: site-name-zoom-in-up 1s ease-out; }
.site-name-zoom-in-down { animation: site-name-zoom-in-down 1s ease-out; }
.site-name-zoom-in-left { animation: site-name-zoom-in-left 1s ease-out; }
.site-name-zoom-in-right { animation: site-name-zoom-in-right 1s ease-out; }
.site-name-zoom-out { animation: site-name-zoom-out 1s ease-out; }
.site-name-zoom-out-up { animation: site-name-zoom-out-up 1s ease-out; }
.site-name-zoom-out-down { animation: site-name-zoom-out-down 1s ease-out; }
.site-name-zoom-out-left { animation: site-name-zoom-out-left 1s ease-out; }
.site-name-zoom-out-right { animation: site-name-zoom-out-right 1s ease-out; }

.site-name-rotate-in { animation: site-name-rotate-in 1s ease-out; }
.site-name-rotate-in-up-left { animation: site-name-rotate-in-up-left 1s ease-out; }
.site-name-rotate-in-up-right { animation: site-name-rotate-in-up-right 1s ease-out; }
.site-name-rotate-in-down-left { animation: site-name-rotate-in-down-left 1s ease-out; }
.site-name-rotate-in-down-right { animation: site-name-rotate-in-down-right 1s ease-out; }

.site-name-flip-in-x { animation: site-name-flip-in-x 1s ease-out; }
.site-name-flip-in-y { animation: site-name-flip-in-y 1s ease-out; }

.site-name-light-speed-in { animation: site-name-light-speed-in 1s ease-out; }
.site-name-light-speed-in-right { animation: site-name-light-speed-in-right 1s ease-out; }
.site-name-light-speed-in-left { animation: site-name-light-speed-in-left 1s ease-out; }

.site-name-roll-in { animation: site-name-roll-in 1s ease-out; }

.site-name-typewriter {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid rgba(255, 255, 255, 0.8);
    width: 0;
    animation: site-name-typewriter 2s steps(20) 1s forwards, blink-cursor 1s infinite;
}

.site-name-typewriter-slow {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid rgba(255, 255, 255, 0.8);
    width: 0;
    animation: site-name-typewriter-slow 4s steps(20) 1s forwards, blink-cursor 1s infinite;
}

.site-name-typewriter-fast {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid rgba(255, 255, 255, 0.8);
    width: 0;
    animation: site-name-typewriter-fast 1s steps(20) 0.5s forwards, blink-cursor 0.5s infinite;
}

.site-name-glow { animation: site-name-glow 2s ease-in-out infinite; }
.site-name-glow-pulse { animation: site-name-glow-pulse 2s ease-in-out infinite; }
.site-name-neon-flicker { animation: site-name-neon-flicker 3s linear infinite; }
.site-name-rainbow-text { animation: site-name-rainbow-text 3s linear infinite; }
.site-name-gradient-shift { animation: site-name-gradient-shift 3s ease-in-out infinite; }
.site-name-text-shadow-pop { animation: site-name-text-shadow-pop 1s ease-out; }

.site-name-elastic { animation: site-name-elastic 1s ease-out; }
.site-name-rubber-band { animation: site-name-rubber-band 1s ease-out; }

.site-name-shake { animation: site-name-shake 1s ease-out; }
.site-name-wobble { animation: site-name-wobble 1s ease-out; }
.site-name-jello { animation: site-name-jello 1s ease-out; }

.site-name-heart-beat { animation: site-name-heart-beat 1.5s ease-in-out infinite; }
.site-name-pulse { animation: site-name-pulse 2s infinite; }
.site-name-pulse-grow { animation: site-name-pulse-grow 2s infinite; }
.site-name-pulse-shrink { animation: site-name-pulse-shrink 2s infinite; }

.site-name-flash { animation: site-name-flash 2s infinite; }
.site-name-strobe { animation: site-name-strobe 1s infinite; }

.site-name-swing { animation: site-name-swing 1s ease-out; }
.site-name-tada { animation: site-name-tada 1s ease-out; }
.site-name-wave { animation: site-name-wave 1s ease-out; }

.site-name-flip { animation: site-name-flip 1s ease-out; }
.site-name-flip-horizontal { animation: site-name-flip-horizontal 1s ease-out; }
.site-name-flip-vertical { animation: site-name-flip-vertical 1s ease-out; }

.site-name-hinge { animation: site-name-hinge 2s ease-out; }
.site-name-jack-in-the-box { animation: site-name-jack-in-the-box 1s ease-out; }

.site-name-back-in-up { animation: site-name-back-in-up 1s ease-out; }
.site-name-back-in-down { animation: site-name-back-in-down 1s ease-out; }
.site-name-back-in-left { animation: site-name-back-in-left 1s ease-out; }
.site-name-back-in-right { animation: site-name-back-in-right 1s ease-out; }

.site-name-float { animation: site-name-float 3s ease-in-out infinite; }
.site-name-sink { animation: site-name-sink 3s ease-in-out infinite; }
.site-name-hover { animation: site-name-hover 2s ease-in-out infinite; }
.site-name-hang { animation: site-name-hang 2s ease-in-out infinite; }

.site-name-skew { animation: site-name-skew 1s ease-out; }
.site-name-skew-forward { animation: site-name-skew-forward 1s ease-out; }
.site-name-skew-backward { animation: site-name-skew-backward 1s ease-out; }

.site-name-wobble-vertical { animation: site-name-wobble-vertical 1s ease-out; }
.site-name-wobble-horizontal { animation: site-name-wobble-horizontal 1s ease-out; }
.site-name-wobble-to-bottom-right { animation: site-name-wobble-to-bottom-right 1s ease-out; }
.site-name-wobble-to-top-right { animation: site-name-wobble-to-top-right 1s ease-out; }
.site-name-wobble-top { animation: site-name-wobble-top 1s ease-out; }
.site-name-wobble-bottom { animation: site-name-wobble-bottom 1s ease-out; }

.site-name-vibrate { animation: site-name-vibrate 0.5s linear infinite both; }
.site-name-vibrate-1 { animation: site-name-vibrate-1 0.5s linear infinite both; }
.site-name-vibrate-2 { animation: site-name-vibrate-2 0.5s linear infinite both; }
.site-name-vibrate-3 { animation: site-name-vibrate-3 0.5s linear infinite both; }

.site-name-focus-in-contract { animation: site-name-focus-in-contract 1s ease-out both; }
.site-name-focus-in-expand { animation: site-name-focus-in-expand 1s ease-out both; }

.site-name-slide-in-blurred-top { animation: site-name-slide-in-blurred-top 1s ease-out both; }
.site-name-slide-in-blurred-bottom { animation: site-name-slide-in-blurred-bottom 1s ease-out both; }
.site-name-slide-in-blurred-left { animation: site-name-slide-in-blurred-left 1s ease-out both; }
.site-name-slide-in-blurred-right { animation: site-name-slide-in-blurred-right 1s ease-out both; }

.site-name-slide-in-elliptic-top-fwd { animation: site-name-slide-in-elliptic-top-fwd 1s ease-out both; }
.site-name-slide-in-elliptic-bottom-fwd { animation: site-name-slide-in-elliptic-bottom-fwd 1s ease-out both; }
.site-name-slide-in-elliptic-left-fwd { animation: site-name-slide-in-elliptic-left-fwd 1s ease-out both; }
.site-name-slide-in-elliptic-right-fwd { animation: site-name-slide-in-elliptic-right-fwd 1s ease-out both; }

.site-name-slide-in-fwd-center { animation: site-name-slide-in-fwd-center 1s ease-out both; }
.site-name-slide-in-fwd-top { animation: site-name-slide-in-fwd-top 1s ease-out both; }
.site-name-slide-in-fwd-bottom { animation: site-name-slide-in-fwd-bottom 1s ease-out both; }
.site-name-slide-in-fwd-left { animation: site-name-slide-in-fwd-left 1s ease-out both; }
.site-name-slide-in-fwd-right { animation: site-name-slide-in-fwd-right 1s ease-out both; }

.site-name-text-flicker-in-glow { animation: site-name-text-flicker-in-glow 4s linear both; }
.site-name-tracking-in-expand { animation: site-name-tracking-in-expand 1s ease-out both; }
.site-name-tracking-in-contract { animation: site-name-tracking-in-contract 1s ease-out both; }

.site-name-kenburns-top { animation: site-name-kenburns-top 5s ease-out both; }
.site-name-kenburns-bottom { animation: site-name-kenburns-bottom 5s ease-out both; }
.site-name-kenburns-left { animation: site-name-kenburns-left 5s ease-out both; }
.site-name-kenburns-right { animation: site-name-kenburns-right 5s ease-out both; }

/* Preview-specific styles for admin modal */
.typewriter-preview {
    overflow: hidden !important;
    white-space: nowrap !important;
    border-right: 2px solid rgba(255, 255, 255, 0.8) !important;
    width: 0 !important;
}

.glow-preview {
    text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 0.8) !important;
}