/* =============================================================================
   Bina Rafeeq — global motion & transitions (load after theme tokens)
   Subtle, transform/opacity-first. Respects prefers-reduced-motion.
   ============================================================================= */

:root {
    --br-motion-duration: 0.28s;
    --br-motion-duration-fast: 0.18s;
    --br-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --br-motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- View Transitions API (Chrome 111+, Safari 18+) ---- */
@supports (view-transition-name: none) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 260ms;
        animation-timing-function: var(--br-motion-ease);
    }

    ::view-transition-old(root) {
        animation-name: br-vt-fade-out;
    }

    ::view-transition-new(root) {
        animation-name: br-vt-fade-in;
    }
}

@keyframes br-vt-fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes br-vt-fade-in {
    from {
        opacity: 0.85;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---- Fallback: first paint of route content when View Transitions are unavailable ---- */
@supports not (view-transition-name: none) {
    @media (prefers-reduced-motion: no-preference) {
        #app:not(.auth-page) > *:first-child {
            animation: br-content-enter var(--br-motion-duration) var(--br-motion-ease) both;
        }
    }
}

@keyframes br-content-enter {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---- Staggered lists (browse, messages, etc.) ---- */
@media (prefers-reduced-motion: no-preference) {
    .br-stagger-in > * {
        animation: br-stagger-item 0.34s var(--br-motion-ease) both;
    }

    .br-stagger-in > *:nth-child(1) {
        animation-delay: 0ms;
    }
    .br-stagger-in > *:nth-child(2) {
        animation-delay: 36ms;
    }
    .br-stagger-in > *:nth-child(3) {
        animation-delay: 72ms;
    }
    .br-stagger-in > *:nth-child(4) {
        animation-delay: 108ms;
    }
    .br-stagger-in > *:nth-child(5) {
        animation-delay: 144ms;
    }
    .br-stagger-in > *:nth-child(6) {
        animation-delay: 180ms;
    }
    .br-stagger-in > *:nth-child(7) {
        animation-delay: 216ms;
    }
    .br-stagger-in > *:nth-child(8) {
        animation-delay: 252ms;
    }
    .br-stagger-in > *:nth-child(n + 9) {
        animation-delay: 280ms;
    }
}

@keyframes br-stagger-item {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---- List item delete / remove ---- */
.br-list-item-exit {
    transition:
        opacity var(--br-motion-duration) var(--br-motion-ease),
        transform var(--br-motion-duration) var(--br-motion-ease);
    transform-origin: center top;
}

.br-list-item-exit.is-exiting {
    opacity: 0;
    transform: scale(0.985) translateY(6px);
}

/* ---- Modals (used with .br-motion-overlay on .modal-overlay) ---- */
.modal-overlay.br-motion-overlay {
    animation: none;
    opacity: 0;
    transition: opacity var(--br-motion-duration-fast) var(--br-motion-ease-out);
}

.modal-overlay.br-motion-overlay .modal {
    animation: none;
}

.modal-overlay.br-motion-overlay.br-motion-overlay--visible {
    opacity: 1;
}

.modal-overlay.br-motion-overlay .modal {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    transition:
        opacity var(--br-motion-duration) var(--br-motion-ease),
        transform var(--br-motion-duration) var(--br-motion-ease);
}

.modal-overlay.br-motion-overlay.br-motion-overlay--visible .modal {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.modal-overlay.br-motion-overlay.br-motion-overlay--leave {
    opacity: 0;
    pointer-events: none;
}

.modal-overlay.br-motion-overlay.br-motion-overlay--leave .modal {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
}

@media (min-width: 769px) {
    .modal-overlay.br-motion-overlay:not(.br-motion-overlay--leave) .modal {
        transform: translateY(8px) scale(0.98);
    }

    .modal-overlay.br-motion-overlay.br-motion-overlay--visible .modal {
        transform: translateY(0) scale(1);
    }
}

/* ---- Drawers ---- */
.drawer-overlay.br-motion-drawer-overlay {
    animation: none;
    opacity: 0;
    transition: opacity var(--br-motion-duration-fast) var(--br-motion-ease-out);
}

.drawer-overlay.br-motion-drawer-overlay.br-motion-drawer-overlay--visible {
    opacity: 1;
}

.drawer-overlay.br-motion-drawer-overlay .drawer {
    animation: none;
    transform: translateX(100%);
    transition: transform var(--br-motion-duration) var(--br-motion-ease);
}

[dir='rtl'] .drawer-overlay.br-motion-drawer-overlay .drawer {
    transform: translateX(-100%);
}

.drawer-overlay.br-motion-drawer-overlay.br-motion-drawer-overlay--visible .drawer {
    transform: translateX(0);
}

.drawer-overlay.br-motion-drawer-overlay.br-motion-drawer-overlay--leave {
    opacity: 0;
    pointer-events: none;
}

.drawer-overlay.br-motion-drawer-overlay.br-motion-drawer-overlay--leave .drawer {
    transform: translateX(100%);
}

[dir='rtl'] .drawer-overlay.br-motion-drawer-overlay.br-motion-drawer-overlay--leave .drawer {
    transform: translateX(-100%);
}

/* ---- Buttons & chips (baseline polish) ---- */
@media (prefers-reduced-motion: no-preference) {
    .btn,
    .bottomnav-item,
    .mobile-messages-filter-chip,
    .mobile-browse-density-btn,
    .browse-card-send-offer-btn,
    .mobile-browse-card-send-offer-btn {
        transition:
            background-color var(--br-motion-duration-fast) ease,
            color var(--br-motion-duration-fast) ease,
            border-color var(--br-motion-duration-fast) ease,
            box-shadow var(--br-motion-duration-fast) ease,
            transform 0.12s ease,
            opacity var(--br-motion-duration-fast) ease;
    }

    .btn:active:not(:disabled),
    .bottomnav-item:active,
    .mobile-messages-filter-chip:active {
        transform: scale(0.98);
    }

    .input:focus,
    .textarea:focus,
    .select:focus,
    .browse-discovery-search__input:focus,
    .mobile-messages-search-input:focus {
        transition:
            border-color var(--br-motion-duration-fast) ease,
            box-shadow var(--br-motion-duration-fast) ease;
    }
}

/* ---- Mobile menu drawer open (class .active already used) ---- */
@media (prefers-reduced-motion: no-preference) {
    .mobile-menu-overlay {
        transition: opacity var(--br-motion-duration) var(--br-motion-ease);
    }

    .mobile-menu-drawer {
        transition: transform var(--br-motion-duration) var(--br-motion-ease);
    }
}

/* ---- Reduced motion: strip decorative animation ---- */
@media (prefers-reduced-motion: reduce) {
    #app:not(.auth-page) > *:first-child {
        animation: none !important;
    }

    .br-stagger-in > * {
        animation: none !important;
    }

    .br-list-item-exit,
    .br-list-item-exit.is-exiting {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .modal-overlay.br-motion-overlay,
    .modal-overlay.br-motion-overlay .modal,
    .drawer-overlay.br-motion-drawer-overlay,
    .drawer-overlay.br-motion-drawer-overlay .drawer {
        transition: none !important;
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 1ms !important;
    }
}