/**
 * Ultra-Premium Performance Optimizations
 * Power of Knowledge - AI-Powered Academic Journal
 * 
 * Critical CSS optimizations and GPU acceleration hints
 * for the Quantum Twilight theme
 */

/* ============================================
   GPU Acceleration & Will-Change Hints
   ============================================ */

/* Prepare elements for animations */
.up-glass-card,
.up-ai-tool-card,
.stat-card,
.submission-card,
.card,
.up-btn,
.btn,
.dash-btn {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Hero background optimization */
.up-hero-bg {
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

/* ============================================
   Reduce Layout Shifts
   ============================================ */

/* Reserve space for images */
img {
    aspect-ratio: attr(width) / attr(height);
    height: auto;
    max-width: 100%;
}

/* Reserve space for common components */
.up-hero {
    min-height: 60vh;
}

.stat-card {
    min-height: 100px;
}

.up-glass-card {
    min-height: 50px;
}

/* Font display optimization - fonts are loaded via Google Fonts with display=swap */
/* This is handled in the Google Fonts URL: &display=swap */

/* ============================================
   Critical Rendering Path
   ============================================ */

/* Above-the-fold critical styles */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Reduce repaints on scroll */
* {
    box-sizing: border-box;
}

/* ============================================
   Loading States
   ============================================ */

/* Skeleton loading placeholder */
.up-skeleton {
    background: linear-gradient(90deg,
            var(--graphite, #252540) 0%,
            var(--slate-dark, #2d2d4a) 50%,
            var(--graphite, #252540) 100%);
    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;
    }
}

.up-skeleton-text {
    height: 1em;
    margin-bottom: 0.5em;
}

.up-skeleton-title {
    height: 1.5em;
    width: 70%;
    margin-bottom: 1em;
}

.up-skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

/* ============================================
   Lazy Loading Optimization
   ============================================ */

/* Content visibility for off-screen content */
.up-lazy-section {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
}

/* Image lazy loading visual */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease;
}

img[loading="lazy"].loaded,
img[loading="lazy"]:not([src=""]) {
    opacity: 1;
}

/* ============================================
   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;
    }

    .up-hero-particle,
    .pulse-glow,
    .up-shimmer {
        display: none !important;
    }
}

/* ============================================
   Print Optimization
   ============================================ */

@media print {

    .up-hero-bg,
    .up-hero-particle,
    .aria-fab,
    .aria-fab-button,
    .up-btn,
    .btn,
    nav,
    footer,
    .dashboard-sidebar {
        display: none !important;
    }

    body {
        background: white !important;
        color: black !important;
    }

    .up-glass-card,
    .stat-card,
    .card {
        background: white !important;
        border: 1px solid #ccc !important;
        box-shadow: none !important;
    }

    a {
        color: black !important;
        text-decoration: underline;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
    }
}

/* ============================================
   Touch Device Optimizations
   ============================================ */

@media (hover: none) {

    /* Remove hover effects on touch devices */
    .up-glass-card:hover,
    .stat-card:hover,
    .submission-card:hover {
        transform: none;
        box-shadow: none;
    }

    /* Larger touch targets */
    .up-btn,
    .btn,
    .nav-item {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ============================================
   Dark Mode Enforcement
   ============================================ */

/* Prevent browser dark mode from breaking our theme */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
    }
}

/* Force our dark theme colors */
.ultra-premium,
.dashboard-body {
    color-scheme: dark;
    forced-color-adjust: none;
}

/* ============================================
   Contain Layout for Performance
   ============================================ */

.dashboard-sidebar {
    contain: layout style;
}

.dashboard-content {
    contain: layout;
}

.stat-card,
.up-glass-card {
    contain: layout style paint;
}

/* ============================================
   Efficient Scrolling
   ============================================ */

/* Optimize scrolling containers */
.sidebar-nav,
.dashboard-content,
main {
    overflow-anchor: auto;
}

/* Smooth scrollbar for webkit */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--void-black, #0a0a0f);
}

::-webkit-scrollbar-thumb {
    background: var(--graphite, #252540);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--slate-dark, #2d2d4a);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--graphite, #252540) var(--void-black, #0a0a0f);
}