/* Dynamic Animations – Structural + CSS custom properties de ítem */

/* ── Base ──────────────────────────────────────────────────────────── */
.tbl-da-wrapper {
    position: relative;
    overflow: hidden;
    /* Nota: color, fondo, tipografía y borde del wrapper
       los inyecta Gutenberg mediante sus propias clases/styles (supports). */
}


.tbl-da-text {
    color: inherit; /* hereda del wrapper (color nativo de Gutenberg) */
}

.tbl-da-link {
    display:         inline-flex;
    align-items:     center;
    color:           inherit;
    text-decoration: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TICKER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.tbl-da-preset-ticker .tbl-da-track {
    display:     flex;
    align-items: center;
    width:       max-content;
    gap:         var(--tbl-da-item-gap, 0px);
    will-change: transform;
    animation:   tbl-da-scroll-left var(--tbl-da-speed, 30s) linear infinite;
}

.tbl-da-preset-ticker .tbl-da-track.tbl-da-dir-right {
    animation-name: tbl-da-scroll-right;
}

.tbl-da-preset-ticker:hover .tbl-da-track {
    animation-play-state: var(--tbl-da-hover-state, running);
}

.tbl-da-preset-ticker .tbl-da-item,
.tbl-da-preset-ticker .tbl-da-sep {
    display:     flex;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
}

.tbl-da-preset-ticker .tbl-da-link {
    white-space: nowrap;
}

@keyframes tbl-da-scroll-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes tbl-da-scroll-right {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CIRCULAR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.tbl-da-preset-circular {
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.tbl-da-preset-circular .tbl-da-orbit {
    position:    relative;
    will-change: transform;
}

.tbl-da-preset-circular .tbl-da-item {
    position:    absolute;
    top:         50%;
    left:        50%;
    will-change: transform;
}

.tbl-da-preset-circular .tbl-da-link {
    display: block;
}

@keyframes tbl-da-orbit-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes tbl-da-orbit-spin-reverse {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CARDS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.tbl-da-preset-cards .tbl-da-cards {
    position: relative;
}

.tbl-da-preset-cards .tbl-da-item {
    position:       absolute;
    inset:          0;
    opacity:        0;
    transform:      translateY(16px);
    transition:     opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
}

.tbl-da-preset-cards .tbl-da-item.tbl-da-active {
    opacity:        1;
    transform:      translateY(0);
    position:       relative;
    pointer-events: auto;
}

.tbl-da-preset-cards .tbl-da-link {
    display: block;
}