/* ──────────────────────────────────────────────────────────────────────
 * MHA Properties — Page Transitions & Micro-Animations
 *
 * The page "forms" in chunks: the header drops in, then each major
 * content section fades up in sequence with a slight delay between
 * them, and finally list items / cards within each section cascade
 * in with per-item stagger. The effect is a page that assembles
 * itself piece by piece rather than appearing all at once.
 *
 * Layers:
 *   1. Chunked entrance — sections animate in with staggered delays
 *   2. Page exit        — quick fade-out before navigation
 *   3. Scroll reveals   — below-fold content animates on scroll
 *   4. Progress bar     — thin indigo bar during navigation
 *   5. Micro-interactions — hover lifts, press effects
 * ──────────────────────────────────────────────────────────────────────*/

/* ── 1. Chunked entrance ────────────────────────────────────────────── */

/* Cross-document view transitions (Chrome/Edge 126+). */
@view-transition {
    navigation: auto;
}
::view-transition-old(root) {
    animation: mha-vt-out .2s ease-in both;
}
::view-transition-new(root) {
    animation: mha-vt-in .35s ease-out both;
}
@keyframes mha-vt-out {
    to { opacity: 0; transform: translateY(-8px); }
}
@keyframes mha-vt-in {
    from { opacity: 0; transform: translateY(12px); }
}

/* Each chunk starts invisible and slides up. The JS assigns a
   --chunk-delay custom property (0, 1, 2…) that drives the delay.
   This keeps the CSS generic while the JS decides what's a chunk. */
.mha-chunk {
    opacity: 0;
    transform: translateY(22px);
    animation: mha-chunk-in .5s cubic-bezier(.22,.61,.36,1) both;
    animation-delay: calc(var(--chunk-delay, 0) * 0.09s + 0.05s);
}

@keyframes mha-chunk-in {
    from {
        opacity: 0;
        transform: translateY(22px);
        filter: blur(2px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* Children inside a chunk that has [data-chunk-stagger] get per-item
   cascade on top of the chunk's own entrance delay. */
[data-chunk-stagger] > * {
    opacity: 0;
    transform: translateY(10px);
    animation: mha-chunk-child-in .4s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes mha-chunk-child-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
[data-chunk-stagger] > *:nth-child(1)  { animation-delay: calc(var(--chunk-delay, 0) * 0.09s + 0.12s); }
[data-chunk-stagger] > *:nth-child(2)  { animation-delay: calc(var(--chunk-delay, 0) * 0.09s + 0.17s); }
[data-chunk-stagger] > *:nth-child(3)  { animation-delay: calc(var(--chunk-delay, 0) * 0.09s + 0.22s); }
[data-chunk-stagger] > *:nth-child(4)  { animation-delay: calc(var(--chunk-delay, 0) * 0.09s + 0.27s); }
[data-chunk-stagger] > *:nth-child(5)  { animation-delay: calc(var(--chunk-delay, 0) * 0.09s + 0.32s); }
[data-chunk-stagger] > *:nth-child(6)  { animation-delay: calc(var(--chunk-delay, 0) * 0.09s + 0.37s); }
[data-chunk-stagger] > *:nth-child(7)  { animation-delay: calc(var(--chunk-delay, 0) * 0.09s + 0.42s); }
[data-chunk-stagger] > *:nth-child(8)  { animation-delay: calc(var(--chunk-delay, 0) * 0.09s + 0.47s); }
[data-chunk-stagger] > *:nth-child(n+9){ animation-delay: calc(var(--chunk-delay, 0) * 0.09s + 0.50s); }

/* ── 2. Page exit ───────────────────────────────────────────────────── */

.mha-page-exiting {
    animation: mha-page-exit .18s ease-in both;
    pointer-events: none;
}
@keyframes mha-page-exit {
    to { opacity: 0; transform: translateY(-8px) scale(.998); }
}

/* ── 3. Scroll reveal (below-fold content) ──────────────────────────── */

.mha-reveal,
[data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .45s cubic-bezier(.22,.61,.36,1),
                transform .45s cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
}
.mha-reveal.is-visible,
[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

[data-reveal-stagger] > * {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .4s cubic-bezier(.22,.61,.36,1),
                transform .4s cubic-bezier(.22,.61,.36,1);
}
[data-reveal-stagger].is-visible > *:nth-child(1)  { transition-delay: .04s; }
[data-reveal-stagger].is-visible > *:nth-child(2)  { transition-delay: .08s; }
[data-reveal-stagger].is-visible > *:nth-child(3)  { transition-delay: .12s; }
[data-reveal-stagger].is-visible > *:nth-child(4)  { transition-delay: .16s; }
[data-reveal-stagger].is-visible > *:nth-child(5)  { transition-delay: .20s; }
[data-reveal-stagger].is-visible > *:nth-child(6)  { transition-delay: .24s; }
[data-reveal-stagger].is-visible > *:nth-child(7)  { transition-delay: .28s; }
[data-reveal-stagger].is-visible > *:nth-child(8)  { transition-delay: .32s; }
[data-reveal-stagger].is-visible > *:nth-child(n+9){ transition-delay: .36s; }
[data-reveal-stagger].is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* ── 4. Navigation progress bar ─────────────────────────────────────── */

#mha-nav-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, #6366f1, #818cf8);
    z-index: 1000000;
    transition: width .4s cubic-bezier(.22,.61,.36,1);
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 8px rgba(99,102,241,.4);
    pointer-events: none;
}
#mha-nav-progress.is-loading { width: 70%; }
#mha-nav-progress.is-done    { width: 100%; transition: width .15s ease-out; }

/* ── 5. Micro-interactions ──────────────────────────────────────────── */

.mha-al__card,
.mha-al__row,
.mhav-list__row,
.mmt-record,
.irm-card {
    transition: transform .2s ease, box-shadow .2s ease;
}
.mha-al__card:hover,
.mhav-list__row:hover,
.mmt-record:hover,
.irm-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(15,32,68,.08);
}

.mha-nav__megamenu-item,
.mmt-btn,
.irm-btn,
.mhav-btn {
    transition: transform .1s ease, box-shadow .15s ease, background .15s ease;
}
.mmt-btn:active,
.irm-btn:active,
.mhav-btn:active {
    transform: scale(.97);
}

/* ── 6. Reduced motion ──────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .mha-chunk {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
    [data-chunk-stagger] > * {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
    .mha-reveal, [data-reveal], [data-reveal-stagger] > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .mha-page-exiting { animation: none !important; }
}