/* ============================================
   🚀 OPhelia DASHBOARD - GLOBAL SMOOTHNESS BOOSTER v4.0
   3x Performance Enhancement - Apply to ALL pages
   ============================================ */

/* ==================== GPU ACCELERATION LAYER ==================== */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.gpu-layer {
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
}

/* Force GPU on animated elements */
.orb, .particle, .particle-orb, .float-element, .nebula, .shooting-star,
.grid-pattern, .bg-gradient, .bg-canvas {
    transform: translateZ(0);
    will-change: transform, opacity;
    contain: layout style paint;
}

/* ==================== SCROLL PERFORMANCE ==================== */
html {
    scroll-behavior: smooth;
    overscroll-behavior: none;
}

body {
    contain: paint style;
    text-rendering: optimizeLegibility;
    -webkit-overflow-scrolling: touch;
}

/* Custom scrollbar - smooth & minimal */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(168,85,247,.4), rgba(99,102,241,.4));
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: all 0.2s ease;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(168,85,247,.6), rgba(99,102,241,.6));
}
* { scrollbar-width: thin; scrollbar-color: rgba(168,85,247,.4) transparent; }

/* ==================== ANIMATION OPTIMIZATIONS v4.0 ==================== */
.smooth-animate {
    transform: translateZ(0);
    will-change: transform, opacity;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    contain: layout style;
}

/* Stagger helper for list items */
.stagger-item {
    opacity: 0;
    transform: translateY(15px) translateZ(0);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.stagger-item.visible {
    opacity: 1;
    transform: translateY(0) translateZ(0);
}

/* ==================== REDUCED MOTION SUPPORT ==================== */
@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;
        will-change: auto !important;
    }
    .orb, .particle, .particle-orb, .float-element, .grid-pattern, 
    .nebula, .shooting-star, .bg-effects { 
        display: none !important; 
    }
}

/* Low FPS mode (added via JS) */
body.reduced-motion .orb,
body.reduced-motion .particle,
body.reduced-motion .nebula,
body.reduced-motion .shooting-star {
    display: none !important;
    animation: none !important;
}

/* ==================== HOVER EFFECTS - OPTIMIZED ==================== */
.hover-lift {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateZ(0);
}
.hover-lift:hover {
    transform: translateY(-4px) translateZ(0);
    box-shadow: 0 12px 40px rgba(0,0,0,.25);
}

.hover-glow {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.hover-glow:hover {
    border-color: var(--border-glow, rgba(168,85,247,.3));
    box-shadow: 0 0 30px rgba(168,85,247,.15);
}

.hover-scale {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateZ(0);
}
.hover-scale:hover {
    transform: scale(1.03) translateZ(0);
}

/* ==================== CARD ENTRANCE ANIMATIONS v4.0 ==================== */
.card-enter {
    opacity: 0;
    transform: translateY(20px) translateZ(0);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-enter.visible {
    opacity: 1;
    transform: translateY(0) translateZ(0);
}
.stagger-1 { transition-delay: 0.05s; }
.stagger-2 { transition-delay: 0.1s; }
.stagger-3 { transition-delay: 0.15s; }
.stagger-4 { transition-delay: 0.2s; }
.stagger-5 { transition-delay: 0.25s; }
.stagger-6 { transition-delay: 0.3s; }
.stagger-7 { transition-delay: 0.35s; }
.stagger-8 { transition-delay: 0.4s; }
.stagger-9 { transition-delay: 0.45s; }
.stagger-10 { transition-delay: 0.5s; }

/* ==================== LOADING STATES ==================== */
.skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.04) 75%);
    background-size: 200% 100%;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: 8px;
}
@keyframes skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.page-loaded {
    animation: pageFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==================== BUTTON SMOOTHNESS v4.0 ==================== */
.btn-smooth {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateZ(0);
}
.btn-smooth::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    background: rgba(255,255,255,.15);
    border-radius: 50%;
    transform: translate(-50%, -50%) translateZ(0);
    transition: width 0.6s ease, height 0.6s ease;
}
.btn-smooth:active::after { width: 300px; height: 300px; }

/* All buttons get GPU acceleration */
button, [role="button"], .btn, input[type="submit"] {
    transform: translateZ(0);
}

/* ==================== INPUT FOCUS EFFECTS ==================== */
.input-smooth {
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.input-smooth:focus {
    outline: none;
    border-color: #a855f7;
    box-shadow: 0 0 0 4px rgba(168,85,247,.15);
    background: rgba(255,255,255,.02);
}

/* ==================== NAVBAR SMOOTHNESS ==================== */
.navbar-smooth {
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateZ(0);
    contain: layout style;
}
.navbar-smooth.scrolled { 
    box-shadow: 0 4px 30px rgba(0,0,0,.2); 
}

/* ==================== PROGRESS BAR SMOOTHNESS ==================== */
.progress-fill-smooth {
    transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}
.progress-fill-smooth::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.2) 50%, transparent 100%);
    animation: progress-shine 2s infinite;
}
@keyframes progress-shine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

/* ==================== COUNTER ANIMATION ==================== */
.counter-animate {
    font-variant-numeric: tabular-nums;
    display: inline-block;
    min-width: fit-content;
}

/* ==================== IMAGE FADE IN ==================== */
img[data-src] { opacity: 0; transition: opacity 0.5s ease; }
img.loaded { opacity: 1; }

/* All images get subtle optimization */
img {
    image-rendering: -webkit-optimize-contrast;
}

/* ==================== LINK & INTERACTIVE ELEMENTS ==================== */
a, [role="link"], input[type="checkbox"], input[type="radio"], 
select, textarea, [tabindex] {
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    transform: translateZ(0);
}

/* Focus visible for accessibility */
:focus-visible {
    outline: 2px solid #a855f7;
    outline-offset: 2px;
}

/* ==================== TABLE OPTIMIZATION ==================== */
table {
    table-layout: fixed;
    border-collapse: collapse;
}
th, td {
    text-overflow: ellipsis;
    overflow: hidden;
}

/* ==================== LIST/GRID OPTIMIZATION ==================== */
.grid-container, .list-container {
    contain: content;
}

/* Card grid optimization */
.card-grid {
    display: contents;
}
.card-grid > * {
    contain: layout style;
}

/* ==================== MODAL/OVERLAY SMOOTHNESS ==================== */
.modal-overlay, .overlay {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-content, .dialog {
    transform: translateZ(0);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==================== TOOLTIP SMOOTHNESS ==================== */
[data-tooltip] {
    position: relative;
}
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-5px) translateZ(0);
    padding: 6px 12px;
    background: rgba(0,0,0,.9);
    color: white;
    font-size: 12px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(-10px) translateZ(0);
}

/* ==================== RESPONSIVE PERFORMANCE ==================== */
@media (max-width: 768px) {
    .orb, .particle-orb, .float-element, .nebula {
        animation-duration: 30s !important;
    }
    
    /* Reduce blur on mobile for performance */
    .backdrop-filter-blur {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
    
    .hover-lift:hover {
        transform: translateY(-2px) translateZ(0);
        box-shadow: 0 8px 24px rgba(0,0,0,.2);
    }
    
    /* Fewer stagger delays on mobile */
    .stagger-5, .stagger-6, .stagger-7, .stagger-8, 
    .stagger-9, .stagger-10 {
        transition-delay: 0.3s;
    }
}

@media (max-width: 480px) {
    .card-enter { 
        transition-duration: 0.3s; 
    }
    
    /* Disable heavy effects on small screens */
    .orb, .nebula, .bg-effects {
        display: none;
    }
}

/* Hi-DPI optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    body {
        -webkit-font-smoothing: subpixel-antialiased;
    }
}

/* ==================== PRINT STYLES ==================== */
@media print {
    .navbar, .orb, .particle, .bg-effects, .theme-toggle,
    button:not(.btn-print), .smoothness-only { 
        display: none !important; 
    }
    body { 
        background: white !important; 
        color: black !important; 
    }
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* ==================== DARK/LIGHT THEME TRANSITION ==================== */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease !important;
}

/* ==================== LOADING SPINNER ==================== */
.spinner {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.loading-dots span {
    animation: loadingDot 1.4s infinite ease-in-out both;
}
.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }
@keyframes loadingDot {
    0%, 80%, 100% { transform: scale(0); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

/* ==================== PULSE ANIMATION (for notifications) ==================== */
.pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ==================== SHAKE ANIMATION (for errors) ==================== */
.shake {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}