/* ============================================================
   FlyShare — animations.css
   ════════════════════════════════════════════════════════════
   Deep Audit — Single Source of Truth for All Animation Logic
   Last in cascade — overrides ANY conflicting transition.
   ════════════════════════════════════════════════════════════ */

/* ============================================================
   0. TIMING DESIGN TOKENS
   ============================================================ */
:root {
    --ease:        cubic-bezier(0.4, 0, 0.2, 1);     /* Material standard */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Spring bounce */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);    /* Decel out */

    --t1: 0.15s;   /* feedback (color, focus)   */
    --t2: 0.25s;   /* standard interactive      */
    --t3: 0.32s;   /* modals / panels           */
}

/* ============================================================
   1. GPU PROMOTION
   ============================================================ */
.trip-card, .modal-content, .notif-panel, .chat-panel,
.btn-submit, .btn-post, .btn-logout, .btn-google, .btn-apple,
.btn-escrow, .btn-chat, .btn-propose, .btn-confirm, .btn-rate,
.btn-track, .btn-boost, .btn-sub, .btn-edit,
.tc-btn-primary, .tc-btn-secondary, .tc-hover-btn,
.tc-hover-btn-secondary, .tc-btn-boost, .tc-btn-rate,
.empty-state-btn, .nav-item, .theme-btn, .lang-btn,
.auth-tab, .close-btn, .chat-close-btn, .chat-send-btn,
.footer-links a, .star {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
}

/* ============================================================
   2. UNIVERSAL BASELINE
   Every clickable element — consistent transition.
   `all` is intentional here: chosen properties below override.
   ============================================================ */
button,
a,
[role="button"],
.option-item,
.escrow-check,
input[type="button"],
input[type="submit"],
input[type="checkbox"],
input[type="radio"] {
    transition: all var(--t2) var(--ease);
}

/* ============================================================
   3. INPUTS — focus glow (NOT transform-based)
   Override universal `all` to avoid scaling inputs.
   ============================================================ */
.form-group input,
.form-group textarea,
.form-group select,
.form-select,
.search-input,
.search-date-input,
.sub-input,
.price-input,
.file-input,
.chat-input,
.rating-comment {
    transition:
        border-color var(--t1) var(--ease),
        box-shadow   var(--t2) var(--ease),
        background   var(--t1) var(--ease);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus,
.form-select:focus,
.search-input:focus,
.sub-input:focus,
.price-input:focus,
.chat-input:focus,
.rating-comment:focus {
    border-color: var(--accent);
    background: var(--white);
    box-shadow: 0 0 0 4px var(--accent-glow);
}

/* ============================================================
   4. PRIMARY BUTTONS — lift + shine
   ============================================================ */
.btn-submit, .btn-post, .btn-escrow, .btn-confirm,
.empty-state-btn {
    position: relative;
    overflow: hidden;
    transition:
        transform  var(--t2) var(--ease-spring),
        box-shadow var(--t2) var(--ease),
        filter     var(--t1) var(--ease);
}
.btn-submit::after,
.btn-post::after,
.empty-state-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent 60%);
    opacity: 0;
    transition: opacity var(--t1) var(--ease);
    pointer-events: none;
    border-radius: inherit;
}

@media (hover: hover) {
    .btn-submit:hover,
    .btn-post:hover,
    .btn-escrow:hover,
    .btn-confirm:hover,
    .empty-state-btn:hover {
        transform: translateY(-2px) scale(1.03);
        filter: brightness(1.08);
    }
    .btn-submit:hover::after,
    .btn-post:hover::after,
    .empty-state-btn:hover::after { opacity: 1; }
}
.btn-submit:active,
.btn-post:active,
.btn-escrow:active,
.btn-confirm:active,
.empty-state-btn:active {
    transform: scale(0.96);
    filter: brightness(0.96);
    transition-duration: var(--t1);
}

/* ── Logout (red gradient) ── */
.btn-logout {
    transition:
        transform  var(--t2) var(--ease-spring),
        box-shadow var(--t2) var(--ease),
        filter     var(--t1) var(--ease);
}
@media (hover: hover) {
    .btn-logout:hover { transform: translateY(-2px) scale(1.05); filter: brightness(1.07); }
}
.btn-logout:active { transform: scale(0.95); transition-duration: var(--t1); }

/* ============================================================
   5. SECONDARY / ACTION BUTTONS
   ============================================================ */
.tc-btn-primary, .tc-hover-btn,
.btn-track, .btn-chat, .btn-propose, .btn-boost {
    transition:
        transform  var(--t2) var(--ease-spring),
        box-shadow var(--t2) var(--ease),
        filter     var(--t1) var(--ease);
}
@media (hover: hover) {
    .tc-btn-primary:hover,
    .tc-hover-btn:hover,
    .btn-track:hover,
    .btn-chat:hover,
    .btn-propose:hover,
    .btn-boost:hover {
        transform: translateY(-2px) scale(1.03);
        filter: brightness(1.08);
    }
}
.tc-btn-primary:active,
.tc-hover-btn:active,
.btn-track:active,
.btn-chat:active,
.btn-propose:active,
.btn-boost:active {
    transform: scale(0.95);
    transition-duration: var(--t1);
}

.tc-btn-secondary, .tc-hover-btn-secondary,
.btn-rate, .btn-sub, .btn-edit {
    transition:
        transform    var(--t2) var(--ease-spring),
        box-shadow   var(--t2) var(--ease),
        background   var(--t1) var(--ease),
        border-color var(--t1) var(--ease);
}
@media (hover: hover) {
    .tc-btn-secondary:hover,
    .tc-hover-btn-secondary:hover,
    .btn-rate:hover,
    .btn-sub:hover,
    .btn-edit:hover { transform: translateY(-1px) scale(1.02); }
}
.tc-btn-secondary:active,
.tc-hover-btn-secondary:active,
.btn-rate:active,
.btn-sub:active,
.btn-edit:active { transform: scale(0.95); transition-duration: var(--t1); }

/* ── Social auth ── */
.btn-google, .btn-apple {
    transition:
        transform    var(--t2) var(--ease-spring),
        box-shadow   var(--t2) var(--ease),
        background   var(--t1) var(--ease),
        border-color var(--t1) var(--ease),
        color        var(--t1) var(--ease);
}
@media (hover: hover) {
    .btn-google:hover, .btn-apple:hover { transform: translateY(-2px) scale(1.03); }
}
.btn-google:active, .btn-apple:active { transform: scale(0.95); transition-duration: var(--t1); }

/* ── Chat send / footer / delete ── */
.chat-send-btn {
    transition: transform var(--t2) var(--ease-spring), box-shadow var(--t2) var(--ease);
}
@media (hover: hover) {
    .chat-send-btn:hover { transform: scale(1.1); }
}
.chat-send-btn:active { transform: scale(0.9); }

.footer-links a {
    transition:
        transform    var(--t2) var(--ease-spring),
        background   var(--t1) var(--ease),
        color        var(--t1) var(--ease),
        border-color var(--t1) var(--ease);
}
@media (hover: hover) {
    .footer-links a:hover { transform: translateY(-2px); }
}
.footer-links a:active { transform: scale(0.95); }

.sub-delete-btn,
.chat-close-btn {
    transition:
        background var(--t1) var(--ease),
        color      var(--t1) var(--ease),
        transform  var(--t2) var(--ease-spring);
}
@media (hover: hover) {
    .sub-delete-btn:hover  { transform: scale(1.1); }
    .chat-close-btn:hover  { transform: scale(1.08); }
}
.sub-delete-btn:active,
.chat-close-btn:active { transform: scale(0.9); }

/* ============================================================
   6. TRIP CARDS — lift on hover (desktop), tap (mobile)
   ============================================================ */
.trip-card {
    transition:
        transform    var(--t2) var(--ease),
        box-shadow   var(--t2) var(--ease),
        border-color var(--t1) var(--ease);
}
.trip-card::before {
    transition: opacity var(--t2) var(--ease);
}

@media (hover: hover) {
    .trip-card:hover {
        transform: translateY(-6px) scale(1.01);
        box-shadow:
            0 16px 48px rgba(0, 80, 200, 0.13),
            0 4px 16px rgba(0, 114, 255, 0.07);
        border-color: rgba(0, 114, 255, 0.2);
    }
    .trip-card:hover::before { opacity: 1; }
}

/* On touch — only :active feedback */
@media (hover: none) {
    .trip-card:active {
        transform: scale(0.98);
        transition-duration: var(--t1);
    }
}

/* ============================================================
   7. MODALS — fluid open / close
   ============================================================ */
.modal-content {
    transform: translateY(28px) scale(0.95);
    opacity: 0;
    transition:
        transform var(--t3) var(--ease-spring),
        opacity   var(--t2) var(--ease);
}
.modal.is-open .modal-content {
    transform: translateY(0) scale(1);
    opacity: 1;
}
.modal.is-closing .modal-content {
    transform: translateY(16px) scale(0.97);
    opacity: 0;
    transition:
        transform var(--t2) var(--ease),
        opacity   var(--t1) var(--ease);
}

/* Modal backdrop fade */
.modal { transition: background var(--t2) var(--ease); }

/* Close button — spin on hover */
.close-btn {
    transition:
        opacity   var(--t1) var(--ease),
        transform var(--t2) var(--ease-spring);
}
@media (hover: hover) {
    .close-btn:hover {
        opacity: 0.9;
        transform: rotate(90deg) scale(1.15);
    }
}
.close-btn:active { transform: scale(0.85) rotate(90deg); }

/* ============================================================
   8. HEADER + LANG/THEME
   ============================================================ */
header {
    transition:
        box-shadow      var(--t2) var(--ease),
        backdrop-filter var(--t2) var(--ease);
}
header.scrolled {
    box-shadow: 0 4px 28px rgba(0, 80, 200, 0.11);
}

.theme-btn {
    transition:
        transform  var(--t2) var(--ease-spring),
        box-shadow var(--t1) var(--ease),
        background var(--t1) var(--ease);
}
@media (hover: hover) {
    .theme-btn:hover { transform: rotate(22deg) scale(1.18); }
}
.theme-btn:active { transform: scale(0.85); }

.lang-btn {
    transition:
        transform  var(--t2) var(--ease-spring),
        background var(--t1) var(--ease),
        color      var(--t1) var(--ease);
}
@media (hover: hover) {
    .lang-btn:hover { transform: scale(1.14); }
}
.lang-btn:active { transform: scale(0.88); }

.btn-login {
    transition: background var(--t1) var(--ease), color var(--t1) var(--ease);
}

.logo {
    transition: opacity var(--t1) var(--ease);
}

/* ============================================================
   9. BOTTOM NAV — spring tap
   ============================================================ */
.nav-item {
    transition:
        color      var(--t1) var(--ease),
        background var(--t1) var(--ease),
        transform  var(--t2) var(--ease-spring);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.nav-item.active,
.nav-item.active span { color: var(--accent); }

@media (hover: hover) {
    .nav-item:hover { color: var(--accent); }
}
.nav-item:active {
    transform: scale(0.82);
    background: var(--input-bg);
    color: var(--accent);
}

/* ============================================================
   10. AUTH TABS — smooth pill switch
   ============================================================ */
.auth-tab {
    transition:
        background var(--t1) var(--ease),
        color      var(--t1) var(--ease),
        box-shadow var(--t2) var(--ease);
}

/* ============================================================
   11. CHECKBOX / TOGGLE
   ============================================================ */
.escrow-check {
    transition:
        border-color var(--t1) var(--ease),
        background   var(--t1) var(--ease),
        transform    var(--t2) var(--ease-spring);
}
@media (hover: hover) {
    .escrow-check:hover { transform: scale(1.01); }
}
.escrow-check:active { transform: scale(0.99); }

/* ============================================================
   12. NOTIFICATION PANEL — slide + fade
   ============================================================ */
.notif-panel {
    transition:
        transform var(--t3) var(--ease-spring),
        opacity   var(--t2) var(--ease);
}

/* ============================================================
   13. DROPDOWNS — slide + fade
   ============================================================ */
.options-list,
.sub-options-list,
.phone-country-dropdown,
.calendar-dropdown {
    transition:
        opacity   var(--t2) var(--ease),
        transform var(--t2) var(--ease-spring);
}
.options-list .option-item,
.sub-options-list .option-item {
    transition:
        background var(--t1) var(--ease),
        color      var(--t1) var(--ease),
        transform  var(--t2) var(--ease-spring);
}
@media (hover: hover) {
    .options-list .option-item:hover,
    .sub-options-list .option-item:hover { transform: translateX(3px); }
}

/* ============================================================
   14. SEARCH BOX — focus glow
   ============================================================ */
.search-box {
    transition: box-shadow var(--t2) var(--ease);
}
.search-box:focus-within {
    box-shadow: 0 8px 32px rgba(0, 114, 255, 0.12);
}

/* ============================================================
   15. STARS (rating)
   ============================================================ */
.star {
    transition:
        color     var(--t1) var(--ease),
        transform var(--t2) var(--ease-spring);
}
@media (hover: hover) {
    .star:hover, .star.hover { transform: scale(1.2); }
}
.star:active { transform: scale(1.05); }

/* ============================================================
   16. PAGE-LEVEL ENTRANCE
   ============================================================ */
@keyframes fadeUpIn {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero            { animation: fadeUpIn 0.45s var(--ease-spring) both; }
.trips-section   { animation: fadeUpIn 0.50s var(--ease-spring) 0.06s both; }
.cabinet-section { animation: fadeUpIn 0.45s var(--ease-spring) both; }

/* ============================================================
   17. SKELETON SHIMMER
   ============================================================ */
@keyframes shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}
.skeleton {
    background: linear-gradient(
        90deg,
        var(--border) 25%,
        rgba(255, 255, 255, 0.55) 50%,
        var(--border) 75%
    );
    background-size: 1200px 100%;
    animation: shimmer 1.6s infinite linear;
    border-radius: 10px;
}
body.dark-mode .skeleton {
    background: linear-gradient(
        90deg,
        var(--border) 25%,
        rgba(255, 255, 255, 0.06) 50%,
        var(--border) 75%
    );
    background-size: 1200px 100%;
}

/* ============================================================
   18. TOAST — slide-in from top
   ============================================================ */
@keyframes toastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-20px) scale(0.93); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0)     scale(1);    }
}
@keyframes toastOut {
    from { opacity: 1; transform: translateX(-50%) translateY(0)     scale(1);    }
    to   { opacity: 0; transform: translateX(-50%) translateY(-14px) scale(0.94); }
}
.toast        { animation: toastIn  0.28s var(--ease-spring) both; }
.toast.hiding { animation: toastOut 0.20s var(--ease)        both; }

/* ============================================================
   19. NOTIFICATION BELL — wiggle
   ============================================================ */
@keyframes bellWiggle {
    0%, 100% { transform: rotate(0); }
    15%      { transform: rotate(18deg); }
    30%      { transform: rotate(-15deg); }
    45%      { transform: rotate(10deg); }
    60%      { transform: rotate(-7deg); }
    75%      { transform: rotate(4deg); }
}
.notif-bell-new {
    animation: bellWiggle 0.65s var(--ease) 1;
}

/* ============================================================
   20. BADGE PULSE (booked status)
   ============================================================ */
@keyframes badgePulse {
    0%, 100% { box-shadow: 0 0 0 0   rgba(230, 126, 34, 0.4); }
    50%       { box-shadow: 0 0 0 5px rgba(230, 126, 34, 0);   }
}
.card-badge.status-booked {
    animation: badgePulse 2.2s var(--ease) infinite;
}

/* ============================================================
   21. EMPTY STATE — floating icon
   ============================================================ */
@keyframes floatIcon {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-7px); }
}
.empty-state-icon {
    animation: floatIcon 3s var(--ease) infinite;
}

/* ============================================================
   22. MOBILE — disable stuck hover states
   On touch devices :hover lingers — disable lift/shine.
   ============================================================ */
@media (hover: none) {
    .trip-card:hover {
        transform: none !important;
        box-shadow: var(--shadow-sm) !important;
        border-color: var(--border) !important;
    }
    .trip-card:hover::before { opacity: 0 !important; }

    .btn-submit:hover, .btn-post:hover, .btn-logout:hover,
    .btn-google:hover, .btn-apple:hover,
    .btn-escrow:hover, .btn-confirm:hover,
    .tc-btn-primary:hover, .tc-btn-secondary:hover,
    .tc-hover-btn:hover, .tc-hover-btn-secondary:hover,
    .btn-track:hover, .btn-chat:hover, .btn-propose:hover,
    .btn-boost:hover, .btn-rate:hover, .btn-sub:hover,
    .btn-edit:hover, .empty-state-btn:hover,
    .footer-links a:hover, .chat-send-btn:hover,
    .sub-delete-btn:hover, .chat-close-btn:hover,
    .nav-item:hover, .theme-btn:hover, .lang-btn:hover,
    .close-btn:hover, .star:hover, .escrow-check:hover {
        transform: none !important;
        filter: none !important;
    }

    .btn-submit::after,
    .btn-post::after,
    .empty-state-btn::after { display: none !important; }
}

/* ============================================================
   23. REDUCED MOTION — respect user preference
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration:        0.01ms !important;
        animation-iteration-count: 1      !important;
        transition-duration:       0.01ms !important;
        scroll-behavior:           auto   !important;
    }
}