/* ========================================
   MICRO-INTERACTIONS & MOTION DESIGN
   Global animations, hover states, and
   subtle motion for a polished 2026 feel.
   ======================================== */

/* ----------------------------------------
   STAGGER ANIMATION FOR LIST ITEMS
   Cards, grid items, list rows appear
   sequentially with a slight delay
   ---------------------------------------- */
@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Apply staggered fade-in to ticket grids, card lists, etc. */
.tickets-grid > *,
.lines-grid > *,
.stations-grid > *,
.timetables-grid > *,
.disruptions-list > *,
.quick-access-grid > * {
    animation: fadeSlideUp 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.tickets-grid > *:nth-child(1),
.lines-grid > *:nth-child(1),
.stations-grid > *:nth-child(1),
.quick-access-grid > *:nth-child(1) { animation-delay: 0s; }

.tickets-grid > *:nth-child(2),
.lines-grid > *:nth-child(2),
.stations-grid > *:nth-child(2),
.quick-access-grid > *:nth-child(2) { animation-delay: 0.04s; }

.tickets-grid > *:nth-child(3),
.lines-grid > *:nth-child(3),
.stations-grid > *:nth-child(3),
.quick-access-grid > *:nth-child(3) { animation-delay: 0.08s; }

.tickets-grid > *:nth-child(4),
.lines-grid > *:nth-child(4),
.stations-grid > *:nth-child(4),
.quick-access-grid > *:nth-child(4) { animation-delay: 0.12s; }

.tickets-grid > *:nth-child(5),
.lines-grid > *:nth-child(5),
.stations-grid > *:nth-child(5),
.quick-access-grid > *:nth-child(5) { animation-delay: 0.16s; }

.tickets-grid > *:nth-child(6),
.lines-grid > *:nth-child(6),
.stations-grid > *:nth-child(6),
.quick-access-grid > *:nth-child(6) { animation-delay: 0.2s; }

.tickets-grid > *:nth-child(n+7),
.lines-grid > *:nth-child(n+7),
.stations-grid > *:nth-child(n+7) { animation-delay: 0.24s; }

/* Table rows stagger */
.table-body .table-row {
    animation: fadeSlideIn 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.table-body .table-row:nth-child(1) { animation-delay: 0s; }
.table-body .table-row:nth-child(2) { animation-delay: 0.03s; }
.table-body .table-row:nth-child(3) { animation-delay: 0.06s; }
.table-body .table-row:nth-child(4) { animation-delay: 0.09s; }
.table-body .table-row:nth-child(5) { animation-delay: 0.12s; }
.table-body .table-row:nth-child(n+6) { animation-delay: 0.15s; }

/* ----------------------------------------
   BUTTON PRESS EFFECT
   Subtle scale-down on all interactive buttons
   ---------------------------------------- */
.buy-button:active:not(:disabled),
.action-btn:active:not(:disabled),
.wallet-modal-button:active:not(:disabled),
.filter-toggle:active,
.page-btn:active:not(:disabled) {
    transform: scale(0.97);
}

/* ----------------------------------------
   CARD HOVER LIFT
   Unified card hover with spring animation
   ---------------------------------------- */
.ticket-card,
.line-card,
.station-card,
.disruption-card,
.timetable-card,
.quick-access-item {
    transition: transform var(--transition-apple, 0.4s cubic-bezier(0.2, 0.8, 0.2, 1)),
                box-shadow var(--transition-apple, 0.4s cubic-bezier(0.2, 0.8, 0.2, 1)),
                border-color var(--transition-apple-fast, 0.2s cubic-bezier(0.2, 0.8, 0.2, 1));
}

/* ----------------------------------------
   FOCUS RING ANIMATION
   Smooth focus ring appearance
   ---------------------------------------- */
@keyframes focusRingPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(26, 124, 202, 0.4);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(26, 124, 202, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(26, 124, 202, 0);
    }
}

/* ----------------------------------------
   SKELETON LOADING SHIMMER
   Reusable shimmer effect for loading states
   ---------------------------------------- */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-bg-tertiary, #F1F5F9) 25%,
        var(--color-bg-secondary, #F8FAFC) 37%,
        var(--color-bg-tertiary, #F1F5F9) 63%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: 8px;
}

.skeleton-text {
    height: 14px;
    width: 60%;
    margin-bottom: 8px;
}

.skeleton-title {
    height: 22px;
    width: 40%;
    margin-bottom: 12px;
}

.skeleton-card {
    height: 200px;
    border-radius: 16px;
}

/* ----------------------------------------
   SMOOTH SECTION TRANSITIONS
   Content sections animate in
   ---------------------------------------- */
.catalog-content,
.wallet-content,
.tickets-content,
.lines-content,
.stations-content {
    animation: fadeSlideUp 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    animation-delay: 0.1s;
}

/* ----------------------------------------
   BADGE PULSE (for notification badges)
   ---------------------------------------- */
@keyframes badgePulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.notification-badge,
.alert-count {
    animation: badgePulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ----------------------------------------
   TOOLTIP FADE
   ---------------------------------------- */
@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ----------------------------------------
   REDUCED MOTION
   Respect user preference
   ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .tickets-grid > *,
    .lines-grid > *,
    .stations-grid > *,
    .timetables-grid > *,
    .disruptions-list > *,
    .quick-access-grid > *,
    .table-body .table-row,
    .catalog-content,
    .wallet-content,
    .tickets-content,
    .lines-content,
    .stations-content {
        animation: none;
    }

    .ticket-card,
    .line-card,
    .station-card,
    .disruption-card,
    .timetable-card,
    .quick-access-item {
        transition: none;
    }

    .notification-badge,
    .alert-count {
        animation: none;
    }

    .skeleton {
        animation: none;
        background: var(--color-bg-tertiary, #F1F5F9);
    }
}