performance-optimizations.css

/* ============================================================================
   PERFORMANCE OPTIMIZATIONS FOR MAIN-THREAD WORK REDUCTION
   Apply these changes to reduce Style & Layout time from 3.8s
   ============================================================================ */

/* 1. DEFER NON-CRITICAL ANIMATIONS - Add to sections below fold */
.library, .about, .faq {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}

/* 2. OPTIMIZE HERO ANIMATIONS - Reduce animation complexity */
.hero-title, .hero-subtitle, .hero-author, .hero-blessing {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* 3. OPTIMIZE PARTICLES - Disable heavy JavaScript particles, use pure CSS */
.particles-container {
    display: none; /* Disable JavaScript particles */
}

/* FIX CLS: Apply stars directly to .hero-bg without ::after to prevent 0.096 layout shift */
.hero-bg {
    background-image: 
        var(--temple-gradient),
        radial-gradient(2px 2px at 20% 30%, rgba(232, 196, 104, 0.2), transparent),
        radial-gradient(2px 2px at 60% 70%, rgba(232, 196, 104, 0.15), transparent),
        radial-gradient(1px 1px at 50% 50%, rgba(232, 196, 104, 0.25), transparent),
        radial-gradient(1px 1px at 30% 80%, rgba(232, 196, 104, 0.2), transparent),
        radial-gradient(2px 2px at 90% 10%, rgba(232, 196, 104, 0.15), transparent),
        radial-gradient(1px 1px at 40% 40%, rgba(232, 196, 104, 0.18), transparent),
        radial-gradient(2px 2px at 70% 20%, rgba(232, 196, 104, 0.22), transparent),
        radial-gradient(1px 1px at 10% 60%, rgba(232, 196, 104, 0.2), transparent);
    background-size: auto, 200px 200px, 200px 200px, 200px 200px, 200px 200px, 200px 200px, 200px 200px, 200px 200px, 200px 200px;
    background-repeat: no-repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat;
}

/* 4. REDUCE TRANSFORM ANIMATIONS - Use opacity instead where possible */
.divine-image {
    transition: opacity 0.3s ease !important;
    transform: none !important;
}

.divine-image:hover {
    opacity: 0.9 !important;
    transform: none !important;
}

/* 5. DISABLE CONTINUOUS ANIMATIONS */
@keyframes divineGlowIdle {
    0%, 100% { box-shadow: 0 0 20px var(--accent-color); }
}

@keyframes divineGlow {
    0%, 100% { box-shadow: 0 0 25px var(--accent-color); }
}

@keyframes particleFloat {
    from { opacity: 0; }
    to { opacity: 0; }
}

/* 6. OPTIMIZE BOOK CARDS - Remove transforms on hover */
.book-card {
    transition: box-shadow 0.3s ease !important;
    transform: none !important;
    will-change: auto !important;
}

.book-card:hover {
    transform: none !important;
}

/* 7. REDUCE COMPLEX SELECTORS - Simplify descendant selectors */
.faq-block {
    contain: layout style paint;
}

/* 8. OPTIMIZE SCROLL ARROW */
.scroll-arrow {
    animation: bounceDown 3s infinite ease-in-out !important; /* Slower animation */
}

@keyframes bounceDown {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

/* 9. DEFER OFF-SCREEN CONTENT */
.footer {
    content-visibility: auto;
}

/* 10. OPTIMIZE NAV TRANSITIONS */
.nav-menu a {
    transition: color 0.2s ease !important;
}

/* 11. REDUCE REFLOWS - Lock dimensions */
.hero {
    min-height: 100vh;
    height: auto;
}

.hero-content {
    min-height: 300px;
}

/* 12. OPTIMIZE DIVINE PRESENCE LAYOUT */
.divine-presence {
    contain: layout;
}

/* 13. DISABLE SHIMMER EFFECT (HIGH COST) */
.scroll-prompt::before {
    animation: none !important;
}

/* 14. OPTIMIZE SHAPES */
.custom-shape-divider-bottom-1685027373 {
    will-change: auto;
    transform: translateZ(0);
}

/* 15. REDUCE PAINT COMPLEXITY */
.book-card {
    contain: layout paint;
}

/* 16. OPTIMIZE FAQ ANIMATIONS */
.faq-block {
    transition: none !important;
}

.faq-content {
    transition: none !important;
}

/* 17. DISABLE FLOAT ANIMATION */
@keyframes float {
    0%, 100% { transform: translate(-50%, 0); }
}

/* 18. CRITICAL: Remove will-change from static elements */
.hero-bg, .hero-title, .hero-subtitle, .hero-author, .hero-blessing {
    will-change: auto !important;
}

/* 19. BATCH LAYOUT CHANGES */
section {
    contain: layout;
}

/* 20. REDUCE GRADIENT COMPLEXITY */
.card-bg-gradient {
    background: var(--card-bg) !important;
}

/* ===== CLS FIXES ===== */

/* Fix 21: Prevent list item shifts during font load */
li {
    min-height: 1.6em;
    line-height: 1.6;
}

nav li, .nav-menu li {
    min-height: 1.6rem;
    contain: layout;
}

/* Fix 22: Lock FAQ list items */
.faq-content li {
    min-height: 1.8em;
}

/* Fix 23: Prevent nav menu shifts */
.nav-menu {
    min-height: 1.6rem;
    contain: layout style;
}

/* Fix 24: Lock header height */
.header {
    min-height: 80px;
    contain: layout;
}

/* Fix 25: Prevent book card shifts */
.book-card {
    min-height: 400px;
}

/* Fix 26: Lock footer dimensions */
.footer {
    min-height: 200px;
    contain: layout;
}