/* 
* Risico Šačica - Animations Stylesheet
* Version: 1.0
*/

/* ===== Basic Animations ===== */

/* Fade In */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fadeIn {
    animation-name: fadeIn;
}

/* Fade In Up */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fadeInUp {
    animation-name: fadeInUp;
}

/* Fade In Down */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -40px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fadeInDown {
    animation-name: fadeInDown;
}

/* Fade In Left */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-40px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fadeInLeft {
    animation-name: fadeInLeft;
}

/* Fade In Right */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(40px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fadeInRight {
    animation-name: fadeInRight;
}

/* Zoom In */
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }
    50% {
        opacity: 1;
    }
}

.zoomIn {
    animation-name: zoomIn;
}

/* Pulse */
@keyframes pulse {
    from {
        transform: scale3d(1, 1, 1);
    }
    50% {
        transform: scale3d(1.05, 1.05, 1.05);
    }
    to {
        transform: scale3d(1, 1, 1);
    }
}

.pulse {
    animation-name: pulse;
    animation-iteration-count: infinite;
}

/* Floating */
@keyframes floating {
    from {
        transform: translate(0, 0px);
    }
    65% {
        transform: translate(0, 15px);
    }
    to {
        transform: translate(0, 0px);
    }
}

.floating {
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

/* Shake */
@keyframes shake {
    from, to {
        transform: translate3d(0, 0, 0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translate3d(-10px, 0, 0);
    }
    20%, 40%, 60%, 80% {
        transform: translate3d(10px, 0, 0);
    }
}

.shake {
    animation-name: shake;
}

/* Rotate */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.rotate {
    animation-name: rotate;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

/* ===== Custom Animations ===== */

/* Background Wave */
@keyframes backgroundWave {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.background-wave {
    background-size: 200% 200%;
    animation: backgroundWave 15s ease infinite;
}

/* Button Pulse */
@keyframes buttonPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(71, 228, 160, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(71, 228, 160, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(71, 228, 160, 0);
    }
}

.btn-primary.pulse-effect {
    animation: buttonPulse 2s infinite;
}

/* Tea Leaf Swing */
@keyframes teaLeafSwing {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(5deg);
    }
    50% {
        transform: rotate(0deg);
    }
    75% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.tea-leaf {
    animation: teaLeafSwing 3s ease-in-out infinite;
    transform-origin: top center;
}

/* Steam Rising */
@keyframes steamRising {
    0% {
        opacity: 0.5;
        transform: translateY(0) scaleX(1);
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 0;
        transform: translateY(-20px) scaleX(1.5);
    }
}

.steam {
    animation: steamRising 2s ease-out infinite;
}

/* ===== Animation Utility Classes ===== */

.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}

.animated.infinite {
    animation-iteration-count: infinite;
}

.animated.delay-1 {
    animation-delay: 0.2s;
}

.animated.delay-2 {
    animation-delay: 0.4s;
}

.animated.delay-3 {
    animation-delay: 0.6s;
}

.animated.delay-4 {
    animation-delay: 0.8s;
}

.animated.delay-5 {
    animation-delay: 1s;
}

.animated.fast {
    animation-duration: 0.5s;
}

.animated.slow {
    animation-duration: 2s;
}

.animated.slower {
    animation-duration: 3s;
}

/* ===== Responsive Animations ===== */
@media (prefers-reduced-motion: reduce) {
    .animated {
        animation: none !important;
        transition: none !important;
    }
} 