/* 
* Black & White Koltuk Yıkama
* Animation Styling
*/

/* Preloader Animation */
@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
}

/* Fade In Animation */
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Fade Up Animation */
@keyframes fadeUp {
    0% { 
        opacity: 0;
        transform: translateY(30px);
    }
    100% { 
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade Down Animation */
@keyframes fadeDown {
    0% { 
        opacity: 0;
        transform: translateY(-30px);
    }
    100% { 
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slide Right Animation */
@keyframes slideRight {
    0% { 
        opacity: 0;
        transform: translateX(-50px);
    }
    100% { 
        opacity: 1;
        transform: translateX(0);
    }
}

/* Slide Left Animation */
@keyframes slideLeft {
    0% { 
        opacity: 0;
        transform: translateX(50px);
    }
    100% { 
        opacity: 1;
        transform: translateX(0);
    }
}

/* Slide Up Animation */
@keyframes slideUp {
    0% { 
        opacity: 0;
        transform: translateY(50px);
    }
    100% { 
        opacity: 1;
        transform: translateY(0);
    }
}

/* Zoom In Animation */
@keyframes zoomIn {
    0% { 
        opacity: 0;
        transform: scale(0.8);
    }
    100% { 
        opacity: 1;
        transform: scale(1);
    }
}

/* Scale Up Animation */
@keyframes scaleUp {
    0% { 
        transform: scaleX(0);
    }
    100% { 
        transform: scaleX(1);
    }
}

/* Rotate Animation */
@keyframes rotate {
    0% { 
        transform: rotate(0deg);
    }
    100% { 
        transform: rotate(360deg);
    }
}

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

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

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

/* Animate on Scroll Classes */
/* Will be applied by JS */
.animate {
    opacity: 0;
    visibility: hidden;
    transition-duration: 0.8s;
}

.animate.fade-in {
    animation: fadeIn 0.8s forwards;
}

.animate.fade-up {
    animation: fadeUp 0.8s forwards;
}

.animate.fade-down {
    animation: fadeDown 0.8s forwards;
}

.animate.slide-right {
    animation: slideRight 0.8s forwards;
}

.animate.slide-left {
    animation: slideLeft 0.8s forwards;
}

.animate.slide-up {
    animation: slideUp 0.8s forwards;
}

.animate.zoom-in {
    animation: zoomIn 0.8s forwards;
}

.animate.scale-up {
    animation: scaleUp 0.8s forwards;
}

.animate.rotate {
    animation: rotate 0.8s forwards;
}

.animate.pulse {
    animation: pulse 1.5s infinite;
}

/* Gallery specific animations */
.gallery-item {
    transition: all 0.8s ease;
}

.gallery-item.animated .gallery-overlay {
    animation: fadeIn 0.3s forwards;
}

.gallery-item.animated img {
    animation: scaleUp 0.5s forwards;
}

/* Special Animation Elements */

/* Hover Effects */
.btn-primary,
.btn-secondary,
.service-card,
.gallery-item,
.social-media a,
.whatsapp-button {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.nav-menu a::after {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Menu Animation */
.menu-toggle span {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Testimonial Slider Animation */
.testimonial-item {
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* WhatsApp Button Animation */
.whatsapp-button {
    animation: pulse 2s infinite;
}

/* Background Image Parallax Effect */
.hero,
.process,
.testimonials {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Loading Animation */
.loader {
    animation: rotate 1s linear infinite;
}

/* Page Transition */
.page-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 9999;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.5s cubic-bezier(0.86, 0, 0.07, 1);
}

.page-transition.active {
    transform: scaleY(1);
}

/* Cursor effect for typing animation */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background-color: #000;
    margin-left: 2px;
    animation: blink 1s infinite;
    vertical-align: text-bottom;
}

/* Animation Delays */
[data-delay="0.1"] { animation-delay: 0.1s; }
[data-delay="0.2"] { animation-delay: 0.2s; }
[data-delay="0.3"] { animation-delay: 0.3s; }
[data-delay="0.4"] { animation-delay: 0.4s; }
[data-delay="0.5"] { animation-delay: 0.5s; }
[data-delay="0.6"] { animation-delay: 0.6s; }
[data-delay="0.7"] { animation-delay: 0.7s; }
[data-delay="0.8"] { animation-delay: 0.8s; }
[data-delay="0.9"] { animation-delay: 0.9s; }
[data-delay="1.0"] { animation-delay: 1.0s; }

/* Mobile animations optimization */
@media screen and (max-width: 768px) {
    .hero,
    .process,
    .testimonials {
        background-attachment: scroll;
    }
}