/* ============================================================
   Divi Text Animator — dta-styles.css
   ============================================================ */

/* ---------- Shared base ---------- */
.dta-animate {
    display: inline-block;
}

/* ── Typewriter cursor ── */
.dta-cursor {
    display: inline-block;
    color: inherit;
    font-weight: 300;
    animation: none;
}
.dta-cursor.blink {
    animation: dta-blink 0.75s step-end infinite;
}
@keyframes dta-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* ── Fade In ── */
.dta-effect-fade-in.dta-ready {
    opacity: 0;
}
.dta-effect-fade-in.dta-running {
    animation: dta-fadeIn var(--dta-duration, 0.8s) ease forwards;
}
@keyframes dta-fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Slide Up ── */
.dta-effect-slide-up.dta-ready {
    opacity: 0;
    transform: translateY(40px);
}
.dta-effect-slide-up.dta-running {
    animation: dta-slideUp var(--dta-duration, 0.7s) cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes dta-slideUp {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Slide from Left ── */
.dta-effect-slide-left.dta-ready {
    opacity: 0;
    transform: translateX(-50px);
}
.dta-effect-slide-left.dta-running {
    animation: dta-slideLeft var(--dta-duration, 0.7s) cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes dta-slideLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ── Bounce In ── */
.dta-effect-bounce.dta-ready {
    opacity: 0;
    transform: scale(0.6);
}
.dta-effect-bounce.dta-running {
    animation: dta-bounceIn var(--dta-duration, 0.8s) cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}
@keyframes dta-bounceIn {
    0%   { opacity: 0; transform: scale(0.6); }
    60%  { opacity: 1; transform: scale(1.08); }
    80%  { transform: scale(0.96); }
    100% { opacity: 1; transform: scale(1); }
}

/* ── Glitch ── */
.dta-effect-glitch.dta-ready {
    opacity: 0;
}
.dta-effect-glitch.dta-running {
    opacity: 1;
    animation: dta-glitch var(--dta-duration, 0.9s) steps(1) forwards;
    position: relative;
}
.dta-effect-glitch.dta-running::before,
.dta-effect-glitch.dta-running::after {
    content: attr(data-text);
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    animation: dta-glitch-color var(--dta-duration, 0.9s) steps(1) forwards;
}
.dta-effect-glitch.dta-running::before {
    color: #0ff;
    clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
    animation-name: dta-glitch-top;
}
.dta-effect-glitch.dta-running::after {
    color: #f0f;
    clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
    animation-name: dta-glitch-bot;
}
@keyframes dta-glitch {
    0%   { opacity: 0; transform: skewX(0deg); }
    10%  { opacity: 1; transform: skewX(-4deg); }
    20%  { transform: skewX(3deg); }
    30%  { transform: skewX(-2deg); }
    50%  { transform: skewX(1deg); }
    80%  { transform: skewX(0deg); }
    100% { opacity: 1; transform: skewX(0deg); }
}
@keyframes dta-glitch-top {
    0%   { transform: translate(-4px, -2px); opacity: 0.8; }
    20%  { transform: translate(4px,  2px);  opacity: 0.6; }
    40%  { transform: translate(-2px, 0px);  opacity: 0.9; }
    60%  { transform: translate(2px, -2px);  opacity: 0.7; }
    80%  { transform: translate(0, 0);       opacity: 0; }
    100% { transform: translate(0, 0);       opacity: 0; }
}
@keyframes dta-glitch-bot {
    0%   { transform: translate(4px,  2px); opacity: 0.8; }
    20%  { transform: translate(-4px,-2px); opacity: 0.6; }
    40%  { transform: translate(2px,  0px); opacity: 0.9; }
    60%  { transform: translate(-2px, 2px); opacity: 0.7; }
    80%  { transform: translate(0, 0);      opacity: 0; }
    100% { transform: translate(0, 0);      opacity: 0; }
}

/* ── Wave ── */
.dta-effect-wave .dta-wave-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    animation: dta-waveChar 0.5s ease forwards;
}
@keyframes dta-waveChar {
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Responsive tweaks
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .dta-animate,
    .dta-animate * {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .dta-cursor { display: none; }
}