/* =========================================
   SHARED ANIMATION SYSTEM
   Single source of truth for all open/close
   transitions across the site.
   ========================================= */

:root {
    --anim-duration: 300ms;
    --anim-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Slide Right (Hamburger Drawer) --- */
.anim-slide-right {
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    /* On close: slide out first, THEN hide visibility after the transform finishes */
    transition: transform var(--anim-duration) var(--anim-easing),
                visibility 0s linear var(--anim-duration);
}

.anim-slide-right.is-open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    /* On open: visibility flips immediately (no delay), slide runs normally */
    transition: transform var(--anim-duration) var(--anim-easing),
                visibility 0s linear 0s;
}

/* --- Fade Down (Menu items, card expand, sub-items) --- */
.anim-fade-down {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--anim-duration) var(--anim-easing),
                transform var(--anim-duration) var(--anim-easing);
}

.anim-fade-down.is-open {
    opacity: 1;
    transform: translateY(0);
}

/* --- Fade Up (Card text wrapper — fades in upward) --- */
.anim-fade-up {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--anim-duration) var(--anim-easing),
                transform var(--anim-duration) var(--anim-easing);
}

.anim-fade-up.is-open {
    opacity: 1;
    transform: translateY(0);
}

/* --- Rotate indicator (accordion arrow/toggle) --- */
.anim-rotate {
    transition: transform var(--anim-duration) var(--anim-easing);
}

.anim-rotate.is-open {
    transform: rotate(180deg);
}

/* --- Collapse/Expand height (sub-lists, content wrappers) --- */
.anim-collapse {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height var(--anim-duration) var(--anim-easing),
                opacity var(--anim-duration) var(--anim-easing),
                padding var(--anim-duration) var(--anim-easing);
}

.anim-collapse.is-open {
    max-height: 500px;
    opacity: 1;
}

/* --- Desktop menu row enter/exit --- */
.anim-menu-row {
    max-height: 100px;
    opacity: 1;
    transform: translateY(0);
    transition: max-height var(--anim-duration) var(--anim-easing),
                opacity var(--anim-duration) var(--anim-easing),
                padding var(--anim-duration) var(--anim-easing),
                margin var(--anim-duration) var(--anim-easing),
                transform var(--anim-duration) var(--anim-easing);
}

.anim-menu-row.entering,
.anim-menu-row.exiting {
    max-height: 0;
    opacity: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transform: translateY(-8px);
    overflow: hidden;
}

/* --- Desktop menu content wrapper collapse --- */
.anim-menu-wrapper {
    transition: max-height var(--anim-duration) var(--anim-easing),
                opacity var(--anim-duration) var(--anim-easing);
    max-height: 500px;
    opacity: 1;
}

.anim-menu-wrapper.is-collapsed {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
}

/* --- Reduced motion support --- */
@media (prefers-reduced-motion: reduce) {
    :root {
        --anim-duration: 0ms;
    }
}