/* door-reveal: a pair of doors opens as the section reaches the screen and shows what is behind it (shared part, Manager 3,
   2026-10-27). First use: Miss Saigon "Before you come in" (round #29). Nabil ~21:40: "we should have some sort of door opening
   animation here with the vietnam culture icons or smth ykwim lets be creative". Two looks, pick one per page:
   .dr-swing: carved red lacquer doors with gold lattice and a lotus medallion swing open; two silk lanterns sway once.
   .dr-slide: black lacquer screens slide apart and split a gold lotus; three silk lanterns light one after another.
   Plays once, about 1.8 s. Reduced motion and no JavaScript: the content, no doors. No lettering anywhere (SVG motifs only). */
.dr{position:relative;isolation:isolate;overflow:clip;--dr-h:min(92vh,880px);--dr-red:#7A1E14;--dr-gold:#C9A25A;--dr-ink:#16110D}
.dr-in{position:relative;z-index:1}
.dr-doors{position:absolute;left:0;right:0;top:0;height:min(100%,var(--dr-h));z-index:3;display:flex;pointer-events:none;perspective:1700px}
.dr-door{position:relative;flex:1 1 50%;height:100%;box-sizing:border-box;display:grid;grid-template-rows:1fr 1.35fr 1fr;gap:3.5%;padding:6% 8%;will-change:transform}
.dr-p{display:block;border-radius:2px}
.dr-glow{position:absolute;left:0;right:0;top:0;height:min(100%,var(--dr-h));z-index:2;pointer-events:none;opacity:0;background:radial-gradient(ellipse 34% 62% at 50% 42%,rgba(255,200,120,.6),rgba(255,170,80,0) 72%)}
.dr-lanterns{position:absolute;left:0;right:0;top:0;z-index:4;display:flex;justify-content:center;gap:clamp(40px,12vw,180px);pointer-events:none}
.dr-lantern{display:block;width:clamp(30px,3.4vw,46px);transform-origin:50% 0}
.dr-lantern svg{display:block;width:100%;height:auto;overflow:visible}

/* A: carved lacquer doors */
.dr-swing .dr-door{background:linear-gradient(90deg,rgba(0,0,0,.18),rgba(255,255,255,.03) 40%,rgba(0,0,0,.22)),repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 2px,transparent 2px 9px),var(--dr-red);
  box-shadow:inset 0 0 0 5px #3D0E08,inset 0 0 0 8px var(--dr-gold),inset 0 0 0 12px #5E160E,0 0 40px rgba(0,0,0,.5)}
.dr-swing .dr-p{box-shadow:inset 0 0 0 2px var(--dr-gold),inset 0 0 0 5px #4E120B,inset 0 6px 14px rgba(0,0,0,.35)}
.dr-swing .dr-p1,.dr-swing .dr-p3{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='%23C9A25A' stroke-width='1.3' opacity='.85'><rect x='3' y='3' width='18' height='18'/><path d='M12 3V21M3 12H21'/><rect x='8' y='8' width='8' height='8' transform='rotate(45 12 12)'/></g></svg>") center/clamp(22px,2.6vw,34px) repeat,#5E160E}
.dr-swing .dr-p2{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%23D8B26A' stroke-width='1.6' stroke-linejoin='round'><circle cx='50' cy='50' r='46'/><circle cx='50' cy='50' r='41' stroke-width='.8' opacity='.7'/><path d='M50 20C59 32 59 50 50 60C41 50 41 32 50 20Z'/><path d='M50 60C37 57 29 45 30 31C40 37 47 48 50 60ZM50 60C63 57 71 45 70 31C60 37 53 48 50 60Z'/><path d='M50 62C32 62 21 53 17 42C30 44 41 51 50 62ZM50 62C68 62 79 53 83 42C70 44 59 51 50 62Z'/><path d='M27 70Q50 79 73 70M33 76Q50 82 67 76' stroke-width='1.2'/></g></svg>") center/min(78%,62vh) no-repeat,radial-gradient(circle,#6A1A10 0 40%,#521309 70%)}
.dr-swing .dr-l{transform-origin:0 50%}
.dr-swing .dr-r{transform-origin:100% 50%}
.dr-ring{position:absolute;top:50%;width:clamp(18px,2vw,28px);aspect-ratio:1;margin-top:clamp(-14px,-1vw,-9px);border-radius:50%;box-shadow:0 0 0 clamp(3px,.35vw,5px) #B48A3F,0 3px 6px rgba(0,0,0,.5)}
.dr-l .dr-ring{right:5%}
.dr-r .dr-ring{left:5%}
.dr-swing.dr-go .dr-l{animation:dr-swing-l 0.9375s cubic-bezier(.6,0,.25,1) 0.075s both}
.dr-swing.dr-go .dr-r{animation:dr-swing-r 0.9375s cubic-bezier(.6,0,.25,1) 0.075s both}
@keyframes dr-swing-l{0%{transform:rotateY(0)}8%{transform:rotateY(-2deg)}100%{transform:rotateY(-100deg)}}
@keyframes dr-swing-r{0%{transform:rotateY(0)}8%{transform:rotateY(2deg)}100%{transform:rotateY(100deg)}}
.dr-swing.dr-go .dr-lantern{animation:dr-sway 1.2s ease-out 0.1125s both}
.dr-swing.dr-go .dr-lantern:nth-child(2){animation-delay:0.1875s}
@keyframes dr-sway{0%{transform:rotate(0)}25%{transform:rotate(4deg)}50%{transform:rotate(-2.5deg)}75%{transform:rotate(1deg)}100%{transform:rotate(0)}}

/* B: black lacquer screens, the lotus split down the seam */
.dr-slide{--dr-lotus:min(34vw,56vh,420px)}
.dr-slide .dr-door{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.2)),var(--dr-ink);box-shadow:inset 0 0 0 4px var(--dr-gold),inset 0 0 0 7px #0B0806,0 0 40px rgba(0,0,0,.55);grid-template-rows:1fr;padding:6% 0}
.dr-slide .dr-p2,.dr-slide .dr-p3{display:none}
.dr-slide .dr-p1{box-shadow:inset 0 0 0 1px rgba(201,162,90,.55)}
.dr-slide .dr-l .dr-p1{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%23D8B26A' stroke-width='1.6' stroke-linejoin='round'><circle cx='50' cy='50' r='46'/><circle cx='50' cy='50' r='41' stroke-width='.8' opacity='.7'/><path d='M50 20C59 32 59 50 50 60C41 50 41 32 50 20Z'/><path d='M50 60C37 57 29 45 30 31C40 37 47 48 50 60ZM50 60C63 57 71 45 70 31C60 37 53 48 50 60Z'/><path d='M50 62C32 62 21 53 17 42C30 44 41 51 50 62ZM50 62C68 62 79 53 83 42C70 44 59 51 50 62Z'/><path d='M27 70Q50 79 73 70M33 76Q50 82 67 76' stroke-width='1.2'/></g></svg>") right calc(var(--dr-lotus) / -2) center/var(--dr-lotus) no-repeat}
.dr-slide .dr-r .dr-p1{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%23D8B26A' stroke-width='1.6' stroke-linejoin='round'><circle cx='50' cy='50' r='46'/><circle cx='50' cy='50' r='41' stroke-width='.8' opacity='.7'/><path d='M50 20C59 32 59 50 50 60C41 50 41 32 50 20Z'/><path d='M50 60C37 57 29 45 30 31C40 37 47 48 50 60ZM50 60C63 57 71 45 70 31C60 37 53 48 50 60Z'/><path d='M50 62C32 62 21 53 17 42C30 44 41 51 50 62ZM50 62C68 62 79 53 83 42C70 44 59 51 50 62Z'/><path d='M27 70Q50 79 73 70M33 76Q50 82 67 76' stroke-width='1.2'/></g></svg>") left calc(var(--dr-lotus) / -2) center/var(--dr-lotus) no-repeat}
.dr-slide .dr-ring{display:none}
.dr-slide.dr-go .dr-l{animation:dr-slide-l 0.8625s cubic-bezier(.7,0,.2,1) 0.2625s both}
.dr-slide.dr-go .dr-r{animation:dr-slide-r 0.8625s cubic-bezier(.7,0,.2,1) 0.2625s both}
@keyframes dr-slide-l{to{transform:translateX(-101%)}}
@keyframes dr-slide-r{to{transform:translateX(101%)}}
.dr-slide .dr-lantern{opacity:.5}
.dr-slide.dr-go .dr-lantern{animation:dr-light 0.375s ease-out both}
.dr-slide.dr-go .dr-lantern:nth-child(1){animation-delay:0.0375s}
.dr-slide.dr-go .dr-lantern:nth-child(2){animation-delay:0.15s}
.dr-slide.dr-go .dr-lantern:nth-child(3){animation-delay:0.2625s}
@keyframes dr-light{from{opacity:.5;filter:none}to{opacity:1;filter:drop-shadow(0 0 12px rgba(255,150,60,.85))}}
.dr-swing .dr-lantern{filter:drop-shadow(0 0 10px rgba(255,150,60,.7))}

/* both: light spills through, the doors fade at the end, the content rises */
.dr-go .dr-glow{animation:dr-glow 1.275s ease 0.1125s both}
@keyframes dr-glow{0%{opacity:0}40%{opacity:1}100%{opacity:0}}
.dr-go .dr-doors{animation:dr-out 0.3s ease 1.0125s forwards}
@keyframes dr-out{to{opacity:0}}
.dr-done .dr-doors,.dr-done .dr-glow{visibility:hidden}
.dr.dr-arm .dr-rise{opacity:0;transform:translateY(14px)} /* 3 classes: a site's own opacity on these items must not show them early */
.dr-go .dr-rise{animation:dr-rise 0.375s cubic-bezier(.2,.7,.2,1) calc(0.5625s + var(--dr-i,0) * 0.045s) both}
@keyframes dr-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
html:not(.js) .dr-doors,html:not(.js) .dr-glow{display:none}
@media (prefers-reduced-motion:reduce){.dr-doors,.dr-glow{display:none}.dr-rise{opacity:1!important;transform:none!important;animation:none!important}.dr-lantern{animation:none!important;opacity:1!important}}

/* r38: reliable entrances. Failed dr.js leaves ordinary content visible. */
.dr:not(.dr-arm) .dr-doors,.dr:not(.dr-arm) .dr-glow{display:none}
.dr.dr-done .dr-rise{opacity:1!important;transform:none!important;animation:none!important}