/* ==========================================
   🍎📱 iOS-STYLE MOBILE ANIMATIONS
   Smooth, lightweight animations for mobile
   Inspired by iOS 16+ 
   ========================================== */

:root {
    /* iOS Spring Curves - Optimized for mobile */
    --ios-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ios-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ios-spring: cubic-bezier(0.175, 0.885, 0.32, 1.1);
    
    /* Fast durations for mobile */
    --ios-duration-quick: 0.25s;
    --ios-duration-normal: 0.35s;
    --ios-duration-slow: 0.45s;
}

/* ==========================================
   1. PAGE TRANSITIONS (iOS-like)
   ========================================== */

@media (max-width: 768px) {
    /* Fade in on page load */
    body {
        animation: ios-page-fade-in 0.3s var(--ios-ease-out);
    }

    @keyframes ios-page-fade-in {
        from {
            opacity: 0;
            transform: scale(0.98);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }
}

/* ==========================================
   2. CARD SLIDE-UP (iOS style)
   ========================================== */

@media (max-width: 768px) {
    .glass-card {
        animation: ios-slide-up 0.4s var(--ios-ease-out);
        animation-fill-mode: both;
    }

    @keyframes ios-slide-up {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Stagger effect for multiple cards */
    .glass-card:nth-child(1) { animation-delay: 0s; }
    .glass-card:nth-child(2) { animation-delay: 0.05s; }
    .glass-card:nth-child(3) { animation-delay: 0.1s; }
    .glass-card:nth-child(4) { animation-delay: 0.15s; }
    .glass-card:nth-child(5) { animation-delay: 0.2s; }
}

/* ==========================================
   3. BUTTON PRESS (iOS haptic-like)
   ========================================== */

@media (max-width: 768px) {
    .btn,
    button,
    .btn-liquid {
        transition: transform 0.15s var(--ios-ease-out);
    }

    .btn:active,
    button:active,
    .btn-liquid:active {
        transform: scale(0.96);
    }

    /* Ripple effect - iOS style */
    @keyframes ios-ripple {
        0% {
            transform: scale(0);
            opacity: 1;
        }
        100% {
            transform: scale(2.5);
            opacity: 0;
        }
    }

    .btn::after,
    button::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        transform: translate(-50%, -50%) scale(0);
        pointer-events: none;
    }

    .btn:active::after,
    button:active::after {
        animation: ios-ripple 0.6s ease-out;
    }
}

/* ==========================================
   4. INPUT FOCUS (iOS style)
   ========================================== */

@media (max-width: 768px) {
    .glass-input,
    .form-control {
        transition: all 0.3s var(--ios-ease-out);
    }

    .glass-input:focus,
    .form-control:focus {
        transform: scale(1.01);
        animation: ios-input-pulse 0.4s var(--ios-ease-out);
    }

    @keyframes ios-input-pulse {
        0% {
            box-shadow: 0 0 0 0 rgba(156, 39, 176, 0.4);
        }
        50% {
            box-shadow: 0 0 0 8px rgba(156, 39, 176, 0);
        }
        100% {
            box-shadow: 0 0 0 0 rgba(156, 39, 176, 0);
        }
    }
}

/* ==========================================
   5. MODAL SLIDE-UP (iOS bottom sheet)
   ========================================== */

@media (max-width: 768px) {
    .modal.show .modal-dialog {
        animation: ios-modal-slide 0.4s var(--ios-ease-out);
    }

    @keyframes ios-modal-slide {
        from {
            opacity: 0;
            transform: translateY(100%);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Modal backdrop fade */
    .modal-backdrop.show {
        animation: ios-backdrop-fade 0.3s ease-out;
    }

    @keyframes ios-backdrop-fade {
        from {
            opacity: 0;
        }
        to {
            opacity: 0.5;
        }
    }
}

/* ==========================================
   6. NAVBAR ITEMS (iOS bounce)
   ========================================== */

@media (max-width: 768px) {
    .nav-item {
        animation: ios-nav-bounce 0.5s var(--ios-spring);
        animation-fill-mode: both;
    }

    @keyframes ios-nav-bounce {
        from {
            opacity: 0;
            transform: scale(0.8);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    .nav-item:nth-child(1) { animation-delay: 0s; }
    .nav-item:nth-child(2) { animation-delay: 0.05s; }
    .nav-item:nth-child(3) { animation-delay: 0.1s; }
    .nav-item:nth-child(4) { animation-delay: 0.15s; }

    /* Nav link tap */
    .nav-link {
        transition: transform 0.2s var(--ios-ease-out);
    }

    .nav-link:active {
        transform: scale(0.95);
    }
}

/* ==========================================
   7. LIST ITEMS (iOS slide)
   ========================================== */

@media (max-width: 768px) {
    .list-group-item,
    tr {
        animation: ios-list-slide 0.3s var(--ios-ease-out);
        animation-fill-mode: both;
    }

    @keyframes ios-list-slide {
        from {
            opacity: 0;
            transform: translateX(-20px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* Stagger for list items */
    .list-group-item:nth-child(1),
    tr:nth-child(1) { animation-delay: 0s; }
    .list-group-item:nth-child(2),
    tr:nth-child(2) { animation-delay: 0.03s; }
    .list-group-item:nth-child(3),
    tr:nth-child(3) { animation-delay: 0.06s; }
    .list-group-item:nth-child(4),
    tr:nth-child(4) { animation-delay: 0.09s; }
    .list-group-item:nth-child(5),
    tr:nth-child(5) { animation-delay: 0.12s; }
}

/* ==========================================
   8. BADGE POP (iOS notification style)
   ========================================== */

@media (max-width: 768px) {
    .badge,
    .glass-badge {
        animation: ios-badge-pop 0.4s var(--ios-spring);
    }

    @keyframes ios-badge-pop {
        0% {
            transform: scale(0);
        }
        50% {
            transform: scale(1.1);
        }
        100% {
            transform: scale(1);
        }
    }
}

/* ==========================================
   9. ALERT SLIDE-DOWN (iOS notification)
   ========================================== */

@media (max-width: 768px) {
    .alert {
        animation: ios-alert-slide 0.4s var(--ios-ease-out);
    }

    @keyframes ios-alert-slide {
        from {
            opacity: 0;
            transform: translateY(-30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* ==========================================
   10. TAB SWITCH (iOS smooth transition)
   ========================================== */

@media (max-width: 768px) {
    .tab-pane.active {
        animation: ios-tab-fade 0.3s var(--ios-ease-out);
    }

    @keyframes ios-tab-fade {
        from {
            opacity: 0;
            transform: scale(0.98);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }
}

/* ==========================================
   11. FLOATING LABEL (iOS style)
   ========================================== */

@media (max-width: 768px) {
    .form-floating label {
        transition: all 0.3s var(--ios-ease-out);
    }

    .form-floating input:focus ~ label,
    .form-floating input:not(:placeholder-shown) ~ label {
        transform: translateY(-1.5rem) scale(0.85);
    }
}

/* ==========================================
   12. SCROLL REVEAL (iOS fade-in)
   ========================================== */

@media (max-width: 768px) {
    .scroll-reveal {
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.5s var(--ios-ease-out);
    }

    .scroll-reveal.active {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================
   13. NAVBAR HIDE/SHOW (iOS Safari style)
   ========================================== */

@media (max-width: 768px) {
    .navbar {
        transition: transform 0.3s var(--ios-ease-out);
    }

    .navbar.navbar-hidden {
        transform: translateY(-100%);
    }

    .navbar.navbar-visible {
        transform: translateY(0);
    }
}

/* ==========================================
   14. PULL TO REFRESH INDICATOR
   ========================================== */

@media (max-width: 768px) {
    .pull-to-refresh {
        animation: ios-spinner 1s linear infinite;
    }

    @keyframes ios-spinner {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
}

/* ==========================================
   15. TOAST NOTIFICATION (iOS style)
   ========================================== */

@media (max-width: 768px) {
    .toast {
        animation: ios-toast-slide 0.4s var(--ios-ease-out);
    }

    @keyframes ios-toast-slide {
        from {
            opacity: 0;
            transform: translateY(-100%) scale(0.9);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    .toast.hiding {
        animation: ios-toast-slide 0.3s var(--ios-ease-out) reverse;
    }
}

/* ==========================================
   16. CARD HOVER (Touch feedback)
   ========================================== */

@media (max-width: 768px) {
    @media (hover: none) {
        /* Touch feedback instead of hover */
        .glass-card:active {
            transform: scale(0.98);
            transition: transform 0.1s ease-out;
        }
    }
}

/* ==========================================
   17. SKELETON LOADING (iOS style)
   ========================================== */

@media (max-width: 768px) {
    .skeleton {
        animation: ios-skeleton-shimmer 1.5s ease-in-out infinite;
        background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.05) 0%,
            rgba(255, 255, 255, 0.15) 50%,
            rgba(255, 255, 255, 0.05) 100%
        );
        background-size: 200% 100%;
    }

    @keyframes ios-skeleton-shimmer {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }
}

/* ==========================================
   18. SWITCH TOGGLE (iOS style)
   ========================================== */

@media (max-width: 768px) {
    .form-check-input {
        transition: all 0.3s var(--ios-ease-out);
    }

    .form-check-input:checked {
        transform: scale(1.05);
        animation: ios-switch-bounce 0.4s var(--ios-spring);
    }

    @keyframes ios-switch-bounce {
        0% { transform: scale(1); }
        50% { transform: scale(1.1); }
        100% { transform: scale(1.05); }
    }
}

/* ==========================================
   19. DROPDOWN MENU (iOS bounce)
   ========================================== */

@media (max-width: 768px) {
    .dropdown-menu.show {
        animation: ios-dropdown 0.3s var(--ios-spring);
    }

    @keyframes ios-dropdown {
        from {
            opacity: 0;
            transform: scale(0.9) translateY(-10px);
        }
        to {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }
}

/* ==========================================
   20. IMAGE FADE-IN (iOS Photos style)
   ========================================== */

@media (max-width: 768px) {
    img {
        animation: ios-image-fade 0.4s var(--ios-ease-out);
    }

    @keyframes ios-image-fade {
        from {
            opacity: 0;
            transform: scale(0.95);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }
}

/* ==========================================
   21. HERO CONTENT (iOS smooth entrance)
   ========================================== */

@media (max-width: 768px) {
    .hero-content {
        animation: ios-hero-entrance 0.6s var(--ios-ease-out);
    }

    @keyframes ios-hero-entrance {
        from {
            opacity: 0;
            transform: translateY(40px) scale(0.95);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
}

/* ==========================================
   22. FEATURE CARDS (iOS stagger)
   ========================================== */

@media (max-width: 768px) {
    .feature-card {
        animation: ios-feature-appear 0.5s var(--ios-ease-out);
        animation-fill-mode: both;
    }

    @keyframes ios-feature-appear {
        from {
            opacity: 0;
            transform: translateY(30px) scale(0.9);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    .feature-card:nth-child(1) { animation-delay: 0.1s; }
    .feature-card:nth-child(2) { animation-delay: 0.2s; }
    .feature-card:nth-child(3) { animation-delay: 0.3s; }
}

/* ==========================================
   23. SUBTLE BOUNCE ON LOAD (iOS app launch)
   ========================================== */

@media (max-width: 768px) {
    .ios-bounce-in {
        animation: ios-launch-bounce 0.5s var(--ios-spring);
    }

    @keyframes ios-launch-bounce {
        0% {
            opacity: 0;
            transform: scale(0.85);
        }
        60% {
            transform: scale(1.02);
        }
        100% {
            opacity: 1;
            transform: scale(1);
        }
    }
}

/* ==========================================
   24. REDUCE MOTION (Accessibility)
   ========================================== */

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================
   25. PERFORMANCE OPTIMIZATION
   ========================================== */

@media (max-width: 768px) {
    /* Only animate transform and opacity for performance */
    .glass-card,
    .btn,
    .nav-link,
    .modal-dialog {
        will-change: transform, opacity;
    }

    /* Remove will-change after animation */
    .glass-card:not(:hover):not(:active),
    .btn:not(:hover):not(:active) {
        will-change: auto;
    }
}