/* ═══════════════════════════════════════════════════════════════════════
   Lyra Advanced Text — frontend styles

   The PHP renderer emits per-instance scoped rules inline (typography,
   colors, padding, drop cap geometry, gradient fill, columns). The
   global rules below cover:
     - Outer block-alignment wrapper (centered / left / right when a
       max-width is set on the inner box)
     - Animation initial states + keyframes for all 7 types
     - Word-by-word per-word states
     - prefers-reduced-motion fallback

   Per-instance CSS variables driving the animation:
     --lyra-bt-anim-duration  (e.g. 600ms)
     --lyra-bt-anim-delay     (e.g. 0ms)
     --lyra-bt-anim-easing    (e.g. ease-out)
     --lyra-bt-stagger        (word-by-word only — e.g. 50ms)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Outer wrapper ────────────────────────────────────────────────────── */
.lyra-bt-adv-text-wrap { display: block; }
.lyra-bt-adv-text-wrap--align-left   .lyra-bt-adv-text { margin-left: 0;    margin-right: auto; }
.lyra-bt-adv-text-wrap--align-center .lyra-bt-adv-text { margin-left: auto; margin-right: auto; }
.lyra-bt-adv-text-wrap--align-right  .lyra-bt-adv-text { margin-left: auto; margin-right: 0;    }

/* ── Box + body ──────────────────────────────────────────────────────── */
.lyra-bt-adv-text {
    box-sizing: border-box;
    /* Per-instance rules (font-size, line-height, padding, bg, border,
       max-width, font-weight, letter-spacing, text-transform, color)
       are emitted by build_style_tag(). */
}
.lyra-bt-adv-text__body {
    /* The body renders the WYSIWYG output. wp_kses_post strips dangerous
       HTML; here we just make sure paragraphs don't have huge default
       margins on the first/last child. */
}
.lyra-bt-adv-text__body > p:first-child  { margin-top: 0; }
.lyra-bt-adv-text__body > p:last-child   { margin-bottom: 0; }

/* Text alignment — applied via modifier class on .lyra-bt-adv-text */
.lyra-bt-adv-text--align-left    .lyra-bt-adv-text__body { text-align: left;    }
.lyra-bt-adv-text--align-center  .lyra-bt-adv-text__body { text-align: center;  }
.lyra-bt-adv-text--align-right   .lyra-bt-adv-text__body { text-align: right;   }
.lyra-bt-adv-text--align-justify .lyra-bt-adv-text__body { text-align: justify; }

/* Empty state (admins only) */
.lyra-bt-adv-text--empty {
    padding: 14px 18px;
    border: 1px dashed #cbd5e1;
    background: #f8fafc;
    color: #64748b;
    border-radius: 6px;
}

/* ── Animation initial states ─────────────────────────────────────────── */
/* Block-level animations: the entire block animates. JS adds .is-visible
   when the block enters view; that triggers the CSS animation defined
   per-type below.

   We use opacity:0 as the default initial state for non-word animations.
   The CSS animation `forwards` fill-mode keeps the end state once
   complete. */

.lyra-bt-adv-text--has-anim:not(.lyra-bt-adv-text--anim-word-by-word) {
    opacity: 0;
}

.lyra-bt-adv-text--anim-fade-in.is-visible {
    animation: lyra-bt-adv-fade-in var(--lyra-bt-anim-duration, 600ms) var(--lyra-bt-anim-easing, ease-out) var(--lyra-bt-anim-delay, 0ms) forwards;
}
.lyra-bt-adv-text--anim-slide-up.is-visible {
    animation: lyra-bt-adv-slide-up var(--lyra-bt-anim-duration, 600ms) var(--lyra-bt-anim-easing, ease-out) var(--lyra-bt-anim-delay, 0ms) forwards;
}
.lyra-bt-adv-text--anim-slide-from-left.is-visible {
    animation: lyra-bt-adv-slide-from-left var(--lyra-bt-anim-duration, 600ms) var(--lyra-bt-anim-easing, ease-out) var(--lyra-bt-anim-delay, 0ms) forwards;
}
.lyra-bt-adv-text--anim-slide-from-right.is-visible {
    animation: lyra-bt-adv-slide-from-right var(--lyra-bt-anim-duration, 600ms) var(--lyra-bt-anim-easing, ease-out) var(--lyra-bt-anim-delay, 0ms) forwards;
}
.lyra-bt-adv-text--anim-zoom-in.is-visible {
    animation: lyra-bt-adv-zoom-in var(--lyra-bt-anim-duration, 600ms) var(--lyra-bt-anim-easing, ease-out) var(--lyra-bt-anim-delay, 0ms) forwards;
}
.lyra-bt-adv-text--anim-blur-in.is-visible {
    animation: lyra-bt-adv-blur-in var(--lyra-bt-anim-duration, 600ms) var(--lyra-bt-anim-easing, ease-out) var(--lyra-bt-anim-delay, 0ms) forwards;
}

/* ── Keyframes ───────────────────────────────────────────────────────── */
@keyframes lyra-bt-adv-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes lyra-bt-adv-slide-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0);    }
}
@keyframes lyra-bt-adv-slide-from-left {
    from { opacity: 0; transform: translateX(-48px); }
    to   { opacity: 1; transform: translateX(0);     }
}
@keyframes lyra-bt-adv-slide-from-right {
    from { opacity: 0; transform: translateX(48px); }
    to   { opacity: 1; transform: translateX(0);    }
}
@keyframes lyra-bt-adv-zoom-in {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1);    }
}
@keyframes lyra-bt-adv-blur-in {
    from { opacity: 0; filter: blur(8px); }
    to   { opacity: 1; filter: blur(0);   }
}

/* ── Word-by-word animation ──────────────────────────────────────────── */
/* JS wraps each word in a <span class="lyra-bt-adv-text__word"> with a
   `--lyra-bt-word-index` custom property (0, 1, 2, …) and sets `--lyra-bt-stagger`
   on the block. Each word's animation-delay = base delay + word_index *
   stagger. */

.lyra-bt-adv-text--anim-word-by-word .lyra-bt-adv-text__word {
    display: inline-block;
    opacity: 0;
}
.lyra-bt-adv-text--anim-word-by-word.is-visible .lyra-bt-adv-text__word {
    animation: lyra-bt-adv-word-fade-in var(--lyra-bt-anim-duration, 600ms) var(--lyra-bt-anim-easing, ease-out) forwards;
    animation-delay: calc(var(--lyra-bt-anim-delay, 0ms) + var(--lyra-bt-word-index, 0) * var(--lyra-bt-stagger, 50ms));
}
@keyframes lyra-bt-adv-word-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* ── Reduced-motion fallback ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .lyra-bt-adv-text--has-anim,
    .lyra-bt-adv-text--has-anim.is-visible,
    .lyra-bt-adv-text--anim-word-by-word .lyra-bt-adv-text__word,
    .lyra-bt-adv-text--anim-word-by-word.is-visible .lyra-bt-adv-text__word {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}