/*
 * MYTHICAL ARCHIVES - Performance Optimizations
 * Version: 3.0.0
 * Core Web Vitals optimizations for LCP, CLS, FID
 */

/* ========================================
   CONTENT LAYOUT SHIFT (CLS) PREVENTION
   ======================================== */

/* Reserve space for images to prevent layout shifts */
img {
    height: auto;
    max-width: 100%;
}

/* Aspect ratio boxes for common image containers */
.post-thumbnail,
.ct-image-container,
.realm-gate-bg,
.related-creature-image {
    position: relative;
    overflow: hidden;
}

.post-thumbnail::before,
.ct-image-container::before {
    content: '';
    display: block;
    padding-top: 56.25%; /* 16:9 aspect ratio */
}

.post-thumbnail img,
.ct-image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Prevent font swap flash */
.mythical-theme {
    font-synthesis: none;
}

/* Reserve header height */
header[data-id="type-1"],
.ct-header,
#masthead {
    min-height: 70px;
}

/* Reserve footer height */
footer[data-id="type-1"],
.ct-footer,
.site-footer {
    min-height: 100px;
}

/* ========================================
   LARGEST CONTENTFUL PAINT (LCP) OPTIMIZATION
   ======================================== */

/* Prioritize above-the-fold content */
.portal-hero {
    contain: layout style;
}

/* Optimize portal ring animations - use GPU */
.portal-ring {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Optimize fog layers */
.fog-layer {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Optimize rune animations */
.rune {
    will-change: transform, opacity;
    transform: translateZ(0);
}

/* Font display optimization */
@font-face {
    font-display: swap;
}

/* ========================================
   FIRST INPUT DELAY (FID) OPTIMIZATION
   ======================================== */

/* Reduce paint complexity on interactive elements */
a, button, .btn-ethereal, input, textarea, select {
    will-change: auto;
    contain: layout;
}

/* Optimize hover states */
.realm-gate,
.domain-card,
.vault-card,
.related-creature-card {
    will-change: transform;
    transform: translateZ(0);
}

/* Optimize scroll performance */
.mythical-cosmos,
#mythical-particles {
    will-change: transform;
    transform: translateZ(0);
    pointer-events: none;
}

/* ========================================
   GPU ACCELERATION & COMPOSITING
   ======================================== */

/* Force GPU layer for animations */
.portal-ring-container,
.portal-content,
.portal-fog,
.portal-runes {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Particle canvas optimization */
#mythical-particles canvas,
.webgl-bg {
    will-change: contents;
    transform: translateZ(0);
}

/* ========================================
   CONTENT VISIBILITY OPTIMIZATION
   ======================================== */

/* Use content-visibility for below-fold sections */
.mythical-section,
.chronicle-section,
.map-section,
.journey-cta,
.related-creatures {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}

/* ========================================
   ANIMATION PERFORMANCE
   ======================================== */

/* Use transform instead of changing layout properties */
@keyframes portalRotate {
    from { transform: rotate(0deg) translateZ(0); }
    to { transform: rotate(360deg) translateZ(0); }
}

@keyframes portalPulse {
    0%, 100% { transform: scale(1) translateZ(0); opacity: 0.5; }
    50% { transform: scale(1.1) translateZ(0); opacity: 0.8; }
}

/* Reduce motion for users who prefer it */
@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;
    }
    
    .portal-ring,
    .fog-layer,
    .rune,
    .portal-sigil,
    .loader-rune,
    .loader-ring {
        animation: none !important;
    }
    
    .portal-ring-core {
        animation: none !important;
    }
    
    #mythical-particles,
    .webgl-bg,
    .myth-cursor,
    .myth-cursor-trail {
        display: none !important;
    }
}

/* ========================================
   CRITICAL RENDERING PATH
   ======================================== */

/* Minimize main-thread work during initial render */
body.mythical-theme {
    /* Prevent FOUC */
    opacity: 1;
}

/* Defer non-critical styles */
.comments-area,
.related-posts,
.sidebar {
    content-visibility: auto;
    contain-intrinsic-size: auto 300px;
}

/* ========================================
   FONT LOADING OPTIMIZATION
   ======================================== */

/* System font stack fallback for instant text rendering */
body {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Cinzel', Georgia, serif;
}

.portal-title,
.section-title,
.creature-title {
    font-family: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
}

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

/* Lazy loading optimization */
img[loading="lazy"] {
    background-color: var(--myth-bg-tertiary);
}

/* Native lazy loading hint */
img:not([loading]) {
    loading: lazy;
}

/* ========================================
   SCROLLING PERFORMANCE
   ======================================== */

/* Smooth scroll with performance consideration */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* Improve scroll performance on fixed elements */
.mythical-cosmos,
#mythical-particles,
.myth-cursor,
.myth-cursor-trail,
.myth-audio-controls,
.theme-toggle {
    position: fixed;
    contain: strict;
}

/* ========================================
   PAINT & LAYOUT CONTAINMENT
   ======================================== */

/* Contain layout changes to specific areas */
article,
.widget,
.comment {
    contain: layout style;
}

/* Isolate complex visual effects */
.realm-gate,
.domain-card,
.vault-card,
.power-card,
.attribute-card {
    isolation: isolate;
}

/* ========================================
   Z-INDEX STACKING CONTEXT
   ======================================== */

/* Create efficient stacking contexts */
.mythical-cosmos { z-index: -2; }
#mythical-particles { z-index: -1; }
.portal-hero { z-index: 1; }
.myth-cursor { z-index: 10000; }
.myth-cursor-trail { z-index: 9999; }
.mythical-loader { z-index: 99999; }
.myth-audio-controls { z-index: 1000; }
.theme-toggle { z-index: 1000; }