/**
 * Native Performance CSS v1.0
 * 
 * Ultra-optimized CSS for 60fps smooth animations and buttery-smooth UX
 * Specifically designed for Capacitor APK builds but works everywhere
 */

/* ==================== GPU ACCELERATION ==================== */

/* Force GPU compositing for smooth animations */
.gpu-layer,
.transform-gpu,
[data-gpu="true"] {
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
    will-change: transform, opacity;
}

/* Hardware-accelerated transforms */
.hw-accelerated {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}

/* ==================== SMOOTH SCROLLING ==================== */

/* Optimized scrolling for mobile */
.scroll-smooth-native {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    overscroll-behavior-y: contain;
}

/* Scroll container with momentum */
.scroll-momentum {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: y proximity;
}

/* Hide scrollbar but keep functionality */
.scroll-hidden-bar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.scroll-hidden-bar::-webkit-scrollbar {
    display: none;
}

/* ==================== TOUCH OPTIMIZATION ==================== */

/* Remove tap highlight */
.touch-optimized,
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* Faster touch response */
.touch-fast {
    touch-action: manipulation;
}

/* Touch active state */
.touch-active {
    transform: scale(0.97);
    opacity: 0.9;
    transition: transform 0.1s ease, opacity 0.1s ease;
}

/* Pressable button effect */
.btn-pressable {
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-pressable:active {
    transform: scale(0.96) translateY(1px);
}

/* ==================== 60FPS ANIMATIONS ==================== */

/* Ultra-smooth fade in */
@keyframes fadeIn60fps {
    from {
        opacity: 0;
        transform: translate3d(0, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Smooth slide up */
@keyframes slideUp60fps {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Smooth slide down */
@keyframes slideDown60fps {
    from {
        opacity: 0;
        transform: translate3d(0, -20px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Smooth slide in from right */
@keyframes slideInRight60fps {
    from {
        opacity: 0;
        transform: translate3d(30px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Smooth slide in from left */
@keyframes slideInLeft60fps {
    from {
        opacity: 0;
        transform: translate3d(-30px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Smooth scale in */
@keyframes scaleIn60fps {
    from {
        opacity: 0;
        transform: scale3d(0.92, 0.92, 1);
    }
    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

/* Smooth scale out */
@keyframes scaleOut60fps {
    from {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
    to {
        opacity: 0;
        transform: scale3d(0.92, 0.92, 1);
    }
}

/* Bounce effect */
@keyframes bounce60fps {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(0, -10px, 0);
    }
}

/* Pulse glow */
@keyframes pulseGlow60fps {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
        transform: scale3d(1, 1, 1);
    }
    50% {
        box-shadow: 0 0 20px 10px rgba(245, 158, 11, 0);
        transform: scale3d(1.02, 1.02, 1);
    }
}

/* Shimmer loading effect */
@keyframes shimmer60fps {
    0% {
        transform: translate3d(-100%, 0, 0);
    }
    100% {
        transform: translate3d(100%, 0, 0);
    }
}

/* Spin animation */
@keyframes spin60fps {
    from {
        transform: rotate3d(0, 0, 1, 0deg);
    }
    to {
        transform: rotate3d(0, 0, 1, 360deg);
    }
}

/* Heartbeat effect */
@keyframes heartbeat60fps {
    0%, 100% {
        transform: scale3d(1, 1, 1);
    }
    25% {
        transform: scale3d(1.1, 1.1, 1);
    }
    50% {
        transform: scale3d(1, 1, 1);
    }
    75% {
        transform: scale3d(1.05, 1.05, 1);
    }
}

/* ==================== ANIMATION CLASSES ==================== */

/* Fade animations */
.animate-fade-in-60fps {
    animation: fadeIn60fps 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-fade-out-60fps {
    animation: fadeIn60fps 0.2s cubic-bezier(0.4, 0, 0.2, 1) reverse forwards;
}

/* Slide animations */
.animate-slide-up-60fps {
    animation: slideUp60fps 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-slide-down-60fps {
    animation: slideDown60fps 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-slide-right-60fps {
    animation: slideInRight60fps 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-slide-left-60fps {
    animation: slideInLeft60fps 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Scale animations */
.animate-scale-in-60fps {
    animation: scaleIn60fps 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-scale-out-60fps {
    animation: scaleOut60fps 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Effect animations */
.animate-bounce-60fps {
    animation: bounce60fps 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-pulse-glow-60fps {
    animation: pulseGlow60fps 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-spin-60fps {
    animation: spin60fps 1s linear infinite;
}

.animate-heartbeat-60fps {
    animation: heartbeat60fps 1.5s ease-in-out infinite;
}

/* Shimmer loading */
.shimmer-60fps {
    position: relative;
    overflow: hidden;
}
.shimmer-60fps::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    animation: shimmer60fps 1.5s infinite;
}

/* Staggered animations */
.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.1s; }
.stagger-3 { animation-delay: 0.15s; }
.stagger-4 { animation-delay: 0.2s; }
.stagger-5 { animation-delay: 0.25s; }
.stagger-6 { animation-delay: 0.3s; }
.stagger-7 { animation-delay: 0.35s; }
.stagger-8 { animation-delay: 0.4s; }

/* ==================== TRANSITIONS ==================== */

/* Smooth transitions for common properties */
.transition-smooth {
    transition-property: transform, opacity, background-color, border-color, box-shadow;
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-transform-smooth {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-opacity-smooth {
    transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-colors-smooth {
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

/* ==================== LAYOUT OPTIMIZATION ==================== */

/* Contain layout for better perf */
.layout-contain {
    contain: layout style paint;
}

.layout-strict {
    contain: strict;
}

/* Content visibility for lazy rendering */
.content-lazy {
    content-visibility: auto;
    contain-intrinsic-size: auto 200px;
}

/* ==================== MODAL & OVERLAY ==================== */

/* Optimized modal backdrop */
.modal-backdrop-60fps {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: fadeIn60fps 0.2s ease forwards;
}

/* Optimized modal content */
.modal-content-60fps {
    transform: translate3d(0, 0, 0);
    animation: scaleIn60fps 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ==================== BUTTON EFFECTS ==================== */

/* Premium button with glow */
.btn-premium-glow {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-premium-glow::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(45deg, #f59e0b, #ea580c, #f59e0b);
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.btn-premium-glow:hover::before {
    opacity: 1;
    animation: spin60fps 3s linear infinite;
}

/* Ripple effect */
.ripple-effect {
    position: relative;
    overflow: hidden;
}
.ripple-effect::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}
.ripple-effect:active::after {
    width: 200%;
    height: 200%;
    opacity: 1;
    transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
}

/* ==================== TEXT OPTIMIZATION ==================== */

/* Crisp text rendering */
.text-crisp {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ==================== IMAGE OPTIMIZATION ==================== */

/* Lazy loaded images */
.img-lazy {
    content-visibility: auto;
    contain-intrinsic-size: 100% auto;
}

/* Smooth image loading */
.img-fade-in {
    opacity: 0;
    transition: opacity 0.3s ease;
}
.img-fade-in.loaded {
    opacity: 1;
}

/* ==================== NATIVE PLATFORM STYLES ==================== */

/* Safe area padding for notched devices */
.safe-area-inset-top {
    padding-top: env(safe-area-inset-top, 0);
}
.safe-area-inset-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.safe-area-inset-left {
    padding-left: env(safe-area-inset-left, 0);
}
.safe-area-inset-right {
    padding-right: env(safe-area-inset-right, 0);
}
.safe-area-all {
    padding: env(safe-area-inset-top, 0) 
             env(safe-area-inset-right, 0) 
             env(safe-area-inset-bottom, 0) 
             env(safe-area-inset-left, 0);
}

/* Keyboard visibility handling */
.keyboard-visible {
    --keyboard-height: 0px;
}
.keyboard-aware-padding {
    padding-bottom: calc(env(safe-area-inset-bottom, 0) + var(--keyboard-height, 0px));
    transition: padding-bottom 0.2s ease;
}

/* Native app feel */
.native-feel {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: pan-x pan-y;
}

/* ==================== REDUCED MOTION ==================== */

@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;
    }
}

/* ==================== DARK MODE TRANSITIONS ==================== */

/* Smooth theme transitions */
.theme-transition {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* ==================== PERFORMANCE UTILITIES ==================== */

/* Force paint layer */
.paint-layer {
    isolation: isolate;
}

/* Prevent layout shift */
.no-layout-shift {
    contain: size layout style paint;
}

/* Optimize will-change */
.will-change-transform {
    will-change: transform;
}
.will-change-opacity {
    will-change: opacity;
}
.will-change-auto {
    will-change: auto;
}