/** * Critical animation styling that must be loaded in the before any other styles * to prevent the flash of unstyled content before animations */ /* FOUC Prevention - Hide animation elements initially */ .logo-letter, .hero-heading, .hero-statement { opacity: 0; /* Initially hidden */ will-change: transform, opacity; visibility: visible; /* Keep in layout flow */ } /* edlau-text elements start hidden for initial fade-in animation */ .edlau-text, .edlau-text-reverse { opacity: 0; /* Initially hidden for GSAP fade-in */ visibility: visible; will-change: transform, opacity; } /* Content sections flash prevention */ section:not(.wp-block-nexus-blocks-hero) { opacity: 0.1; /* Slightly visible to prevent complete flash */ will-change: transform, opacity; visibility: visible; } /* Content elements within sections start hidden */ section:not(.wp-block-nexus-blocks-hero) img, section:not(.wp-block-nexus-blocks-hero) h1, section:not(.wp-block-nexus-blocks-hero) h2, section:not(.wp-block-nexus-blocks-hero) h3, section:not(.wp-block-nexus-blocks-hero) h4, section:not(.wp-block-nexus-blocks-hero) h5, section:not(.wp-block-nexus-blocks-hero) h6, section:not(.wp-block-nexus-blocks-hero) .master-richtext, section:not(.wp-block-nexus-blocks-hero) p, section:not(.wp-block-nexus-blocks-hero) a, section:not(.wp-block-nexus-blocks-hero) button { opacity: 0; will-change: transform, opacity; } /* IMMEDIATE OVERRIDE - Remove !important from initial hiding */ /* This allows our JS and CSS fallbacks to work properly */ /* IMMEDIATE OVERRIDE - Remove !important from initial hiding */ /* This allows our JS and CSS fallbacks to work properly */ /* Override for when animations are ready */ body.animations-loaded section:not(.wp-block-nexus-blocks-hero) { opacity: 1 !important; } /* Override for when animations fail */ body.animations-failed section:not(.wp-block-nexus-blocks-hero), body.animations-failed section:not(.wp-block-nexus-blocks-hero) * { opacity: 1 !important; transform: none !important; } /* CSS-only fallback - show content after 4 seconds regardless of JS */ @keyframes emergency-show { to { opacity: 1 !important; } } /* IMMEDIATE FALLBACK - show content after just 1 second */ @keyframes quick-show { to { opacity: 1 !important; transform: none !important; } } /* Apply quick animation to all sections after 1s delay */ section:not(.wp-block-nexus-blocks-hero) { animation: quick-show 0.3s ease-out 1s forwards, emergency-show 0.5s ease-out 4s forwards; } /* Apply quick animation to content elements after 1.2s delay */ section:not(.wp-block-nexus-blocks-hero) img, section:not(.wp-block-nexus-blocks-hero) h1, section:not(.wp-block-nexus-blocks-hero) h2, section:not(.wp-block-nexus-blocks-hero) h3, section:not(.wp-block-nexus-blocks-hero) h4, section:not(.wp-block-nexus-blocks-hero) h5, section:not(.wp-block-nexus-blocks-hero) h6, section:not(.wp-block-nexus-blocks-hero) .master-richtext, section:not(.wp-block-nexus-blocks-hero) p, section:not(.wp-block-nexus-blocks-hero) a, section:not(.wp-block-nexus-blocks-hero) button { animation: quick-show 0.2s ease-out 1.2s forwards, emergency-show 0.3s ease-out 4.5s forwards; } /* NUCLEAR OPTION - show everything after 2 seconds no matter what */ @keyframes nuclear-show { to { opacity: 1 !important; visibility: visible !important; transform: none !important; } } /* Apply nuclear option to ALL elements inside sections */ section:not(.wp-block-nexus-blocks-hero), section:not(.wp-block-nexus-blocks-hero) *, section:not(.wp-block-nexus-blocks-hero) .master-richtext, section:not(.wp-block-nexus-blocks-hero) .master-richtext *, section:not(.wp-block-nexus-blocks-hero) div, section:not(.wp-block-nexus-blocks-hero) span, section:not(.wp-block-nexus-blocks-hero) strong, section:not(.wp-block-nexus-blocks-hero) em { animation: nuclear-show 0.1s ease-out 2s forwards; } /* Show edlau-text elements once animation is ready or as fallback */ .gsap-hero-container.animation-ready .edlau-text, .gsap-hero-container.animation-ready .edlau-text-reverse { opacity: 1; } /* Triangle and circle should be visible by default */ .triangle-hover, .circle-hover { opacity: 1; visibility: visible; transform-origin: center center; will-change: transform, opacity; } /* SECTION FLASH PREVENTION - Critical for preventing flashing animations */ section:not(.wp-block-nexus-blocks-hero) { opacity: 0.85; /* Slightly transparent initially to prevent harsh flash */ will-change: transform, opacity; transition: opacity 0.1s ease; /* Very quick transition */ } /* Show sections immediately if animations fail to load */ .no-js section:not(.wp-block-nexus-blocks-hero), body.animations-disabled section:not(.wp-block-nexus-blocks-hero) { opacity: 1 !important; } /* Portrait image and graphic elements should be visible by default */ .hero-portrait-image, .graphic_one { opacity: 1; visibility: visible; transform-origin: center center; will-change: transform, opacity; } /* Container should be visible but with invisible content until JS loads */ .gsap-hero-container { opacity: 1; visibility: visible; } /* Show elements once JS adds the animation-ready class */ .gsap-hero-container.animation-ready .logo-letter, .gsap-hero-container.animation-ready .hero-heading, .gsap-hero-container.animation-ready .hero-statement { opacity: 1; visibility: visible; } /* edlau-text elements are now part of the fade-in animation system */ /* Critical fallback - show elements after 3 seconds if JS fails */ @keyframes ensureVisibility { to { opacity: 1; visibility: visible; } } .logo-letter, .hero-heading, .hero-statement, .edlau-text, .edlau-text-reverse { animation: ensureVisibility 0s 3s forwards; } /* Optimize animation performance */ .gsap-hero-container { transform-style: flat; backface-visibility: hidden; perspective: 1000px; transform: translateZ(0); } /* Better browser paint performance for animated elements */ .logo-letter, .hero-heading, .hero-statement, .triangle-hover, .circle-hover, .hero-portrait-image, .graphic_one { will-change: transform, opacity; transform: translateZ(0); backface-visibility: hidden; }