/* 
==========================================
    Animations Stylesheet - animations.css
    Author: Yashas Rajanna Naidu
    Version: 1.0
==========================================
*/

/* ===== FADE IN ANIMATION ===== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.6s ease forwards;
    opacity: 0;
}

/* Animation Delays */
.delay-1 {
    animation-delay: 0.2s;
}

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

.delay-3 {
    animation-delay: 0.6s;
}

.delay-4 {
    animation-delay: 0.8s;
}

/* ===== FLOAT ANIMATION ===== */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}

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

/* ===== TYPING ANIMATION ===== */
.typing {
    position: relative;
}

.typing::after {
    content: '|';
    position: absolute;
    right: -8px;
    width: 8px;
    height: 100%;
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

/* ===== PULSE ANIMATION ===== */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(58, 134, 255, 0.7);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(58, 134, 255, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(58, 134, 255, 0);
    }
}

.pulse {
    animation: pulse 2s infinite;
}

/* ===== SLIDE IN ANIMATIONS ===== */
@keyframes slideInLeft {
    from {
        transform: translateX(-50px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.slide-in-left {
    animation: slideInLeft 0.5s ease forwards;
}

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

.slide-in-right {
    animation: slideInRight 0.5s ease forwards;
}

/* ===== ROTATE ANIMATION ===== */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.rotate {
    animation: rotate 8s linear infinite;
}

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

.bounce {
    animation: bounce 2s infinite;
}

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

.shake {
    animation: shake 0.8s ease-in-out;
}

/* ===== SCALE ANIMATION ===== */
@keyframes scale {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

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

/* ===== FADE IN UP ANIMATION ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.8s ease forwards;
}

/* ===== GLOW ANIMATION ===== */
@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(58, 134, 255, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(58, 134, 255, 0.8);
    }
}

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

/* ===== REVEAL ANIMATION ===== */
.reveal {
    position: relative;
    transform: translateY(50px);
    opacity: 0;
    transition: all 0.6s ease;
}

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

/* Different reveal directions */
.reveal-left {
    transform: translateX(-50px);
}

.reveal-right {
    transform: translateX(50px);
}

.reveal-top {
    transform: translateY(-50px);
}

.reveal-bottom {
    transform: translateY(50px);
}

.reveal-left.active,
.reveal-right.active,
.reveal-top.active,
.reveal-bottom.active {
    transform: translate(0);
}