/**
 * FC Academy Text/Image Marquee widgets.
 *
 * Class names, CSS custom properties, and keyframes are copied verbatim
 * from the "marquee-addons-for-elementor" plugin's own stylesheet
 * (assets/css/plugins/common-styles.css + assets/css/widgets/{text,image}
 * -marquee.min.css) so this is a pixel-for-pixel drop-in replacement for
 * content already saved against those exact selectors — see the widget
 * PHP files for the full rationale. The image-marquee source used nested
 * CSS syntax; flattened here to plain CSS for consistency with the rest
 * of this plugin's stylesheets.
 */

.deensimc-marquee-main-container {
    --deensimc-item-gap: 2rem;
    --deensimc-container-padding: 1rem;
    --edge-shadow-color: #ffffff;
    --edge-shadow-spread: 50px;
    --edge-shadow-blur: 30px;

    position: relative;
    overflow: clip;
    display: flex;
    align-items: center;
    user-select: none;
    width: 100%;
    padding-block: var(--deensimc-container-padding);
}

.deensimc-marquee-main-container ul,
.deensimc-marquee-main-container ol {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.deensimc-marquee-track-wrapper {
    max-height: 100%;
    display: flex;
    align-items: center;
    gap: var(--deensimc-item-gap);
}

.deensimc-marquee-track {
    display: flex;
    gap: var(--deensimc-item-gap);
    will-change: transform;
    animation-name: deensimc_marquee_horizontal;
    animation-duration: 0s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

/* Conditional classes (toggled in render() from the Marquee Options controls) */

.deensimc-marquee-vertical.deensimc-marquee-main-container {
    height: 60vh;
    padding-inline: var(--deensimc-container-padding);
    padding-block: 0;
}

.deensimc-marquee-vertical .deensimc-marquee-track-wrapper,
.deensimc-marquee-vertical .deensimc-marquee-track {
    flex-direction: column;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.deensimc-marquee-vertical .deensimc-marquee-track {
    animation-name: deensimc_marquee_vertical;
}

.deensimc-marquee-pause-on-hover .deensimc-marquee-track-wrapper:hover .deensimc-marquee-track {
    animation-play-state: paused;
}

.deensimc-marquee-reverse .deensimc-marquee-track {
    animation-direction: reverse;
}

.deensimc-marquee-edge-shadow {
    position: relative;
}
.deensimc-marquee-edge-shadow::after,
.deensimc-marquee-edge-shadow::before {
    content: "";
    width: 0;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 1;
    pointer-events: none;
    box-shadow: 0 0 var(--edge-shadow-blur) var(--edge-shadow-spread) var(--edge-shadow-color);
}
.deensimc-marquee-edge-shadow::before {
    left: 0;
}
.deensimc-marquee-edge-shadow::after {
    right: 0;
}

.deensimc-marquee-vertical.deensimc-marquee-edge-shadow::after,
.deensimc-marquee-vertical.deensimc-marquee-edge-shadow::before {
    content: "";
    width: 100%;
    height: 0;
    position: absolute;
    left: 0;
    z-index: 1;
    transition: width 300ms ease;
    will-change: width;
    box-shadow: 0 0 var(--edge-shadow-blur) var(--edge-shadow-spread) var(--edge-shadow-color);
}
.deensimc-marquee-vertical.deensimc-marquee-edge-shadow::before {
    top: 0;
}
.deensimc-marquee-vertical.deensimc-marquee-edge-shadow::after {
    top: auto;
    bottom: 0;
}

[dir="rtl"] .deensimc-marquee-main-container,
[dir="rtl"] .deensimc-marquee-track-wrapper,
[dir="rtl"] .deensimc-marquee-track {
    flex-direction: row-reverse;
}

[dir="rtl"] .deensimc-marquee-vertical .deensimc-marquee-track-wrapper,
[dir="rtl"] .deensimc-marquee-vertical .deensimc-marquee-track {
    flex-direction: column;
}

@keyframes deensimc_marquee_horizontal {
    to {
        transform: translateX(calc(-100% - var(--deensimc-item-gap)));
    }
}
@keyframes deensimc_marquee_vertical {
    to {
        transform: translateY(calc(-100% - var(--deensimc-item-gap)));
    }
}

@keyframes deensimc-rotate-360 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Text Marquee base layout */

.deensimc-text-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.deensimc-text-marquee .deensimc-scroll-text {
    white-space: nowrap;
    line-height: 1.2;
    margin: 0;
    transition: color 0.2s ease;
}

.deensimc-marquee-vertical .deensimc-scroll-text {
    white-space: normal;
}

@media (max-width: 767px) {
    .deensimc-marquee-vertical .deensimc-scroll-text {
        white-space: nowrap;
    }
}

.deensimc-icon-rotate svg,
.deensimc-icon-rotate i {
    animation-name: deensimc-rotate-360;
    animation-duration: var(--icon-speed, 0);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.deensimc-icon-rotate.deensimc-icon-rotate-ccw svg,
.deensimc-icon-rotate.deensimc-icon-rotate-ccw i {
    animation-direction: reverse;
}

.deensimc-marquee-pause-on-hover:hover svg,
.deensimc-marquee-pause-on-hover:hover i {
    animation-play-state: paused;
}

/* Image Marquee base layout */

.deensimc-img-wrapper {
    display: flex;
    flex-direction: column;
    max-width: 100%;
}

.deensimc-img-wrapper .deensimc-img {
    max-width: 100%;
    width: 250px;
    min-width: 100px;
}

.deensimc-img-wrapper .deensimc-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.deensimc-img-wrapper .deensimc-image-marquee-caption {
    line-height: 1.2;
}