/* Critical Performance CSS - CloudTusker
 * Ultra-optimized for 100% mobile & desktop performance
 * Minimal, efficient, responsive
 */

/* CSS Custom Properties for Performance */
:root {
    --color-primary: #3b82f6;
    --color-secondary: #06b6d4;
    --color-dark: #020617;
    --color-slate: #0f172a;
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Performance: Hardware Acceleration */
.hw-accelerate {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Critical: Font Loading Optimization */
.fonts-loading {
    font-family: system-ui, -apple-system, sans-serif;
}

.fonts-loaded {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Performance: Reduce Paint Areas */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Optimize Images */
img {
    max-width: 100%;
    height: auto;
    display: block;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Lazy Load Placeholder */
img[data-src] {
    background: linear-gradient(90deg, #1e293b 0%, #334155 50%, #1e293b 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

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

/* Performance: Will-Change for Animations */
.animate-float,
.animate-pulse-glow,
.gradient-text {
    will-change: transform, opacity;
}

/* Optimize Scrolling */
* {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Mobile-First Responsive Typography */
html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Touch Target Sizes (Minimum 44x44px) */
button,
a,
input,
select,
textarea {
    min-height: 44px;
    min-width: 44px;
}

/* Optimize Touch Interactions */
button,
a {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Reduce Layout Shifts */
.container {
    contain: layout style paint;
}

/* Performance: GPU Layers */
.card,
.button,
.hero-section {
    transform: translateZ(0);
    will-change: transform;
}

/* Efficient Gradients */
.gradient-bg {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    background-attachment: fixed;
}

/* Mobile Optimization: Reduce Complexity */
@media (max-width: 768px) {
    * {
        animation-duration: 0.2s !important;
    }

    .complex-animation {
        animation: none !important;
    }
}

/* Critical: Above-the-Fold Content */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Optimize Fonts Loading */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Inter'), local('Inter-Regular');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Inter Bold'), local('Inter-Bold');
}

/* Contain Layout Changes */
section {
    contain: layout;
}

/* Optimize Hover States */
@media (hover: hover) {
    .hover\:scale-105:hover {
        transform: scale(1.05);
        transition: transform var(--transition-fast);
    }
}

/* Performance: Reduce Repaints */
.no-repaint {
    contain: strict;
    content-visibility: auto;
}

/* Efficient Backdrop Blur */
.backdrop-blur {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Critical Path CSS - Inline This */
body {
    margin: 0;
    padding: 0;
    background-color: var(--color-dark);
    color: white;
    font-family: system-ui, -apple-system, sans-serif;
    line-height: 1.6;
}

/* Responsive Grid System */
.grid-responsive {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

/* Mobile Navigation Performance */
@media (max-width: 768px) {
    nav {
        position: fixed;
        transform: translateZ(0);
        will-change: transform;
    }
}

/* Optimize Shadows */
.shadow-efficient {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Performance: Intersection Observer Targets */
.lazy-section {
    content-visibility: auto;
    contain-intrinsic-size: 500px;
}

/* Critical: Reduce CLS (Cumulative Layout Shift) */
.ratio-16-9 {
    aspect-ratio: 16 / 9;
}

.ratio-4-3 {
    aspect-ratio: 4 / 3;
}

.ratio-1-1 {
    aspect-ratio: 1 / 1;
}

/* Mobile-First Breakpoints */
/* xs: 0-639px (default) */
/* sm: 640px+ */
@media (min-width: 640px) {
    html { font-size: 16px; }
}

/* md: 768px+ */
@media (min-width: 768px) {
    html { font-size: 16px; }
}

/* lg: 1024px+ */
@media (min-width: 1024px) {
    html { font-size: 17px; }
}

/* xl: 1280px+ */
@media (min-width: 1280px) {
    html { font-size: 18px; }
}

/* 2xl: 1536px+ */
@media (min-width: 1536px) {
    html { font-size: 18px; }
}

/* Optimize Flexbox */
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Efficient Button Styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all var(--transition-fast);
    transform: translateZ(0);
    cursor: pointer;
    border: none;
}

.btn:active {
    transform: scale(0.98) translateZ(0);
}

/* Performance: Efficient Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateY(0) translateZ(0);
    }
}

.fade-in {
    animation: fadeIn 0.3s ease-out;
}

/* Critical: Prevent FOUC */
.js-enabled [data-js-hidden] {
    display: none;
}

/* Optimize for Dark Mode */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
    }
}

/* Performance: CSS Containment */
.contain-strict {
    contain: strict;
}

.contain-content {
    contain: content;
}

.contain-layout {
    contain: layout;
}

/* Mobile Menu Optimization */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform var(--transition-normal);
    will-change: transform;
}

.mobile-menu.open {
    transform: translateX(0);
}

/* Loading State */
.loading {
    pointer-events: none;
    opacity: 0.6;
    cursor: wait;
}

/* Skeleton Loader */
.skeleton {
    background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 0.5rem;
}

/* Optimize SVG Icons */
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Efficient Card Component */
.card {
    background: rgba(30, 41, 59, 0.5);
    border-radius: 1rem;
    padding: 1.5rem;
    transition: transform var(--transition-fast);
}

/* Print Styles */
@media print {
    * {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a, a:visited {
        text-decoration: underline;
    }

    pre, blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr, img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }
}

/* Accessibility: Focus States */
*:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    :root {
        --color-primary: #60a5fa;
        --color-secondary: #22d3ee;
    }
}

/* Performance: Efficient Spacing */
.space-y-4 > * + * {
    margin-top: 1rem;
}

.space-y-6 > * + * {
    margin-top: 1.5rem;
}

/* Efficient Max Width Container */
.container-max {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .container-max {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .container-max {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}