/* ═══════════════════════════════════════════════════════════════════════
   Lyra Heading with Stepwise — frontend styles

   Per-instance scoped rules (typography, prefix styling, gradient,
   highlight, accent, box) are emitted inline by build_style_tag().
   The global rules below cover:
     - Outer block-alignment wrapper
     - Layout primitives (eyebrow / prefix / heading / subhead arrangements)
     - Highlight wrapper baseline
     - Animation initial states + keyframes
     - Token (word/char) animations
     - Accent bar draw-in animation
     - prefers-reduced-motion fallback

   Per-instance CSS variables driving animation:
     --lyra-bt-anim-duration  --lyra-bt-anim-delay  --lyra-bt-anim-easing  --lyra-bt-stagger
   ═══════════════════════════════════════════════════════════════════════ */

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

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

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

.lyra-bt-hs--align-left   { text-align: left;   }
.lyra-bt-hs--align-center { text-align: center; }
.lyra-bt-hs--align-right  { text-align: right;  }

/* ── Heading element baseline ────────────────────────────────────────── */
.lyra-bt-hs__heading {
    /* Per-instance typography emitted inline. */
}

/* ── Prefix wrapper ──────────────────────────────────────────────────── */
.lyra-bt-hs__prefix {
    display: inline-block;
    /* When background-shape is enabled, additional rules are emitted
       inline (.lyra-bt-hs--prefix-bg .lyra-bt-hs__prefix { … }) so the wrapper
       becomes the shape container. */
}

/* The text inside the prefix wrapper — receives the typography, color,
   stroke, gradient, etc. emitted per-instance. */
.lyra-bt-hs__prefix-text {
    display: inline-block;
}

/* ── Inline-before layout ────────────────────────────────────────────── */
/* Per-instance rules set display:inline-flex on .lyra-bt-hs__heading-row
   for the inline_before position. The flex container handles the
   prefix-and-heading arrangement; we just provide the empty hook here
   for non-inline modes. */

/* ── Above-heading layout ────────────────────────────────────────────── */
.lyra-bt-hs--prefix-pos-above-heading .lyra-bt-hs__prefix {
    display: inline-block;
}

/* ── Left-gutter layout ──────────────────────────────────────────────── */
/* Per-instance: display:flex on .lyra-bt-hs__gutter-row plus column flex
   ratios on its children. Mobile responsive — collapse to stack. */
@media (max-width: 640px) {
    .lyra-bt-hs--prefix-pos-left-gutter .lyra-bt-hs__gutter-row {
        flex-direction: column;
        gap: 12px !important;
    }
}

/* ── Highlight wrapper (heading) ─────────────────────────────────────── */
.lyra-bt-hs__hl {
    display: inline;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* ── Accent bar baseline ─────────────────────────────────────────────── */
.lyra-bt-hs__accent {
    display: inline-block;
    transform-origin: left center;
}
.lyra-bt-hs__accent--above-heading,
.lyra-bt-hs__accent--below-heading {
    display: block;
}

/* Draw-in animation */
.lyra-bt-hs__accent--animate {
    transform: scaleX(0);
}
.lyra-bt-hs.is-visible .lyra-bt-hs__accent--animate {
    animation: lyra-bt-hs-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-hs-bar-draw {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* ── Block-level animations (non-token) ──────────────────────────────── */
.lyra-bt-hs--has-anim:not(.lyra-bt-hs--anim-word-by-word):not(.lyra-bt-hs--anim-char-by-char) {
    opacity: 0;
}
.lyra-bt-hs--anim-fade-in.is-visible {
    animation: lyra-bt-hs-fade-in var(--lyra-bt-anim-duration, 600ms) var(--lyra-bt-anim-easing, ease-out) var(--lyra-bt-anim-delay, 0ms) forwards;
}
.lyra-bt-hs--anim-slide-up.is-visible {
    animation: lyra-bt-hs-slide-up var(--lyra-bt-anim-duration, 600ms) var(--lyra-bt-anim-easing, ease-out) var(--lyra-bt-anim-delay, 0ms) forwards;
}
.lyra-bt-hs--anim-slide-from-left.is-visible {
    animation: lyra-bt-hs-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-hs--anim-slide-from-right.is-visible {
    animation: lyra-bt-hs-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-hs--anim-zoom-in.is-visible {
    animation: lyra-bt-hs-zoom-in var(--lyra-bt-anim-duration, 600ms) var(--lyra-bt-anim-easing, ease-out) var(--lyra-bt-anim-delay, 0ms) forwards;
}
.lyra-bt-hs--anim-blur-in.is-visible {
    animation: lyra-bt-hs-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-hs-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes lyra-bt-hs-slide-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0);    }
}
@keyframes lyra-bt-hs-slide-from-left {
    from { opacity: 0; transform: translateX(-48px); }
    to   { opacity: 1; transform: translateX(0);     }
}
@keyframes lyra-bt-hs-slide-from-right {
    from { opacity: 0; transform: translateX(48px); }
    to   { opacity: 1; transform: translateX(0);    }
}
@keyframes lyra-bt-hs-zoom-in {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1);    }
}
@keyframes lyra-bt-hs-blur-in {
    from { opacity: 0; filter: blur(8px); }
    to   { opacity: 1; filter: blur(0);   }
}

/* ── Token (word/char) animations ────────────────────────────────────── */
/* For word_by_word / char_by_char: prefix, eyebrow, subhead get a simple
   sync fade so they appear alongside the first token of the heading. */
.lyra-bt-hs--anim-word-by-word .lyra-bt-hs__prefix,
.lyra-bt-hs--anim-word-by-word .lyra-bt-hs__eyebrow,
.lyra-bt-hs--anim-word-by-word .lyra-bt-hs__subhead,
.lyra-bt-hs--anim-char-by-char .lyra-bt-hs__prefix,
.lyra-bt-hs--anim-char-by-char .lyra-bt-hs__eyebrow,
.lyra-bt-hs--anim-char-by-char .lyra-bt-hs__subhead {
    opacity: 0;
}
.lyra-bt-hs--anim-word-by-word.is-visible .lyra-bt-hs__prefix,
.lyra-bt-hs--anim-word-by-word.is-visible .lyra-bt-hs__eyebrow,
.lyra-bt-hs--anim-word-by-word.is-visible .lyra-bt-hs__subhead,
.lyra-bt-hs--anim-char-by-char.is-visible .lyra-bt-hs__prefix,
.lyra-bt-hs--anim-char-by-char.is-visible .lyra-bt-hs__eyebrow,
.lyra-bt-hs--anim-char-by-char.is-visible .lyra-bt-hs__subhead {
    animation: lyra-bt-hs-fade-in var(--lyra-bt-anim-duration, 600ms) var(--lyra-bt-anim-easing, ease-out) var(--lyra-bt-anim-delay, 0ms) forwards;
}

.lyra-bt-hs__token {
    display: inline-block;
    opacity: 0;
}
.lyra-bt-hs--anim-word-by-word.is-visible .lyra-bt-hs__token,
.lyra-bt-hs--anim-char-by-char.is-visible .lyra-bt-hs__token {
    animation: lyra-bt-hs-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-hs-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-hs--has-anim,
    .lyra-bt-hs--has-anim.is-visible,
    .lyra-bt-hs__token,
    .lyra-bt-hs__accent--animate,
    .lyra-bt-hs--anim-word-by-word.is-visible .lyra-bt-hs__prefix,
    .lyra-bt-hs--anim-word-by-word.is-visible .lyra-bt-hs__eyebrow,
    .lyra-bt-hs--anim-word-by-word.is-visible .lyra-bt-hs__subhead,
    .lyra-bt-hs--anim-char-by-char.is-visible .lyra-bt-hs__prefix,
    .lyra-bt-hs--anim-char-by-char.is-visible .lyra-bt-hs__eyebrow,
    .lyra-bt-hs--anim-char-by-char.is-visible .lyra-bt-hs__subhead {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}