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

   Per-instance scoped rules (typography, eyebrow/subhead styling,
   highlight colors, gradient fill, accent bar geometry, box) are emitted
   inline by build_style_tag(). The global rules below cover:
     - Outer block-alignment wrapper
     - Layout primitives (eyebrow / heading / subhead vertical stack;
       inline accent bar layout)
     - Animation initial states + keyframes for all 7 block-level types
     - Word/character token states (for word-by-word / char-by-char)
     - Highlight-style baseline structure
     - Accent bar draw-in animation
     - prefers-reduced-motion fallback

   Per-instance CSS variables driving 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 / char_by_char only — e.g. 30ms)
   ═══════════════════════════════════════════════════════════════════════ */

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

/* ── Box ──────────────────────────────────────────────────────────────── */
.lyra-bt-ah {
    box-sizing: border-box;
    /* Per-instance bg / border / padding / max-width emitted inline. */
}

.lyra-bt-ah--empty {
    padding: 14px 18px;
    border: 1px dashed #cbd5e1;
    background: #f8fafc;
    color: #64748b;
    border-radius: 6px;
}

/* ── Text alignment ──────────────────────────────────────────────────── */
.lyra-bt-ah--align-left   { text-align: left;   }
.lyra-bt-ah--align-center { text-align: center; }
.lyra-bt-ah--align-right  { text-align: right;  }

/* ── Heading element baseline ────────────────────────────────────────── */
.lyra-bt-ah__heading {
    /* All typography (font-size, line-height, letter-spacing, weight,
       transform, color) emitted inline per instance. We just zero the
       browser default margin so spacing is fully under our control. */
}

/* ── Eyebrow / subhead ───────────────────────────────────────────────── */
.lyra-bt-ah__eyebrow,
.lyra-bt-ah__subhead {
    /* Per-instance color, size, weight, transform emitted inline. */
}

/* ── Heading row (for inline accent bar layouts) ─────────────────────── */
.lyra-bt-ah__heading-row { display: block; }
.lyra-bt-ah__heading-row--inline {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
}
/* When the block alignment is center/right, the inline-flex above still
   needs its alignment driven by the parent. The text-align rule on
   .lyra-bt-ah--align-* handles the inline-flex behaving like an inline-block. */
.lyra-bt-ah--align-center .lyra-bt-ah__heading-row--inline,
.lyra-bt-ah--align-right  .lyra-bt-ah__heading-row--inline {
    /* Default inline-flex flows naturally with text-align of the parent. */
}

/* ── Highlight wrapper ───────────────────────────────────────────────── */
.lyra-bt-ah__hl {
    display: inline;
    /* Per-instance bg/border/padding emitted inline by style. */
    /* Use box-decoration-break so the highlight wraps cleanly across lines. */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.lyra-bt-ah__hl-inner {
    /* Inner span — used to restore solid color when gradient text fill is on
       (otherwise the inner text would be transparent against the highlight
       background). Gets its own per-instance rule when gradient is enabled. */
}

/* ── Accent bar baseline ─────────────────────────────────────────────── */
.lyra-bt-ah__accent {
    display: inline-block;
    /* Per-instance width/height/color/radius emitted inline. */
    transform-origin: left center;
}
/* Above/below variants are block-level for the row layout. */
.lyra-bt-ah__accent--above-heading,
.lyra-bt-ah__accent--below-heading {
    display: block;
}
/* Inline variants (left/right of heading) — flex container handles layout;
   no special rule beyond display:inline-block on the bar. */

/* Draw-in animation for the accent bar — opt-in via .lyra-bt-ah__accent--animate. */
.lyra-bt-ah__accent--animate {
    transform: scaleX(0);
}
.lyra-bt-ah.is-visible .lyra-bt-ah__accent--animate {
    animation: lyra-bt-ah-bar-draw var(--lyra-bt-anim-duration, 600ms) var(--lyra-bt-anim-easing, ease-out) calc(var(--lyra-bt-anim-delay, 0ms) + 100ms) forwards;
}
@keyframes lyra-bt-ah-bar-draw {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* ── Block-level animations (non-token) ──────────────────────────────── */
/* The whole .lyra-bt-ah animates as one unit for fade/slide/zoom/blur types.
   For word_by_word and char_by_char, the BLOCK doesn't animate — only
   the per-token spans inside the heading do. */
.lyra-bt-ah--has-anim:not(.lyra-bt-ah--anim-word-by-word):not(.lyra-bt-ah--anim-char-by-char) {
    opacity: 0;
}

.lyra-bt-ah--anim-fade-in.is-visible {
    animation: lyra-bt-ah-fade-in var(--lyra-bt-anim-duration, 600ms) var(--lyra-bt-anim-easing, ease-out) var(--lyra-bt-anim-delay, 0ms) forwards;
}
.lyra-bt-ah--anim-slide-up.is-visible {
    animation: lyra-bt-ah-slide-up var(--lyra-bt-anim-duration, 600ms) var(--lyra-bt-anim-easing, ease-out) var(--lyra-bt-anim-delay, 0ms) forwards;
}
.lyra-bt-ah--anim-slide-from-left.is-visible {
    animation: lyra-bt-ah-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-ah--anim-slide-from-right.is-visible {
    animation: lyra-bt-ah-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-ah--anim-zoom-in.is-visible {
    animation: lyra-bt-ah-zoom-in var(--lyra-bt-anim-duration, 600ms) var(--lyra-bt-anim-easing, ease-out) var(--lyra-bt-anim-delay, 0ms) forwards;
}
.lyra-bt-ah--anim-blur-in.is-visible {
    animation: lyra-bt-ah-blur-in var(--lyra-bt-anim-duration, 600ms) var(--lyra-bt-anim-easing, ease-out) var(--lyra-bt-anim-delay, 0ms) forwards;
}

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

/* ── Token (word/char) animations ────────────────────────────────────── */
/* Eyebrow + subhead get a simple gentle fade so they sync with the
   first token. Heading tokens get the staggered fade. */

.lyra-bt-ah--anim-word-by-word .lyra-bt-ah__eyebrow,
.lyra-bt-ah--anim-word-by-word .lyra-bt-ah__subhead,
.lyra-bt-ah--anim-char-by-char .lyra-bt-ah__eyebrow,
.lyra-bt-ah--anim-char-by-char .lyra-bt-ah__subhead {
    opacity: 0;
}
.lyra-bt-ah--anim-word-by-word.is-visible .lyra-bt-ah__eyebrow,
.lyra-bt-ah--anim-word-by-word.is-visible .lyra-bt-ah__subhead,
.lyra-bt-ah--anim-char-by-char.is-visible .lyra-bt-ah__eyebrow,
.lyra-bt-ah--anim-char-by-char.is-visible .lyra-bt-ah__subhead {
    animation: lyra-bt-ah-fade-in var(--lyra-bt-anim-duration, 600ms) var(--lyra-bt-anim-easing, ease-out) var(--lyra-bt-anim-delay, 0ms) forwards;
}

.lyra-bt-ah__token {
    display: inline-block;
    opacity: 0;
}
.lyra-bt-ah--anim-word-by-word.is-visible .lyra-bt-ah__token,
.lyra-bt-ah--anim-char-by-char.is-visible .lyra-bt-ah__token {
    animation: lyra-bt-ah-token-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-token-index, 0) * var(--lyra-bt-stagger, 30ms));
}
@keyframes lyra-bt-ah-token-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* ── Reduced-motion fallback ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .lyra-bt-ah--has-anim,
    .lyra-bt-ah--has-anim.is-visible,
    .lyra-bt-ah__token,
    .lyra-bt-ah__accent--animate,
    .lyra-bt-ah--anim-word-by-word.is-visible .lyra-bt-ah__eyebrow,
    .lyra-bt-ah--anim-word-by-word.is-visible .lyra-bt-ah__subhead,
    .lyra-bt-ah--anim-char-by-char.is-visible .lyra-bt-ah__eyebrow,
    .lyra-bt-ah--anim-char-by-char.is-visible .lyra-bt-ah__subhead {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}