/**
 * DDG Carousel Styles with Ken Burns Effect
 * Version: 1.0.0
 */



/* ========================================
   Ken Burns Effect Animations
   ======================================== */

.ddg-carousel.ken-burns-enabled .ddg-slide img {
    width: 110%;
    height: 110%;
    animation: kenburns-zoom-in var(--ken-burns-duration, 20s) ease-out infinite;
    transform-origin: center center;
    will-change: transform;
}

/* Animation Variations */
@keyframes kenburns-zoom-in {
    0% {
        transform: scale(1) translate(0, 0);
    }
    100% {
        transform: scale(1.15) translate(-2%, -1%);
    }
}

@keyframes kenburns-zoom-out {
    0% {
        transform: scale(1.15) translate(-2%, -1%);
    }
    100% {
        transform: scale(1) translate(0, 0);
    }
}

@keyframes kenburns-pan-left {
    0% {
        transform: scale(1.05) translate(2%, 0);
    }
    100% {
        transform: scale(1.15) translate(-3%, 0);
    }
}

@keyframes kenburns-pan-right {
    0% {
        transform: scale(1.05) translate(-2%, 0);
    }
    100% {
        transform: scale(1.15) translate(3%, 0);
    }
}

@keyframes kenburns-pan-up {
    0% {
        transform: scale(1.05) translate(0, 2%);
    }
    100% {
        transform: scale(1.15) translate(0, -3%);
    }
}

@keyframes kenburns-pan-down {
    0% {
        transform: scale(1.05) translate(0, -2%);
    }
    100% {
        transform: scale(1.15) translate(0, 3%);
    }
}

/* Apply different animations to each slide */
.ddg-carousel.ken-burns-enabled .ddg-slide:nth-child(6n+1) img {
    animation-name: kenburns-zoom-in;
}

.ddg-carousel.ken-burns-enabled .ddg-slide:nth-child(6n+2) img {
    animation-name: kenburns-zoom-out;
}

.ddg-carousel.ken-burns-enabled .ddg-slide:nth-child(6n+3) img {
    animation-name: kenburns-pan-left;
}

.ddg-carousel.ken-burns-enabled .ddg-slide:nth-child(6n+4) img {
    animation-name: kenburns-pan-right;
}

.ddg-carousel.ken-burns-enabled .ddg-slide:nth-child(6n+5) img {
    animation-name: kenburns-pan-up;
}

.ddg-carousel.ken-burns-enabled .ddg-slide:nth-child(6n) img {
    animation-name: kenburns-pan-down;
}

/* Only animate active slide for performance */
.ddg-carousel.ken-burns-enabled .ddg-slide:not(.active) img {
    animation-play-state: paused;
}

.ddg-carousel.ken-burns-enabled .ddg-slide.active img {
    animation-play-state: running;
}


/* ========================================
   Responsive Design
   ======================================== */

@media (max-width: 1024px) {
    .ddg-slide__content {
        padding: 40px 40px 30px;
    }
    
    .ddg-rail {
        right: 30px;
    }
}

@media (max-width: 768px) {
    .ddg-slide {
        min-height: 350px;
        max-height: 70vh;
    }
    
    .ddg-slide img {
        min-height: 350px;
        max-height: 70vh;
    }
    
    .ddg-slide__content {
        padding: 30px 30px 25px;
    }
    
    .ddg-slide__content .title {
        font-size: clamp(24px, 5vw, 36px);
    }
    
    .ddg-rail {
        right: 20px;
    }
    
    .ddg-dots {
        gap: 12px;
    }
    
    .ddg-dot {
        width: 10px;
        height: 10px;
    }
}

@media (max-width: 480px) {
    .ddg-slide {
        min-height: 300px;
        max-height: 60vh;
    }
    
    .ddg-slide img {
        min-height: 300px;
        max-height: 60vh;
    }
    
    .ddg-slide__content {
        padding: 20px 20px 20px;
    }
    
    .ddg-slide__content .eyebrow {
        font-size: 12px;
        letter-spacing: 0.1em;
    }
    
    .ddg-slide__content .title {
        font-size: clamp(20px, 6vw, 28px);
    }
    
    .ddg-slide__content .accent {
        width: 40px;
        height: 3px;
        margin-top: 16px;
    }
    
    .ddg-slide:hover .accent {
        width: 60px;
    }
    
    .ddg-rail {
        right: 15px;
    }
    
    .ddg-dots {
        gap: 10px;
    }
}

/* ========================================
   Accessibility
   ======================================== */

.ddg-carousel:focus-visible,
.ddg-carousel__viewport:focus-visible {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .ddg-carousel .ddg-slide img {
        animation: none !important;
    }
    
    .ddg-carousel__track {
        transition: none;
    }
    
    .ddg-slide__content,
    .ddg-slide__content .arrow,
    .ddg-slide__content .accent,
    .ddg-dot {
        transition: none;
    }
}

/* ========================================
   Loading State
   ======================================== */

.ddg-carousel.is-loading .ddg-slide img {
    opacity: 0;
}

.ddg-carousel .ddg-slide img {
    opacity: 1;
    transition: opacity 0.5s ease;
}

/* ========================================
   Print Styles
   ======================================== */

@media print {
    .ddg-carousel {
        display: none;
    }
}