/* Hero Animation Container Styles */

/* Main Container */
.hero-animation-container {
    width: 100%;
    height: 20rem;
    overflow: hidden;
    border-radius: 0.5rem;
    position: relative;
}

@media (min-width: 640px) {
    .hero-animation-container {
        height: 30rem;
    }
}

@media (min-width: 1024px) {
    .hero-animation-container {
        height: 35rem;
    }
}

/* Grid Container with 3D Perspective */
.hero-animation-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    /*width: 60rem;*/
    width: 35rem;
    height: 55rem;
    overflow: hidden;
    transform-origin: 50% 0%;
    transform: translate3d(7%, -2%, 0px) scale3d(0.9, 0.8, 1) rotateX(15deg) rotateY(-9deg) rotateZ(32deg);
    perspective: 700px;
}

@media (min-width: 640px) {
    .hero-animation-grid {
        width: 80rem;
        height: 90rem;
    }
}

@media (min-width: 1024px) {
    .hero-animation-grid {
        width: 50rem;
        height: 75rem;
    }
}

/* Animation Columns */
.hero-animation-column {
    display: grid;
    gap: 2.25rem;
    width: 100%;
    height: 440px;
    position: relative;
}

/* Column 1 - Slides Up */
.hero-animation-column-1 {
    animation: hero-slide-up-1 30s linear infinite;
}

/* Column 2 - Slides Down */
.hero-animation-column-2 {
    animation: hero-slide-down-1 30s linear infinite;
}

/* Column 3 - Slides Up */
.hero-animation-column-3 {
    animation: hero-slide-up-2 30s linear infinite;
}

/* Image Styles */
.hero-animation-image {
    width: 100%;
    object-fit: cover;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-radius: 0.5rem;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.hero-animation-image:hover {
    border-color: #6366f1;
    /*transform: scale(1.02);*/
}

.dark .hero-animation-image {
    border-color: #374151;
    box-shadow: 0 10px 15px -3px rgba(23, 23, 23, 0.8), 0 4px 6px -2px rgba(23, 23, 23, 0.8);
}

.dark .hero-animation-image:hover {
    border-color: #818cf8;
}

/* Keyframe Animations - Gerçek Sonsuz Döngü */

/* Column 1 Animation - Slides Up */
@keyframes hero-slide-up-1 {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%);
    }
}

/* Column 2 Animation - Slides Down */
@keyframes hero-slide-down-1 {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0);
    }
}

/* Column 3 Animation - Slides Up */
@keyframes hero-slide-up-2 {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%);
    }
}

/* Performance Optimizations */
.hero-animation-container {
    will-change: transform;
    backface-visibility: hidden;
}

.hero-animation-grid {
    will-change: transform;
    backface-visibility: hidden;
}

.hero-animation-column {
    will-change: transform;
    backface-visibility: hidden;
}