/**
 * Divi Marquee Plugin - Frontend Styles
 */

.divi-marquee-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    /* CSS Containment for better rendering performance */
    contain: layout style paint;
    /* Will-change hint for browsers */
    will-change: transform;
    /* Isolation for better compositing */
    isolation: isolate;
}

.divi-marquee-content {
    display: flex;
    white-space: nowrap;
    will-change: transform;
}

.divi-marquee-text {
    flex-shrink: 0;
    padding: 10px 0;
    font-family: inherit;
    line-height: 1.2;
}

/* Animation pause on hover */
.divi-marquee-container[data-pause-on-hover="on"] .divi-marquee-content:hover {
    animation-play-state: paused !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .divi-marquee-text {
        font-size: 24px !important;
    }
}

@media (max-width: 480px) {
    .divi-marquee-text {
        font-size: 18px !important;
    }
}

/* Gradient text fallback for older browsers */
.divi-marquee-text {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Ensure proper rendering in Divi Builder */
.et-fb .divi-marquee-container {
    min-height: 50px;
}

/* Loading and initialization states */
.divi-marquee-container.divi-marquee-loading {
    opacity: 0.7;
    animation: divi-marquee-pulse 1.5s ease-in-out infinite;
}

.divi-marquee-container.divi-marquee-initialized {
    opacity: 1;
    animation: none;
}

@keyframes divi-marquee-pulse {
    0%, 100% {
        opacity: 0.7;
    }
    50% {
        opacity: 0.9;
    }
}

/* Accessibility improvements */
.divi-marquee-text:first-child {
    position: static;
}

.divi-marquee-text[aria-hidden="true"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Print styles */
@media print {
    .divi-marquee-container {
        overflow: visible !important;
    }
    
    .divi-marquee-content {
        animation: none !important;
        transform: none !important;
    }
    
    .divi-marquee-text[aria-hidden="true"] {
        display: none;
    }
}