/**
 * Animated Image Widget - Styles
 */

.animated-image-wrapper {
    position: relative;
    overflow: hidden;
}

.animated-image-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
}

.animated-image-column {
    position: relative;
    overflow: hidden;
}

.animated-image-track {
    display: flex;
    flex-direction: column;
}

.animated-image-item {
    width: 100%;
}

.animated-image-column img {
    display: block;
    width: 100%;
    height: auto;
}

/* Keyframes for vertical scrolling */
@keyframes animated-image-scroll-up {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%);
    }
}

@keyframes animated-image-scroll-down {
    0% {
        transform: translateY(-50%);
    }
    100% {
        transform: translateY(0);
    }
}

/* Base animation, configured via CSS variables on wrapper */
.animated-image-column-1 .animated-image-track {
    animation-name: animated-image-scroll-up;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.animated-image-column-2 .animated-image-track {
    animation-name: animated-image-scroll-down;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.animated-image-wrapper {
    --animated-image-speed: 20s;
    --animated-image-delay: 0s;
}

.animated-image-track {
    animation-duration: var(--animated-image-speed);
    animation-delay: var(--animated-image-delay);
}

/* Direction override */
.animated-image-column.direction-up .animated-image-track {
    animation-name: animated-image-scroll-up;
}

.animated-image-column.direction-down .animated-image-track {
    animation-name: animated-image-scroll-down;
}

/* Loop toggle: when disabled, run only once */
.animated-image-wrapper[data-animation-loop="false"] .animated-image-track {
    animation-iteration-count: 1;
}

/* Hover pause */
.animated-image-hover-pause:hover .animated-image-track {
    animation-play-state: paused;
}

/* Hover effects on images */
.animated-image-hover-scale .animated-image-item img {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.animated-image-hover-scale .animated-image-item img:hover {
    transform: scale(1.03);
}

.animated-image-hover-shadow .animated-image-item img {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.animated-image-hover-shadow .animated-image-item img:hover {
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.25);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .animated-image-track {
        animation: none !important;
    }
}

/* Cloudy fade effect at bottom */
.animated-image-wrapper::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    pointer-events: none;
    /* Soft cloudy-style gradient using brand color #2E2EA0 */
    background: linear-gradient(360deg, #2E2EA0 0%, transparent 70%)
}