/* ============================================================
   Hero visuals: shared base for small decorative, animated hero
   cards (aria-hidden). Used by every [data-hero-anim] element,
   driven by assets/js/hero-anim.js. The static default is the
   final state (no JS, reduced motion). JS adds .is-armed (hidden
   start) and then .is-playing (one-shot run).
   Building blocks: .hva (wrapper), .hva__card (white card),
   .hva-in (fades up), .hva-pop (pops in), .hva-grow (grows from
   the left), .hva-draw (SVG path draws itself, needs
   pathLength="1"), .hva-d1 to .hva-d8 (staggered start).
   ============================================================ */
.hva { position: relative; width: 100%; max-width: 380px; margin-inline: auto; padding-bottom: var(--space-xl); }
.hva__card {
    display: grid; gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--surface-0); color: var(--ink-900);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    text-align: left;
}
.hva__row { display: flex; align-items: center; gap: var(--space-sm); }
.hva__label { flex: 1 1 auto; min-width: 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; line-height: 1.3; }
.hva__badge {
    position: absolute; right: calc(-1 * var(--space-sm)); bottom: 0;
    display: inline-flex; align-items: center; gap: var(--space-2xs);
    padding: var(--space-xs) var(--space-md);
    background: var(--blue-700); color: #fff; border: 1px solid var(--cyan-300); border-radius: var(--radius-full);
    font-size: var(--text-sm); font-weight: 600; white-space: nowrap;
    box-shadow: var(--shadow-md);
}
@media (max-width: 420px) {
    .hva__badge { right: 0; }
}

[data-hero-anim].is-armed .hva-in,
[data-hero-anim].is-armed .hva-pop { opacity: 0; }
[data-hero-anim].is-armed .hva-grow { transform: scaleX(0); }
.hva-draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
[data-hero-anim].is-armed .hva-draw { stroke-dashoffset: 1; }
[data-hero-anim].is-playing .hva-in { animation: hva-in .5s ease-out both; }
[data-hero-anim].is-playing .hva-pop { animation: hva-pop .45s cubic-bezier(.3, 1.6, .5, 1) both; }
[data-hero-anim].is-playing .hva-grow { animation: hva-grow .8s ease-out both; }
[data-hero-anim].is-playing .hva-draw { animation: hva-draw .8s ease-in-out both; }
[data-hero-anim].is-armed .hva-mark { background-size: 0 100%; }
[data-hero-anim].is-playing .hva-mark { animation: hva-mark .5s ease-out both; }
[data-hero-anim].is-playing .hva-press { animation: hva-press .5s ease-in-out both; }
[data-hero-anim].is-playing .hva-d1 { animation-delay: .3s; }
[data-hero-anim].is-playing .hva-d2 { animation-delay: .7s; }
[data-hero-anim].is-playing .hva-d3 { animation-delay: 1.1s; }
[data-hero-anim].is-playing .hva-d4 { animation-delay: 1.5s; }
[data-hero-anim].is-playing .hva-d5 { animation-delay: 1.9s; }
[data-hero-anim].is-playing .hva-d6 { animation-delay: 2.3s; }
[data-hero-anim].is-playing .hva-d7 { animation-delay: 2.7s; }
[data-hero-anim].is-playing .hva-d8 { animation-delay: 3.1s; }
@keyframes hva-in {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}
@keyframes hva-pop {
    from { opacity: 0; transform: scale(.4); }
    to { opacity: 1; transform: none; }
}
@keyframes hva-mark {
    from { background-size: 0 100%; }
    to { background-size: 100% 100%; }
}
@keyframes hva-press {
    0% { transform: none; }
    45% { transform: scale(.92); }
    100% { transform: none; }
}
@keyframes hva-draw {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
}
@keyframes hva-grow {
    from { transform: scaleX(0); }
    to { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    [data-hero-anim] .hva-in, [data-hero-anim] .hva-pop, [data-hero-anim] .hva-grow { opacity: 1; transform: none; animation: none; }
    [data-hero-anim] .hva-mark { background-size: 100% 100%; animation: none; }
    [data-hero-anim] .hva-press { animation: none; }
    [data-hero-anim] .hva-draw { stroke-dashoffset: 0; animation: none; }
}