/* ================================================================
   TulBrand CMS — Fancy Animations CSS
   ================================================================

   Arquitectura:
   - .fa-anim-{name}      → define la animation con play-state: paused
   - .fa-trigger-loop     → play-state: running (siempre)
   - .fa-trigger-hover:hover → running
   - .fa-trigger-active:active → running
   - .fa-trigger-scroll.fa-in-view → running (JS añade .fa-in-view)

   CSS Custom Properties usadas:
   --fa-dur       Duración (ej: 600ms)
   --fa-delay     Retraso (ej: 0ms)
   --fa-ease      Curva de aceleración (ej: ease)
   --fa-iter      Iteraciones (número o 'infinite')
   --fa-intensity Intensidad 0..1 (ej: 0.05)
================================================================ */

/* ──────────────────────────────────────────────────────────────
   KEYFRAMES
────────────────────────────────────────────────────────────── */

/* Pulse — escala */
@keyframes fa-kf-pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(calc(1 + var(--fa-intensity, 0.05)));
    }
}

/* Rotate — giro continuo */
@keyframes fa-kf-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Rotate3D Y — perspectiva */
@keyframes fa-kf-rotate3dy {
    0% {
        transform: perspective(600px) rotateY(0deg);
    }

    100% {
        transform: perspective(600px) rotateY(360deg);
    }
}

/* Flip3D X — volteo */
@keyframes fa-kf-flip3dx {
    0% {
        transform: perspective(600px) rotateX(0deg);
    }

    50% {
        transform: perspective(600px) rotateX(180deg);
    }

    100% {
        transform: perspective(600px) rotateX(360deg);
    }
}

/* Bounce — rebote vertical */
@keyframes fa-kf-bounce {

    0%,
    100% {
        transform: translateY(0);
        animation-timing-function: ease-in;
    }

    40% {
        transform: translateY(calc(var(--fa-intensity, 0.05) * -280px));
        animation-timing-function: ease-out;
    }

    60% {
        transform: translateY(calc(var(--fa-intensity, 0.05) * -140px));
    }

    80% {
        transform: translateY(calc(var(--fa-intensity, 0.05) * -60px));
    }
}

/* Shake — temblor horizontal */
@keyframes fa-kf-shake {

    0%,
    100% {
        transform: translateX(0);
    }

    15% {
        transform: translateX(calc(var(--fa-intensity, 0.05) * -80px));
    }

    30% {
        transform: translateX(calc(var(--fa-intensity, 0.05) * 80px));
    }

    45% {
        transform: translateX(calc(var(--fa-intensity, 0.05) * -60px));
    }

    60% {
        transform: translateX(calc(var(--fa-intensity, 0.05) * 60px));
    }

    75% {
        transform: translateX(calc(var(--fa-intensity, 0.05) * -30px));
    }

    90% {
        transform: translateX(calc(var(--fa-intensity, 0.05) * 20px));
    }
}

/* Float — levitar */
@keyframes fa-kf-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(calc(var(--fa-intensity, 0.05) * -160px));
    }
}

/* Zoom — acercar/alejar */
@keyframes fa-kf-zoom {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(calc(1 + var(--fa-intensity, 0.05) * 2));
    }
}

/* Glow — resplandor box-shadow */
@keyframes fa-kf-glow {

    0%,
    100% {
        box-shadow: 0 0 0px 0px rgba(99, 102, 241, 0);
    }

    50% {
        box-shadow: 0 0 calc(var(--fa-intensity, 0.05) * 400px) calc(var(--fa-intensity, 0.05) * 100px) rgba(99, 102, 241, 0.45);
    }
}

/* Fade — fundido */
@keyframes fa-kf-fade {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: calc(1 - var(--fa-intensity, 0.05) * 4);
    }
}

/* Slide Up — aparecer desde abajo */
@keyframes fa-kf-slideup {
    0% {
        transform: translateY(calc(var(--fa-intensity, 0.05) * 600px));
        opacity: 0;
    }

    60% {
        opacity: 1;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Swing — balanceo */
@keyframes fa-kf-swing {

    0%,
    100% {
        transform: rotate(0deg);
        transform-origin: top center;
    }

    20% {
        transform: rotate(calc(var(--fa-intensity, 0.05) * 300deg));
        transform-origin: top center;
    }

    40% {
        transform: rotate(calc(var(--fa-intensity, 0.05) * -240deg));
        transform-origin: top center;
    }

    60% {
        transform: rotate(calc(var(--fa-intensity, 0.05) * 180deg));
        transform-origin: top center;
    }

    80% {
        transform: rotate(calc(var(--fa-intensity, 0.05) * -120deg));
        transform-origin: top center;
    }
}

/* Skew — sesgar */
@keyframes fa-kf-skew {

    0%,
    100% {
        transform: skewX(0deg);
    }

    25% {
        transform: skewX(calc(var(--fa-intensity, 0.05) * -400deg));
    }

    75% {
        transform: skewX(calc(var(--fa-intensity, 0.05) * 400deg));
    }
}

/* Color Glow — resplandor de color personalizable */
@keyframes fa-kf-colorglow {
    0% {
        filter: hue-rotate(0deg) drop-shadow(0 0 0px transparent);
    }

    50% {
        filter: hue-rotate(180deg) drop-shadow(0 0 calc(var(--fa-intensity, 0.05) * 200px) rgba(99, 102, 241, 0.6));
    }

    100% {
        filter: hue-rotate(360deg) drop-shadow(0 0 0px transparent);
    }
}

/* Wobble — tambalearse */
@keyframes fa-kf-wobble {

    0%,
    100% {
        transform: translateX(0) rotate(0deg);
    }

    15% {
        transform: translateX(calc(var(--fa-intensity, 0.05) * -300px)) rotate(calc(var(--fa-intensity, 0.05) * -100deg));
    }

    30% {
        transform: translateX(calc(var(--fa-intensity, 0.05) * 240px)) rotate(calc(var(--fa-intensity, 0.05) * 80deg));
    }

    45% {
        transform: translateX(calc(var(--fa-intensity, 0.05) * -180px)) rotate(calc(var(--fa-intensity, 0.05) * -60deg));
    }

    60% {
        transform: translateX(calc(var(--fa-intensity, 0.05) * 120px)) rotate(calc(var(--fa-intensity, 0.05) * 40deg));
    }

    75% {
        transform: translateX(calc(var(--fa-intensity, 0.05) * -60px)) rotate(calc(var(--fa-intensity, 0.05) * -20deg));
    }
}

/* ──────────────────────────────────────────────────────────────
   DECLARACIONES DE ANIMACIÓN — estado base: paused
   (La duración, easing, delay e iter se heredan de las CSS vars)
────────────────────────────────────────────────────────────── */

.fa-block.fa-anim-pulse {
    animation: fa-kf-pulse var(--fa-dur, 600ms) var(--fa-ease, ease) var(--fa-delay, 0ms) var(--fa-iter, 1) both;
    animation-play-state: paused;
}

.fa-block.fa-anim-rotate {
    animation: fa-kf-rotate var(--fa-dur, 1200ms) linear var(--fa-delay, 0ms) var(--fa-iter, infinite) both;
    animation-play-state: paused;
}

.fa-block.fa-anim-rotate3dy {
    animation: fa-kf-rotate3dy var(--fa-dur, 1200ms) linear var(--fa-delay, 0ms) var(--fa-iter, infinite) both;
    animation-play-state: paused;
}

.fa-block.fa-anim-flip3dx {
    animation: fa-kf-flip3dx var(--fa-dur, 900ms) var(--fa-ease, ease) var(--fa-delay, 0ms) var(--fa-iter, 1) both;
    animation-play-state: paused;
}

.fa-block.fa-anim-bounce {
    animation: fa-kf-bounce var(--fa-dur, 800ms) var(--fa-ease, ease) var(--fa-delay, 0ms) var(--fa-iter, 1) both;
    animation-play-state: paused;
}

.fa-block.fa-anim-shake {
    animation: fa-kf-shake var(--fa-dur, 600ms) var(--fa-ease, ease) var(--fa-delay, 0ms) var(--fa-iter, 1) both;
    animation-play-state: paused;
}

.fa-block.fa-anim-float {
    animation: fa-kf-float var(--fa-dur, 2000ms) ease-in-out var(--fa-delay, 0ms) var(--fa-iter, infinite) both;
    animation-play-state: paused;
}

.fa-block.fa-anim-zoom {
    animation: fa-kf-zoom var(--fa-dur, 700ms) var(--fa-ease, ease) var(--fa-delay, 0ms) var(--fa-iter, 1) both;
    animation-play-state: paused;
}

.fa-block.fa-anim-glow {
    animation: fa-kf-glow var(--fa-dur, 1200ms) ease-in-out var(--fa-delay, 0ms) var(--fa-iter, infinite) alternate;
    animation-play-state: paused;
}

.fa-block.fa-anim-fade {
    animation: fa-kf-fade var(--fa-dur, 1000ms) ease-in-out var(--fa-delay, 0ms) var(--fa-iter, infinite) alternate;
    animation-play-state: paused;
}

.fa-block.fa-anim-slideup {
    animation: fa-kf-slideup var(--fa-dur, 700ms) var(--fa-ease, ease) var(--fa-delay, 0ms) var(--fa-iter, 1) both;
    animation-play-state: paused;
}

.fa-block.fa-anim-swing {
    animation: fa-kf-swing var(--fa-dur, 800ms) var(--fa-ease, ease) var(--fa-delay, 0ms) var(--fa-iter, 1) both;
    animation-play-state: paused;
}

.fa-block.fa-anim-skew {
    animation: fa-kf-skew var(--fa-dur, 600ms) var(--fa-ease, ease) var(--fa-delay, 0ms) var(--fa-iter, 1) both;
    animation-play-state: paused;
}

.fa-block.fa-anim-colorglow {
    animation: fa-kf-colorglow var(--fa-dur, 2000ms) linear var(--fa-delay, 0ms) var(--fa-iter, infinite) both;
    animation-play-state: paused;
}

.fa-block.fa-anim-wobble {
    animation: fa-kf-wobble var(--fa-dur, 800ms) var(--fa-ease, ease) var(--fa-delay, 0ms) var(--fa-iter, 1) both;
    animation-play-state: paused;
}

/* ──────────────────────────────────────────────────────────────
   ACTIVADORES — cambian play-state a running
────────────────────────────────────────────────────────────── */

/* Loop: siempre corriendo */
.fa-block.fa-trigger-loop {
    animation-play-state: running !important;
}

/* Hover: al pasar el cursor */
.fa-block.fa-trigger-hover:hover {
    animation-play-state: running !important;
}

/* Active: mientras se mantiene el clic */
.fa-block.fa-trigger-active:active {
    animation-play-state: running !important;
}

/* Scroll: JS añade .fa-in-view cuando el elemento entra en viewport */
.fa-block.fa-trigger-scroll.fa-in-view {
    animation-play-state: running !important;
}

/* ──────────────────────────────────────────────────────────────
   SMOOTH RESET en hover (para hover con animación fill-mode: none)
────────────────────────────────────────────────────────────── */
.fa-block.fa-trigger-hover {
    animation-fill-mode: none;
    transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

/* ──────────────────────────────────────────────────────────────
   EDITOR PREVIEW: loop visible en el editor
────────────────────────────────────────────────────────────── */
.fa-editor-loop {
    animation-play-state: running !important;
}

/* ──────────────────────────────────────────────────────────────
   PANEL del editor (estilo del panel en Gutenberg)
────────────────────────────────────────────────────────────── */
.tbl-fancy-panel .components-panel__body-toggle {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%) !important;
    color: #fff !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
}

.tbl-fancy-panel .components-panel__body-toggle:hover {
    background: linear-gradient(135deg, #1e293b 0%, #312e81 100%) !important;
}