:root { --curtain-dur: 1.15s; --curtain-ease: cubic-bezier(.22,.61,.36,1); } .theatre { position: relative; margin: 0 auto; width: 100%; height: 90vh; overflow: hidden; z-index: 100; pointer-events: auto; } .theatre.released { pointer-events: none; z-index: 0; } .curtain-left, .curtain-right { position: absolute; top: -300px; bottom: 0; width: 61%; background-color: rgba(158, 22, 98, 0.8); background-image: linear-gradient( 90deg, rgba(255, 160, 220, 0.75) 20%, rgba(220, 90, 180, 0.8) 40%, rgba(190, 60, 150, 0.85) 60%, rgba(255, 160, 220, 0.75) 80%, rgba(230, 100, 180, 0.8) 100% ); background-size: 90px; transition: transform var(--curtain-dur) var(--curtain-ease); clip-path: url(#curtainScallopSubtle2); opacity: 0.5; will-change: transform; backface-visibility: hidden; transform: translate3d(0,0,0); } .curtain-left::after, .curtain-right::after { content: ""; position: absolute; left: 0; right: 0; height: 26px; bottom: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,0.20), rgba(0,0,0,0)); filter: blur(1px); opacity: .6; mix-blend-mode: multiply; } .curtain-left { left: -10%; filter: drop-shadow(1px 6px 6px rgba(0, 0, 0, 0.6)); box-shadow: -2px 0px 6px rgba(255, 255, 255, 0.35) inset, 0px 320px 40px rgba(0, 0, 0, 0.5) inset; transform-origin: 50% bottom; } .curtain-right { right: -10%; filter: drop-shadow(1px 6px 6px rgba(0, 0, 0, 0.6)); box-shadow: 2px 0px 6px rgba(255, 255, 255, 0.35) inset, -0px 320px 40px rgba(0, 0, 0, 0.5) inset; transform-origin: 50% bottom; } .theatre.opened .curtain-left { transform: translate3d(-90%,0,0) rotate(10deg); } .theatre.opened .curtain-right { transform: translate3d( 90%,0,0) rotate(-10deg); } .theatre.opened .curtain-right { transition-delay: 40ms; } @media (max-width: 940px) { .curtain-left, .curtain-right { width: 70%; background-size: 60px; } .theatre.opened .curtain-left { transform: translate3d(-104%,0,0) rotate(8deg); } .theatre.opened .curtain-right { transform: translate3d( 104%,0,0) rotate(-8deg); } .curtain-left::after, .curtain-right::after { height: 20px; } } @media (prefers-reduced-motion: reduce) { .curtain-left, .curtain-right { transition: none; } } const theatre = document.getElementById('curtainTheatre'); const curtains = theatre.querySelectorAll('.curtain-left, .curtain-right'); let hasOpened = false; function releaseInteraction() { theatre.classList.add('released'); theatre.setAttribute('aria-hidden', 'true'); theatre.setAttribute('inert', ''); } function openOnce() { if (hasOpened) return; hasOpened = true; theatre.classList.add('opened'); let done = 0; const onEnd = (e) => { if (e.propertyName !== 'transform') return; done++; if (done >= curtains.length) { curtains.forEach(c => c.removeEventListener('transitionend', onEnd)); releaseInteraction(); } }; curtains.forEach(c => c.addEventListener('transitionend', onEnd)); const cs = getComputedStyle(curtains[0]); const durStr = cs.transitionDuration.split(',')[0].trim(); const durMs = durStr.endsWith('ms') ? parseFloat(durStr) : parseFloat(durStr) * 1500; setTimeout(releaseInteraction, Math.max(600, durMs + 120)); } function waitForSlider() { return new Promise((resolve) => { const el = document.getElementById('slider'); if (!el) { resolve(); return; } if (window.jQuery) { const $ = window.jQuery; $('#slider').one('revolution.slide.onloaded', () => resolve()); for (const k in window) { if (k.startsWith('revapi') && window[k] && typeof window[k].on === 'function') { window[k].one('revolution.slide.onloaded', resolve); return; } } } const mo = new MutationObserver(() => { if (el.classList.contains('rs-initialized') || el.querySelector('.rev_slider_wrapper')) { mo.disconnect(); resolve(); } }); mo.observe(el, { attributes: true, childList: true, subtree: true }); setTimeout(() => { mo.disconnect(); resolve(); }, 1000); }); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => { waitForSlider().then(openOnce); }); } else { waitForSlider().then(openOnce); }