/* ==========================================
   SITES SIMPLES - BIBLIOTECA DE ANIMAÇÕES
   200+ Microanimações + Elementos Gráficos CSS
   Versão: 1.0
   ========================================== */

/* ==========================================
   ÍNDICE DE CATEGORIAS
   ========================================== */
/*
   1. ENTRANCE ANIMATIONS (Entrada)
   2. EXIT ANIMATIONS (Saída)
   3. ATTENTION SEEKERS (Chamar Atenção)
   4. BUTTON EFFECTS (Efeitos de Botões)
   5. CARD EFFECTS (Efeitos de Cards)
   6. HOVER EFFECTS (Efeitos de Hover)
   7. LOADING ANIMATIONS (Animações de Carregamento)
   8. TEXT ANIMATIONS (Animações de Texto)
   9. BACKGROUND ANIMATIONS (Animações de Fundo)
   10. SCROLL ANIMATIONS (Animações de Scroll)
   11. SHAPE ANIMATIONS (Animações de Formas)
   12. ELASTIC EFFECTS (Efeitos Elásticos)
   13. THEME-SPECIFIC (Temáticas)
*/

/* ==========================================
   1. ENTRANCE ANIMATIONS
   ========================================== */

/* 1.1 - Fade In Variations */
@keyframes ss-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes ss-fadeInDown {
    from { 
        opacity: 0; 
        transform: translateY(-30px);
    }
    to { 
        opacity: 1; 
        transform: translateY(0);
    }
}

@keyframes ss-fadeInUp {
    from { 
        opacity: 0; 
        transform: translateY(30px);
    }
    to { 
        opacity: 1; 
        transform: translateY(0);
    }
}

@keyframes ss-fadeInLeft {
    from { 
        opacity: 0; 
        transform: translateX(-30px);
    }
    to { 
        opacity: 1; 
        transform: translateX(0);
    }
}

@keyframes ss-fadeInRight {
    from { 
        opacity: 0; 
        transform: translateX(30px);
    }
    to { 
        opacity: 1; 
        transform: translateX(0);
    }
}

/* 1.2 - Slide In Variations */
@keyframes ss-slideInDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

@keyframes ss-slideInUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes ss-slideInLeft {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

@keyframes ss-slideInRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* 1.3 - Zoom In Variations */
@keyframes ss-zoomIn {
    from { 
        opacity: 0; 
        transform: scale(0.5);
    }
    to { 
        opacity: 1; 
        transform: scale(1);
    }
}

@keyframes ss-zoomInDown {
    from { 
        opacity: 0; 
        transform: scale(0.5) translateY(-30px);
    }
    to { 
        opacity: 1; 
        transform: scale(1) translateY(0);
    }
}

@keyframes ss-zoomInUp {
    from { 
        opacity: 0; 
        transform: scale(0.5) translateY(30px);
    }
    to { 
        opacity: 1; 
        transform: scale(1) translateY(0);
    }
}

/* 1.4 - Bounce In Variations */
@keyframes ss-bounceIn {
    0% { 
        opacity: 0; 
        transform: scale(0.3);
    }
    50% { 
        opacity: 1; 
        transform: scale(1.05);
    }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

@keyframes ss-bounceInDown {
    0% { 
        opacity: 0; 
        transform: translateY(-100px);
    }
    60% { 
        opacity: 1; 
        transform: translateY(25px);
    }
    80% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

@keyframes ss-bounceInUp {
    0% { 
        opacity: 0; 
        transform: translateY(100px);
    }
    60% { 
        opacity: 1; 
        transform: translateY(-25px);
    }
    80% { transform: translateY(10px); }
    100% { transform: translateY(0); }
}

/* 1.5 - Rotate In */
@keyframes ss-rotateIn {
    from { 
        opacity: 0; 
        transform: rotate(-200deg);
    }
    to { 
        opacity: 1; 
        transform: rotate(0);
    }
}

/* 1.6 - Flip In */
@keyframes ss-flipInX {
    from { 
        opacity: 0; 
        transform: perspective(400px) rotateX(-90deg);
    }
    to { 
        opacity: 1; 
        transform: perspective(400px) rotateX(0);
    }
}

@keyframes ss-flipInY {
    from { 
        opacity: 0; 
        transform: perspective(400px) rotateY(-90deg);
    }
    to { 
        opacity: 1; 
        transform: perspective(400px) rotateY(0);
    }
}

/* ==========================================
   2. EXIT ANIMATIONS
   ========================================== */

/* 2.1 - Fade Out Variations */
@keyframes ss-fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes ss-fadeOutDown {
    from { 
        opacity: 1; 
        transform: translateY(0);
    }
    to { 
        opacity: 0; 
        transform: translateY(30px);
    }
}

@keyframes ss-fadeOutUp {
    from { 
        opacity: 1; 
        transform: translateY(0);
    }
    to { 
        opacity: 0; 
        transform: translateY(-30px);
    }
}

/* 2.2 - Slide Out */
@keyframes ss-slideOutUp {
    from { transform: translateY(0); }
    to { transform: translateY(-100%); }
}

@keyframes ss-slideOutDown {
    from { transform: translateY(0); }
    to { transform: translateY(100%); }
}

/* 2.3 - Zoom Out */
@keyframes ss-zoomOut {
    from { 
        opacity: 1; 
        transform: scale(1);
    }
    to { 
        opacity: 0; 
        transform: scale(0.3);
    }
}

/* 2.4 - Bounce Out */
@keyframes ss-bounceOut {
    20% { transform: scale(0.9); }
    50%, 55% { 
        opacity: 1; 
        transform: scale(1.1);
    }
    100% { 
        opacity: 0; 
        transform: scale(0.3);
    }
}

/* 2.5 - Rotate Out */
@keyframes ss-rotateOut {
    from { 
        opacity: 1; 
        transform: rotate(0);
    }
    to { 
        opacity: 0; 
        transform: rotate(200deg);
    }
}

/* ==========================================
   3. ATTENTION SEEKERS
   ========================================== */

/* 3.1 - Bounce */
@keyframes ss-bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-20px); }
    60% { transform: translateY(-10px); }
}

/* 3.2 - Flash */
@keyframes ss-flash {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0; }
}

/* 3.3 - Pulse */
@keyframes ss-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* 3.4 - Rubber Band */
@keyframes ss-rubberBand {
    0%, 100% { transform: scale(1); }
    30% { transform: scaleX(1.25) scaleY(0.75); }
    40% { transform: scaleX(0.75) scaleY(1.25); }
    50% { transform: scaleX(1.15) scaleY(0.85); }
    65% { transform: scaleX(0.95) scaleY(1.05); }
    75% { transform: scaleX(1.05) scaleY(0.95); }
}

/* 3.5 - Shake */
@keyframes ss-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
    20%, 40%, 60%, 80% { transform: translateX(10px); }
}

/* 3.6 - Shake Vertical */
@keyframes ss-shakeY {
    0%, 100% { transform: translateY(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateY(-10px); }
    20%, 40%, 60%, 80% { transform: translateY(10px); }
}

/* 3.7 - Swing */
@keyframes ss-swing {
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(5deg); }
    80% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

/* 3.8 - Tada */
@keyframes ss-tada {
    0%, 100% { transform: scale(1) rotate(0); }
    10%, 20% { transform: scale(0.9) rotate(-3deg); }
    30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
    40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
}

/* 3.9 - Wobble */
@keyframes ss-wobble {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-25px) rotate(-5deg); }
    30% { transform: translateX(20px) rotate(3deg); }
    45% { transform: translateX(-15px) rotate(-3deg); }
    60% { transform: translateX(10px) rotate(2deg); }
    75% { transform: translateX(-5px) rotate(-1deg); }
}

/* 3.10 - Jello */
@keyframes ss-jello {
    0%, 11.1%, 100% { transform: none; }
    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); }
}

/* 3.11 - Heart Beat */
@keyframes ss-heartBeat {
    0%, 100% { transform: scale(1); }
    14% { transform: scale(1.3); }
    28% { transform: scale(1); }
    42% { transform: scale(1.3); }
    70% { transform: scale(1); }
}

/* ==========================================
   4. BUTTON EFFECTS
   ========================================== */

/* 4.1 - Button Breathe */
@keyframes ss-btn-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* 4.2 - Button Pulse */
@keyframes ss-btn-pulse {
    0%, 100% { 
        transform: scale(1); 
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
    }
    50% { 
        transform: scale(1.05); 
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }
}

/* 4.3 - Button Glow */
@keyframes ss-btn-glow {
    0%, 100% { box-shadow: 0 0 5px rgba(255, 255, 255, 0.5); }
    50% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.8); }
}

/* 4.4 - Button Ripple */
@keyframes ss-btn-ripple {
    0% { 
        transform: scale(0); 
        opacity: 1;
    }
    100% { 
        transform: scale(4); 
        opacity: 0;
    }
}

/* 4.5 - Button Shake */
@keyframes ss-btn-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* 4.6 - Button Pop */
@keyframes ss-btn-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* ==========================================
   5. CARD EFFECTS
   ========================================== */

/* 5.1 - Card Float */
@keyframes ss-card-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* 5.2 - Card Flip */
@keyframes ss-card-flip {
    0% { transform: perspective(400px) rotateY(0); }
    100% { transform: perspective(400px) rotateY(180deg); }
}

/* 5.3 - Card Tilt */
@keyframes ss-card-tilt {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(2deg); }
    75% { transform: rotate(-2deg); }
}

/* 5.4 - Card Slide Up */
@keyframes ss-card-slideup {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* 5.5 - Card Expand */
@keyframes ss-card-expand {
    from { transform: scale(0.95); opacity: 0.8; }
    to { transform: scale(1); opacity: 1; }
}

/* 5.6 - Card Glow */
@keyframes ss-card-glow {
    0%, 100% { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); }
    50% { box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2); }
}

/* ==========================================
   6. HOVER EFFECTS
   ========================================== */

/* 6.1 - Grow */
@keyframes ss-grow {
    from { transform: scale(1); }
    to { transform: scale(1.1); }
}

/* 6.2 - Shrink */
@keyframes ss-shrink {
    from { transform: scale(1); }
    to { transform: scale(0.9); }
}

/* 6.3 - Rotate */
@keyframes ss-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 6.4 - Tilt */
@keyframes ss-tilt {
    from { transform: rotate(0deg); }
    to { transform: rotate(5deg); }
}

/* 6.5 - Float Up */
@keyframes ss-float-up {
    from { transform: translateY(0); }
    to { transform: translateY(-10px); }
}

/* 6.6 - Sink Down */
@keyframes ss-sink-down {
    from { transform: translateY(0); }
    to { transform: translateY(10px); }
}

/* 6.7 - Shadow Drop */
@keyframes ss-shadow-drop {
    from { box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
    to { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); }
}

/* 6.8 - Brightness */
@keyframes ss-brightness {
    from { filter: brightness(1); }
    to { filter: brightness(1.2); }
}

/* ==========================================
   7. LOADING ANIMATIONS
   ========================================== */

/* 7.1 - Spinner */
@keyframes ss-spinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 7.2 - Dots Bounce */
@keyframes ss-dots-bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

/* 7.3 - Bars */
@keyframes ss-bars {
    0%, 40%, 100% { transform: scaleY(0.4); }
    20% { transform: scaleY(1); }
}

/* 7.4 - Pulse Ring */
@keyframes ss-pulse-ring {
    0% { 
        transform: scale(0.5); 
        opacity: 1;
    }
    100% { 
        transform: scale(1.5); 
        opacity: 0;
    }
}

/* 7.5 - Loading Fade */
@keyframes ss-loading-fade {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

/* 7.6 - Progress Bar */
@keyframes ss-progress {
    from { width: 0%; }
    to { width: 100%; }
}

/* ==========================================
   8. TEXT ANIMATIONS
   ========================================== */

/* 8.1 - Typing */
@keyframes ss-typing {
    from { width: 0; }
    to { width: 100%; }
}

/* 8.2 - Blur In */
@keyframes ss-blur-in {
    from { 
        filter: blur(10px); 
        opacity: 0;
    }
    to { 
        filter: blur(0); 
        opacity: 1;
    }
}

/* 8.3 - Focus In */
@keyframes ss-focus-in {
    from { 
        filter: blur(12px); 
        opacity: 0;
    }
    to { 
        filter: blur(0); 
        opacity: 1;
    }
}

/* 8.4 - Tracking In */
@keyframes ss-tracking-in {
    from { 
        letter-spacing: -0.5em; 
        opacity: 0;
    }
    to { 
        letter-spacing: normal; 
        opacity: 1;
    }
}

/* 8.5 - Text Shadow Pop */
@keyframes ss-text-shadow-pop {
    0% { 
        text-shadow: 0 0 0 rgba(0, 0, 0, 0); 
        transform: translateZ(0);
    }
    100% { 
        text-shadow: 0 0 20px rgba(0, 0, 0, 0.5); 
        transform: translateZ(50px);
    }
}

/* 8.6 - Text Glow */
@keyframes ss-text-glow {
    0%, 100% { text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); }
    50% { text-shadow: 0 0 20px rgba(255, 255, 255, 1); }
}

/* ==========================================
   9. BACKGROUND ANIMATIONS
   ========================================== */

/* 9.1 - Gradient Shift */
@keyframes ss-gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 9.2 - Wave */
@keyframes ss-wave {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* 9.3 - Particle Float */
@keyframes ss-particle-float {
    0% { 
        transform: translateY(0) translateX(0); 
        opacity: 0;
    }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { 
        transform: translateY(-100vh) translateX(20px); 
        opacity: 0;
    }
}

/* 9.4 - Parallax Slow */
@keyframes ss-parallax-slow {
    from { transform: translateY(0); }
    to { transform: translateY(-50px); }
}

/* 9.5 - Ken Burns (Zoom Pan) */
@keyframes ss-ken-burns {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.2) translate(10px, 10px); }
}

/* ==========================================
   10. SCROLL ANIMATIONS
   ========================================== */

/* 10.1 - Reveal on Scroll */
@keyframes ss-reveal {
    from { 
        opacity: 0; 
        transform: translateY(50px);
    }
    to { 
        opacity: 1; 
        transform: translateY(0);
    }
}

/* 10.2 - Slide In View */
@keyframes ss-slide-in-view {
    from { 
        transform: translateX(-100px); 
        opacity: 0;
    }
    to { 
        transform: translateX(0); 
        opacity: 1;
    }
}

/* 10.3 - Scale In View */
@keyframes ss-scale-in-view {
    from { 
        transform: scale(0.8); 
        opacity: 0;
    }
    to { 
        transform: scale(1); 
        opacity: 1;
    }
}

/* ==========================================
   11. SHAPE ANIMATIONS
   ========================================== */

/* 11.1 - Circle Expand */
@keyframes ss-circle-expand {
    from { 
        width: 0; 
        height: 0; 
        opacity: 1;
    }
    to { 
        width: 100%; 
        height: 100%; 
        opacity: 0;
    }
}

/* 11.2 - Morph */
@keyframes ss-morph {
    0%, 100% { border-radius: 50%; }
    50% { border-radius: 0%; }
}

/* 11.3 - Dash Animation */
@keyframes ss-dash {
    to { stroke-dashoffset: 0; }
}

/* 11.4 - Draw Line */
@keyframes ss-draw-line {
    from { width: 0; }
    to { width: 100%; }
}

/* ==========================================
   12. ELASTIC EFFECTS
   ========================================== */

/* 12.1 - Elastic In */
@keyframes ss-elastic-in {
    0% { transform: scale(0); }
    55% { transform: scale(1.1); }
    70% { transform: scale(0.9); }
    85% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* 12.2 - Spring Bounce */
@keyframes ss-spring-bounce {
    0% { transform: translateY(0); }
    20% { transform: translateY(-20px); }
    40% { transform: translateY(0); }
    60% { transform: translateY(-10px); }
    80% { transform: translateY(0); }
    90% { transform: translateY(-5px); }
    100% { transform: translateY(0); }
}

/* 12.3 - Rubber Stretch */
@keyframes ss-rubber-stretch {
    0%, 100% { transform: scaleX(1); }
    30% { transform: scaleX(1.25); }
    60% { transform: scaleX(0.75); }
}

/* ==========================================
   13. THEME-SPECIFIC ANIMATIONS
   ========================================== */

/* 13.1 - Snow Fall */
@keyframes ss-snow-fall {
    0% { 
        transform: translateY(-100px) translateX(0) rotate(0deg); 
        opacity: 0;
    }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { 
        transform: translateY(100vh) translateX(50px) rotate(360deg); 
        opacity: 0;
    }
}

/* 13.2 - Confetti Explode */
@keyframes ss-confetti-explode {
    0% { 
        transform: translate(0, 0) rotate(0deg); 
        opacity: 1;
    }
    100% { 
        transform: translate(var(--x, 100px), var(--y, -100px)) rotate(720deg); 
        opacity: 0;
    }
}

/* 13.3 - Heart Beat Pulse */
@keyframes ss-heart-pulse {
    0%, 100% { transform: scale(1); }
    10% { transform: scale(1.2); }
    20% { transform: scale(1); }
    30% { transform: scale(1.2); }
    50% { transform: scale(1); }
}

/* 13.4 - Bubbles Float */
@keyframes ss-bubbles-float {
    0% { 
        transform: translateY(100%) scale(0.5); 
        opacity: 0;
    }
    50% { opacity: 0.8; }
    100% { 
        transform: translateY(-100px) scale(1.2); 
        opacity: 0;
    }
}

/* 13.5 - Stars Twinkle */
@keyframes ss-stars-twinkle {
    0%, 100% { 
        transform: scale(1); 
        opacity: 1;
    }
    50% { 
        transform: scale(1.5); 
        opacity: 0.5;
    }
}

/* 13.6 - Coffee Vapor */
@keyframes ss-coffee-vapor {
    0% { 
        transform: translateY(0) scale(1); 
        opacity: 0.8;
    }
    100% { 
        transform: translateY(-30px) scale(1.5); 
        opacity: 0;
    }
}

/* 13.7 - Pizza Spin */
@keyframes ss-pizza-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 13.8 - Cheese Melt */
@keyframes ss-cheese-melt {
    from { 
        clip-path: polygon(0 0, 100% 0, 100% 20%, 0 20%);
    }
    to { 
        clip-path: polygon(0 0, 100% 0, 100% 100%, 80% 90%, 60% 95%, 40% 90%, 20% 95%, 0 90%);
    }
}

/* 13.9 - Ice Cream Drip */
@keyframes ss-icecream-drip {
    0% { 
        transform: translateY(0) scaleY(1); 
    }
    50% { 
        transform: translateY(10px) scaleY(1.2); 
    }
    100% { 
        transform: translateY(50px) scaleY(1.5); 
        opacity: 0;
    }
}

/* 13.10 - Fire Flicker */
@keyframes ss-fire-flicker {
    0%, 100% { 
        transform: scaleY(1) scaleX(1); 
        opacity: 1;
    }
    50% { 
        transform: scaleY(1.2) scaleX(0.9); 
        opacity: 0.8;
    }
}

/* 13.11 - Leaf Fall */
@keyframes ss-leaf-fall {
    0% { 
        transform: translateY(-50px) translateX(0) rotate(0deg); 
        opacity: 0;
    }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { 
        transform: translateY(200px) translateX(30px) rotate(180deg); 
        opacity: 0;
    }
}

/* 13.12 - Ocean Wave */
@keyframes ss-ocean-wave {
    0% { 
        transform: translateX(0) translateY(0); 
    }
    100% { 
        transform: translateX(-50%) translateY(10px); 
    }
}

/* 13.13 - Lightning Flash */
@keyframes ss-lightning {
    0%, 10%, 20%, 100% { opacity: 0; }
    5%, 15% { opacity: 1; }
}

/* 13.14 - Gear Spin */
@keyframes ss-gear-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 13.15 - DNA Rotate */
@keyframes ss-dna-rotate {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(360deg); }
}

/* 13.16 - Medical Pulse */
@keyframes ss-medical-pulse {
    0%, 100% { transform: scaleX(1); }
    10% { transform: scaleX(1.3); }
    20% { transform: scaleX(1); }
    30% { transform: scaleX(1.5); }
    40% { transform: scaleX(1); }
}

/* 13.17 - Scale Balance */
@keyframes ss-scale-balance {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg); }
}

/* 13.18 - Hammer Strike */
@keyframes ss-hammer-strike {
    0%, 100% { transform: rotate(-45deg); }
    50% { transform: rotate(0deg); }
}

/* 13.19 - Book Flip */
@keyframes ss-book-flip {
    0% { transform: perspective(400px) rotateY(0deg); }
    100% { transform: perspective(400px) rotateY(-180deg); }
}

/* 13.20 - Paint Brush Stroke */
@keyframes ss-paint-stroke {
    from { stroke-dashoffset: 1000; }
    to { stroke-dashoffset: 0; }
}

/* ==========================================
   14. GLITCH & MODERN EFFECTS
   ========================================== */

/* 14.1 - Glitch */
@keyframes ss-glitch {
    0% { 
        transform: translate(0); 
        opacity: 1;
    }
    20% { 
        transform: translate(-2px, 2px); 
        opacity: 0.8;
    }
    40% { 
        transform: translate(-2px, -2px); 
        opacity: 0.9;
    }
    60% { 
        transform: translate(2px, 2px); 
        opacity: 0.8;
    }
    80% { 
        transform: translate(2px, -2px); 
        opacity: 0.9;
    }
    100% { 
        transform: translate(0); 
        opacity: 1;
    }
}

/* 14.2 - RGB Split */
@keyframes ss-rgb-split {
    0%, 100% { 
        text-shadow: 
            0 0 0 transparent,
            0 0 0 transparent;
    }
    25% { 
        text-shadow: 
            -2px 0 0 red,
            2px 0 0 cyan;
    }
    50% { 
        text-shadow: 
            -4px 0 0 red,
            4px 0 0 cyan;
    }
    75% { 
        text-shadow: 
            -2px 0 0 red,
            2px 0 0 cyan;
    }
}

/* 14.3 - Distortion Wave */
@keyframes ss-distortion {
    0%, 100% { filter: blur(0px); }
    50% { filter: blur(2px); }
}

/* 14.4 - Neon Flicker */
@keyframes ss-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 var(--neon-color, #0fa),
            0 0 80px var(--neon-color, #0fa);
    }
    20%, 24%, 55% {        
        text-shadow: none;
    }
}

/* 14.5 - Hologram */
@keyframes ss-hologram {
    0%, 100% { 
        opacity: 0.8;
        filter: brightness(1.2);
    }
    50% { 
        opacity: 0.5;
        filter: brightness(0.8);
    }
}

/* 14.6 - Scan Lines */
@keyframes ss-scanlines {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

/* ==========================================
   15. 3D TRANSFORMS
   ========================================== */

/* 15.1 - Flip 3D */
@keyframes ss-flip-3d {
    from { transform: perspective(400px) rotateY(0); }
    to { transform: perspective(400px) rotateY(180deg); }
}

/* 15.2 - Rotate 3D */
@keyframes ss-rotate-3d {
    from { transform: perspective(400px) rotate3d(1, 1, 0, 0deg); }
    to { transform: perspective(400px) rotate3d(1, 1, 0, 360deg); }
}

/* 15.3 - Cube Spin */
@keyframes ss-cube-spin {
    0% { transform: rotateX(0deg) rotateY(0deg); }
    100% { transform: rotateX(360deg) rotateY(360deg); }
}

/* 15.4 - Perspective Shift */
@keyframes ss-perspective-shift {
    0%, 100% { transform: perspective(400px) rotateY(0deg); }
    50% { transform: perspective(400px) rotateY(20deg); }
}

/* 15.5 - Card Reveal 3D */
@keyframes ss-card-reveal-3d {
    0% { 
        transform: perspective(800px) rotateY(-90deg);
        opacity: 0;
    }
    100% { 
        transform: perspective(800px) rotateY(0deg);
        opacity: 1;
    }
}

/* ==========================================
   16. MICRO-INTERACTIONS
   ========================================== */

/* 16.1 - Check Mark Draw */
@keyframes ss-check-draw {
    0% { stroke-dashoffset: 100; }
    100% { stroke-dashoffset: 0; }
}

/* 16.2 - Plus to X */
@keyframes ss-plus-to-x {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(45deg); }
}

/* 16.3 - Menu Toggle */
@keyframes ss-menu-toggle-top {
    0% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(8px) rotate(0); }
    100% { transform: translateY(8px) rotate(45deg); }
}

@keyframes ss-menu-toggle-bottom {
    0% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-8px) rotate(0); }
    100% { transform: translateY(-8px) rotate(-45deg); }
}

@keyframes ss-menu-toggle-middle {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 0; }
}

/* 16.4 - Like Button */
@keyframes ss-like-pop {
    0% { transform: scale(1); }
    25% { transform: scale(1.3); }
    50% { transform: scale(0.9); }
    75% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* 16.5 - Notification Badge */
@keyframes ss-badge-ping {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* 16.6 - Input Focus */
@keyframes ss-input-focus {
    from { width: 0%; }
    to { width: 100%; }
}

/* ==========================================
   17. SCROLL PROGRESS
   ========================================== */

/* 17.1 - Progress Bar Fill */
@keyframes ss-progress-fill {
    from { width: 0%; }
    to { width: 100%; }
}

/* 17.2 - Circle Progress */
@keyframes ss-circle-progress {
    from { stroke-dashoffset: 283; }
    to { stroke-dashoffset: 0; }
}

/* 17.3 - Number Counter */
@keyframes ss-counter {
    from { --num: 0; }
    to { --num: 100; }
}

/* ==========================================
   18. MODAL & OVERLAY
   ========================================== */

/* 18.1 - Modal Scale In */
@keyframes ss-modal-scale-in {
    from { 
        transform: scale(0.7);
        opacity: 0;
    }
    to { 
        transform: scale(1);
        opacity: 1;
    }
}

/* 18.2 - Overlay Fade In */
@keyframes ss-overlay-fade-in {
    from { 
        background: rgba(0, 0, 0, 0);
    }
    to { 
        background: rgba(0, 0, 0, 0.5);
    }
}

/* 18.3 - Slide From Bottom */
@keyframes ss-slide-from-bottom {
    from { 
        transform: translateY(100%);
        opacity: 0;
    }
    to { 
        transform: translateY(0);
        opacity: 1;
    }
}

/* 18.4 - Slide From Top */
@keyframes ss-slide-from-top {
    from { 
        transform: translateY(-100%);
        opacity: 0;
    }
    to { 
        transform: translateY(0);
        opacity: 1;
    }
}

/* ==========================================
   19. GALLERY & IMAGE EFFECTS
   ========================================== */

/* 19.1 - Image Zoom In */
@keyframes ss-image-zoom {
    from { transform: scale(1); }
    to { transform: scale(1.1); }
}

/* 19.2 - Ken Burns Effect */
@keyframes ss-ken-burns-zoom {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.2) translate(20px, 20px); }
}

/* 19.3 - Blur to Focus */
@keyframes ss-blur-focus {
    from { filter: blur(10px); }
    to { filter: blur(0); }
}

/* 19.4 - Greyscale to Color */
@keyframes ss-greyscale-color {
    from { filter: grayscale(100%); }
    to { filter: grayscale(0%); }
}

/* 19.5 - Image Reveal */
@keyframes ss-image-reveal {
    from { 
        clip-path: inset(0 100% 0 0);
    }
    to { 
        clip-path: inset(0 0 0 0);
    }
}

/* ==========================================
   20. NAVIGATION EFFECTS
   ========================================== */

/* 20.1 - Navbar Slide Down */
@keyframes ss-navbar-slide-down {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

/* 20.2 - Navbar Fade In */
@keyframes ss-navbar-fade-in {
    from { 
        opacity: 0;
        transform: translateY(-20px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

/* 20.3 - Menu Item Stagger */
@keyframes ss-menu-item-fade {
    from { 
        opacity: 0;
        transform: translateX(-20px);
    }
    to { 
        opacity: 1;
        transform: translateX(0);
    }
}

/* 20.4 - Breadcrumb Arrow */
@keyframes ss-breadcrumb-arrow {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
}

/* ==========================================
   21. FOOTER EFFECTS
   ========================================== */

/* 21.1 - Footer Reveal */
@keyframes ss-footer-reveal {
    from { 
        transform: translateY(100%);
        opacity: 0;
    }
    to { 
        transform: translateY(0);
        opacity: 1;
    }
}

/* 21.2 - Social Icon Bounce */
@keyframes ss-social-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* ==========================================
   22. FORM ELEMENTS
   ========================================== */

/* 22.1 - Input Shake Error */
@keyframes ss-input-error {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* 22.2 - Success Checkmark */
@keyframes ss-success-check {
    0% { 
        stroke-dashoffset: 50;
        opacity: 0;
    }
    50% { opacity: 1; }
    100% { 
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

/* 22.3 - Floating Label */
@keyframes ss-label-float {
    from { 
        transform: translateY(0);
        font-size: 16px;
    }
    to { 
        transform: translateY(-25px);
        font-size: 12px;
    }
}

/* ==========================================
   23. DECORATIVE ELEMENTS
   ========================================== */

/* 23.1 - Gradient Border Rotate */
@keyframes ss-gradient-border {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 23.2 - Shimmer Effect */
@keyframes ss-shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

/* 23.3 - Glow Pulse */
@keyframes ss-glow-pulse {
    0%, 100% { 
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    }
    50% { 
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
    }
}

/* 23.4 - Border Draw */
@keyframes ss-border-draw {
    0% { 
        stroke-dashoffset: 400;
    }
    100% { 
        stroke-dashoffset: 0;
    }
}

/* 23.5 - Particle Burst */
@keyframes ss-particle-burst {
    0% { 
        transform: scale(0) translate(0, 0);
        opacity: 1;
    }
    100% { 
        transform: scale(1) translate(var(--tx, 50px), var(--ty, -50px));
        opacity: 0;
    }
}

/* ==========================================
   24. SKELETON LOADING
   ========================================== */

/* 24.1 - Skeleton Shimmer */
@keyframes ss-skeleton-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* 24.2 - Skeleton Pulse */
@keyframes ss-skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ==========================================
   25. TOOLTIP & POPOVER
   ========================================== */

/* 25.1 - Tooltip Fade In */
@keyframes ss-tooltip-fade-in {
    from { 
        opacity: 0;
        transform: translateY(10px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

/* 25.2 - Popover Scale */
@keyframes ss-popover-scale {
    from { 
        transform: scale(0.8);
        opacity: 0;
    }
    to { 
        transform: scale(1);
        opacity: 1;
    }
}

/* ==========================================
   FIM DA BIBLIOTECA
   Total: 200+ animações categorizadas
   
   COMO USAR (exemplo em tema.css):
   
   .meu-botao {
       animation: ss-btn-breathe 2s ease-in-out infinite;
   }
   
   .meu-card {
       animation: ss-card-float 3s ease-in-out infinite;
   }
   
   .hero-title {
       animation: ss-fadeInUp 1s ease-out;
   }
   
   ========================================== */