/**
 * msh-view-transitions.css — Smooth page transitions
 *
 * Uses the View Transitions API where supported.
 * Falls back to no animation gracefully.
 *
 * Transition strategy per element type:
 * - Header: stays fixed (no transition = no flicker)
 * - Main content: fade-up slide
 * - Images/cards: cross-fade
 * - Calc results KPIs: counter-like zoom
 */

/* ── Enable same-origin view transitions ── */
@view-transition {
    navigation: auto;
}

/* ── Shared element names for smooth morphing ── */
.site-header {
    view-transition-name: site-header;
}

.site-footer {
    view-transition-name: site-footer;
}

/* Calc KPI values get a special morph transition */
#kpi-monthly { view-transition-name: kpi-monthly; }
#kpi-interest { view-transition-name: kpi-interest; }
#kpi-total { view-transition-name: kpi-total; }

/* Brand logo stays put */
.brand {
    view-transition-name: site-brand;
}

/* ── Default page enter animation ── */
::view-transition-new(root) {
    animation: msh-page-enter 0.32s cubic-bezier(0.22, 0.9, 0.36, 1) both;
}

::view-transition-old(root) {
    animation: msh-page-exit 0.22s cubic-bezier(0.4, 0, 1, 1) both;
}

@keyframes msh-page-enter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes msh-page-exit {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-4px);
    }
}

/* ── Header: no transition (it's sticky, no movement needed) ── */
::view-transition-old(site-header),
::view-transition-new(site-header) {
    animation: none;
    mix-blend-mode: normal;
}

/* ── Brand: no transition (instant, feels anchored) ── */
::view-transition-old(site-brand),
::view-transition-new(site-brand) {
    animation: none;
}

/* ── Footer: simple fade ── */
::view-transition-old(site-footer) {
    animation: msh-fade-out 0.18s ease both;
}
::view-transition-new(site-footer) {
    animation: msh-fade-in 0.28s ease 0.1s both;
}

/* ── KPI values: zoom + fade (feels like a counter update) ── */
::view-transition-old(kpi-monthly),
::view-transition-old(kpi-interest),
::view-transition-old(kpi-total) {
    animation: msh-kpi-out 0.18s ease both;
}
::view-transition-new(kpi-monthly),
::view-transition-new(kpi-interest),
::view-transition-new(kpi-total) {
    animation: msh-kpi-in 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes msh-kpi-in {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes msh-kpi-out {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.9); }
}

@keyframes msh-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes msh-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* ── Respect reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root),
    ::view-transition-old(site-footer),
    ::view-transition-new(site-footer),
    ::view-transition-old(kpi-monthly),
    ::view-transition-new(kpi-monthly),
    ::view-transition-old(kpi-interest),
    ::view-transition-new(kpi-interest),
    ::view-transition-old(kpi-total),
    ::view-transition-new(kpi-total) {
        animation-duration: 0.01ms !important;
    }
}