/* ============================================
   Text Dissolve Reveal Component
   Paired with: js/components/text-dissolve-reveal.js

   Per-char blur + scale + opacity reveal, staggered.
   Inspired by Vue's Clarity title transition.
   ============================================ */

.text-dissolve {
    /* Per-element overrides possible via data-stagger / data-delay */
    --dissolve-stagger: 0.0375s;
    --dissolve-delay: 0.3s;
    --dissolve-duration: 0.6s;
    --dissolve-ease: cubic-bezier(.35, .35, 0, 1); /* Beinc --f-cubic */
}

.text-dissolve .char {
    display: inline-block;
    opacity: 0;
    scale: 1.5;
    filter: blur(0.15em);
    transition:
        opacity var(--dissolve-duration) var(--dissolve-ease),
        scale var(--dissolve-duration) var(--dissolve-ease),
        filter var(--dissolve-duration) var(--dissolve-ease);
    transition-delay: calc(var(--char-index) * var(--dissolve-stagger));
    will-change: opacity, transform, filter;
}

.text-dissolve .char--space {
    /* Spaces still participate in stagger but don't need transform */
    width: 0.25em;
}

.text-dissolve.is-inview .char {
    opacity: 1;
    scale: 1;
    filter: blur(0);
    transition-delay: calc(
        var(--char-index) * var(--dissolve-stagger) + var(--dissolve-delay)
    );
}

/* Reduced motion: skip animation, show text immediately */
@media (prefers-reduced-motion: reduce) {
    .text-dissolve .char {
        transition: none;
        opacity: 1;
        scale: 1;
        filter: none;
    }
}