: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);
}
