/* ED Animation Engine — Frontend CSS v1.2.0 */ /* ---------------------------------------------------------------- CSS custom property — theme can override this one var to change the curtain / image-reveal panel colour. BTE uses --bte-navy (#07093a). Springs-style sites use white. ---------------------------------------------------------------- */ :root { --edae-reveal-color: var(--bte-navy, #07093a); --edae-curtain-color: var(--bte-navy, #07093a); } /* ---- Page transition curtain ---- */ #edae-curtain { position: fixed; inset: 0; z-index: 99999; background-color: var(--edae-curtain-color); display: none; pointer-events: none; will-change: transform; } /* ---- Barba containers ---- */ [data-barba="wrapper"] { overflow: hidden; } [data-barba="container"] { width: 100%; min-height: 50vh; /* prevent layout collapse during transition */ } /* ---------------------------------------------------------------- IMAGE REVEAL The .edae-img-wrap is injected by edae-image-reveal.js. We set overflow:hidden here too as a CSS safety net. ---------------------------------------------------------------- */ .edae-img-wrap { overflow: hidden; position: relative; } .edae-img-panel { position: absolute; inset: 0; z-index: 2; background: var(--edae-reveal-color); pointer-events: none; will-change: transform; } /* Images inside a reveal wrap must not overflow */ .edae-img-wrap img, .edae-img-wrap video { display: block; width: 100%; will-change: transform, opacity; } /* Final state — panel removed by JS after animation */ .edae-img-wrap .is-revealed { will-change: auto; } /* ---------------------------------------------------------------- SPLIT TEXT — line / word spans injected by edae-split-text.js ---------------------------------------------------------------- */ .bte-split__line { overflow: hidden; display: block; } .bte-split__line-inner { display: block; will-change: transform, opacity; } .bte-split__word { display: inline-block; white-space: nowrap; } /* ---------------------------------------------------------------- SECTION TIMELINE Sections with data-edae-section-tl start invisible; JS fires them in sequence as they scroll into view. We only apply this when JS is available (js class on ). ---------------------------------------------------------------- */ .js [data-edae-section-tl] > *:not(style):not(script) { /* Don't hide children — the JS sets opacity/transform directly */ } /* has-entered class added by JS — can be used for CSS-only follow-ups */ [data-edae-section-tl].has-entered { /* optional hook */ } /* ---------------------------------------------------------------- SCROLL REVEALS — base state Only hide elements once GSAP is confirmed ready. edae-core.js adds .gsap-ready to on init so elements are never invisible if the script fails or loads slowly. ---------------------------------------------------------------- */ .gsap-ready [data-edae-reveal], .gsap-ready [data-bte-reveal] { opacity: 0; transform: translateY(20px); } /* Once GSAP animates them in, is-visible is added */ [data-edae-reveal].is-visible, [data-bte-reveal].is-visible { opacity: 1 !important; transform: none !important; } /* ---------------------------------------------------------------- CUSTOM CURSOR ---------------------------------------------------------------- */ #edae-cursor { position: fixed; top: 0; left: 0; z-index: 99998; pointer-events: none; opacity: 0; transition: opacity 0.3s; will-change: transform; } /* Red equilateral triangle (base = width, height = width * 0.866), centred on the pointer via negative margins so GSAP owns the spin. */ .edae-cursor__tri { position: absolute; left: 0; top: 0; width: 20px; height: 17px; margin-left: -10px; margin-top: -8.5px; background: var(--bte-red, #e5173f); clip-path: polygon(50% 0%, 100% 100%, 0% 100%); filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.85)); } #edae-cursor.is-hovering .edae-cursor__tri { filter: drop-shadow(0 0 3px rgba(229, 23, 63, 0.6)); } /* ---------------------------------------------------------------- REDUCED MOTION — disable all transitions ---------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { #edae-curtain, #edae-cursor, .edae-img-panel { display: none !important; } [data-barba="container"] { transition: none !important; animation: none !important; } .gsap-ready [data-edae-reveal], .gsap-ready [data-bte-reveal] { opacity: 1 !important; transform: none !important; } .edae-img-wrap img, .edae-img-wrap video { opacity: 1 !important; transform: none !important; } }