/**
 * Frontend štýly pre Datatime Scrolling Slanted SVG Strips
 */

.dttm-scrolling-strips-container {
    position: relative;
    width: 100%;
    overflow: visible;
}

.dttm-strip {
    position: relative;
    overflow: hidden;
    transform-origin: center center;
    height: auto;
    /* Šírka a margin sa nastavujú cez Elementor selectors */
}

.dttm-strip-content {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    will-change: transform;
    /* JavaScript animácie namiesto CSS */
}

/* Univerzálny obsah kontajner (SVG aj text) */
.dttm-content-container {
    display: flex;
    align-items: center;
    white-space: nowrap;
    min-width: 200%;
    will-change: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Backward compatibility pre starý SVG kontajner */
.dttm-svg-container {
    display: flex;
    align-items: center;
    white-space: nowrap;
    min-width: 200%;
    will-change: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.dttm-svg-item {
    flex-shrink: 0;
    display: inline-block;
    height: auto;
}

.dttm-text-item {
    flex-shrink: 0;
    display: inline-block;
    height: auto;
    white-space: nowrap;
    /* Farba, typografia a margin-right sa nastavujú cez Elementor selectors */
}

.dttm-svg-item svg {
    height: auto;
    display: block;
    max-height: none;
    /* Šírka sa nastavuje cez Elementor selectors */
}

/* Základne responzívne nastavenia - SVG určuje výšku */
.dttm-strip {
    min-height: auto;
}

/* Optimalizácia výkonu */
.dttm-scrolling-strips-container,
.dttm-strip,
.dttm-strip-content,
.dttm-content-container,
.dttm-svg-container {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

/* Plynulosť animácií - len SVG kontajner má animácie */
.dttm-strip-content {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Editačný mód Elementoru */
.elementor-editor-active .dttm-strip-content {
    animation-play-state: paused;
}

/* Preloader pre SVG načítavanie */
.dttm-strip-content.loading {
    opacity: 0.5;
}

.dttm-strip-content.loaded {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}