/* ========================================
   MIRTILO DIGITAL - ANIMATIONS
   CSS Keyframes & Animation Classes
   ======================================== */

/* ========================================
   FADE IN ANIMATIONS
   ======================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

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

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

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

/* ========================================
   SCALE ANIMATIONS
   ======================================== */

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes scaleInBounce {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ========================================
   SHAPE MORPHING ANIMATIONS
   ======================================== */

@keyframes morphShape1 {
    0%, 100% {
        d: path("M47.1,-57.4C59.9,-45.8,68.4,-28.9,71.3,-10.6C74.2,7.7,71.4,27.4,61.5,42.8C51.6,58.2,34.6,69.3,16.3,72.8C-2,76.3,-21.6,72.2,-38.7,63.4C-55.8,54.6,-70.4,41.1,-75.8,24.8C-81.2,8.5,-77.4,-10.6,-68.8,-26.4C-60.2,-42.2,-46.8,-54.7,-32.1,-65.7C-17.4,-76.7,-0.4,-86.2,14.8,-83.8C30,-81.4,34.3,-69,47.1,-57.4Z");
    }
    33% {
        d: path("M38.7,-49.6C48.9,-39.3,55.3,-24.8,58.1,-9.1C60.9,6.6,60.1,23.5,52.3,37.1C44.5,50.7,29.7,61,13.5,65.2C-2.7,69.4,-20.3,67.5,-35.4,59.9C-50.5,52.3,-63.1,39,-68.4,23.4C-73.7,7.8,-71.7,-10.1,-63.9,-24.2C-56.1,-38.3,-42.5,-48.6,-28.5,-57.8C-14.5,-67,-0.2,-75.1,12.5,-71.2C25.2,-67.3,28.5,-59.9,38.7,-49.6Z");
    }
    66% {
        d: path("M41.3,-53.1C51.7,-42.7,57.1,-26.9,59.4,-10.5C61.7,5.9,60.9,22.9,53.5,36.4C46.1,49.9,32.1,59.9,16.5,64.4C0.9,68.9,-16.3,67.9,-31.1,61.3C-45.9,54.7,-58.3,42.5,-64.3,27.5C-70.3,12.5,-69.9,-5.3,-64.1,-20.9C-58.3,-36.5,-47.1,-49.9,-34.3,-59.7C-21.5,-69.5,-7.2,-75.7,5.3,-72.8C17.8,-69.9,30.9,-63.5,41.3,-53.1Z");
    }
}

@keyframes morphShape2 {
    0%, 100% {
        d: path("M41.3,-53.1C51.7,-42.7,57.1,-26.9,59.4,-10.5C61.7,5.9,60.9,22.9,53.5,36.4C46.1,49.9,32.1,59.9,16.5,64.4C0.9,68.9,-16.3,67.9,-31.1,61.3C-45.9,54.7,-58.3,42.5,-64.3,27.5C-70.3,12.5,-69.9,-5.3,-64.1,-20.9C-58.3,-36.5,-47.1,-49.9,-34.3,-59.7C-21.5,-69.5,-7.2,-75.7,5.3,-72.8C17.8,-69.9,30.9,-63.5,41.3,-53.1Z");
    }
    33% {
        d: path("M47.1,-57.4C59.9,-45.8,68.4,-28.9,71.3,-10.6C74.2,7.7,71.4,27.4,61.5,42.8C51.6,58.2,34.6,69.3,16.3,72.8C-2,76.3,-21.6,72.2,-38.7,63.4C-55.8,54.6,-70.4,41.1,-75.8,24.8C-81.2,8.5,-77.4,-10.6,-68.8,-26.4C-60.2,-42.2,-46.8,-54.7,-32.1,-65.7C-17.4,-76.7,-0.4,-86.2,14.8,-83.8C30,-81.4,34.3,-69,47.1,-57.4Z");
    }
    66% {
        d: path("M38.7,-49.6C48.9,-39.3,55.3,-24.8,58.1,-9.1C60.9,6.6,60.1,23.5,52.3,37.1C44.5,50.7,29.7,61,13.5,65.2C-2.7,69.4,-20.3,67.5,-35.4,59.9C-50.5,52.3,-63.1,39,-68.4,23.4C-73.7,7.8,-71.7,-10.1,-63.9,-24.2C-56.1,-38.3,-42.5,-48.6,-28.5,-57.8C-14.5,-67,-0.2,-75.1,12.5,-71.2C25.2,-67.3,28.5,-59.9,38.7,-49.6Z");
    }
}

@keyframes morphShape3 {
    0%, 100% {
        d: path("M38.7,-49.6C48.9,-39.3,55.3,-24.8,58.1,-9.1C60.9,6.6,60.1,23.5,52.3,37.1C44.5,50.7,29.7,61,13.5,65.2C-2.7,69.4,-20.3,67.5,-35.4,59.9C-50.5,52.3,-63.1,39,-68.4,23.4C-73.7,7.8,-71.7,-10.1,-63.9,-24.2C-56.1,-38.3,-42.5,-48.6,-28.5,-57.8C-14.5,-67,-0.2,-75.1,12.5,-71.2C25.2,-67.3,28.5,-59.9,38.7,-49.6Z");
    }
    50% {
        d: path("M41.3,-53.1C51.7,-42.7,57.1,-26.9,59.4,-10.5C61.7,5.9,60.9,22.9,53.5,36.4C46.1,49.9,32.1,59.9,16.5,64.4C0.9,68.9,-16.3,67.9,-31.1,61.3C-45.9,54.7,-58.3,42.5,-64.3,27.5C-70.3,12.5,-69.9,-5.3,-64.1,-20.9C-58.3,-36.5,-47.1,-49.9,-34.3,-59.7C-21.5,-69.5,-7.2,-75.7,5.3,-72.8C17.8,-69.9,30.9,-63.5,41.3,-53.1Z");
    }
}

/* ========================================
   FLOATING ANIMATIONS
   ======================================== */

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

@keyframes floatSlow {
    0%, 100% {
        transform: translateY(0) translateX(0);
    }
    25% {
        transform: translateY(-15px) translateX(10px);
    }
    50% {
        transform: translateY(-30px) translateX(0);
    }
    75% {
        transform: translateY(-15px) translateX(-10px);
    }
}

@keyframes floatRotate {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-25px) rotate(5deg);
    }
}

/* ========================================
   PULSE & GLOW ANIMATIONS
   ======================================== */

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(107, 70, 193, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(107, 70, 193, 0.6);
    }
}

@keyframes glowText {
    0%, 100% {
        text-shadow: 0 0 10px rgba(107, 70, 193, 0.3);
    }
    50% {
        text-shadow: 0 0 20px rgba(107, 70, 193, 0.6), 0 0 30px rgba(0, 180, 216, 0.4);
    }
}

/* ========================================
   GRADIENT ANIMATIONS
   ======================================== */

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes rainbowGradient {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

/* ========================================
   SLIDE ANIMATIONS
   ======================================== */

@keyframes slideInFromLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromBottom {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ========================================
   ROTATION ANIMATIONS
   ======================================== */

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes rotateReverse {
    from {
        transform: rotate(360deg);
    }
    to {
        transform: rotate(0deg);
    }
}

/* ========================================
   SHAKE & BOUNCE ANIMATIONS
   ======================================== */

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

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

/* ========================================
   TEXT ANIMATIONS
   ======================================== */

@keyframes typewriter {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes blinkCursor {
    0%, 100% {
        border-right-color: transparent;
    }
    50% {
        border-right-color: var(--color-primary);
    }
}

/* ========================================
   SHIMMER EFFECT
   ======================================== */

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.animate-fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
}

.animate-fade-in-down {
    animation: fadeInDown 0.6s ease-out forwards;
}

.animate-scale-in {
    animation: scaleIn 0.5s ease-out forwards;
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

.animate-pulse {
    animation: pulse 2s ease-in-out infinite;
}

.animate-glow {
    animation: glow 2s ease-in-out infinite;
}

/* ========================================
   ANIMATION DELAYS
   ======================================== */

.delay-100 {
    animation-delay: 0.1s;
}

.delay-200 {
    animation-delay: 0.2s;
}

.delay-300 {
    animation-delay: 0.3s;
}

.delay-400 {
    animation-delay: 0.4s;
}

.delay-500 {
    animation-delay: 0.5s;
}

/* ========================================
   SCROLL REVEAL CLASSES
   ======================================== */

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal-left.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal-scale.active {
    opacity: 1;
    transform: scale(1);
}

/* ========================================
   SHAPE ANIMATIONS (Applied in JS)
   ======================================== */

.shape-1 {
    animation: morphShape1 20s ease-in-out infinite, floatSlow 15s ease-in-out infinite;
}

.shape-2 {
    animation: morphShape2 18s ease-in-out infinite, floatRotate 12s ease-in-out infinite;
}

.shape-3 {
    animation: morphShape3 22s ease-in-out infinite, float 10s ease-in-out infinite;
}

/* ========================================
   HOVER EFFECTS
   ======================================== */

.hover-lift {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift:hover {
    transform: translateY(-4px);
}

.hover-grow {
    transition: transform var(--transition-base);
}

.hover-grow:hover {
    transform: scale(1.05);
}

.hover-glow {
    transition: box-shadow var(--transition-base);
}

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(107, 70, 193, 0.4);
}