/* Performance optimized critical CSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    overflow-x: hidden;
}

/* Loading animation */
.loading-top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #CDF140, #7BB42A, #97D433);
    z-index: 9999;
    transform: translateX(-100%);
    animation: loadingBar 1.5s ease-in-out infinite;
}

@keyframes loadingBar {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(0); }
    100% { transform: translateX(100%); }
}

/* Header styles */
.header {
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    background: rgba(255, 255, 255, 0.8);
}

.dark .header {
    background: rgba(17, 17, 17, 0.8);
}

/* Ensure content doesn't jump */
main {
    min-height: 100vh;
}

/* Lazy loading placeholder */
.lazy {
    opacity: 0;
    transition: opacity 0.3s;
}

.lazy.loaded {
    opacity: 1;
}

/* Performance optimizations */
img {
    max-width: 100%;
    height: auto;
}

/* Reduce layout shifts */
.aspect-ratio {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
}

.aspect-ratio > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Smooth transitions */
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* Improve font rendering */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Content visibility for performance */
.content-visibility-auto {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
}