/* ===== Horror double-door entry overlay ===== */
.doors{display:none}
html.doors-lock,html.doors-lock body{overflow:hidden!important;height:100%;overscroll-behavior:none}
.js .doors{display:block;position:fixed;inset:0;z-index:1000;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;touch-action:none;user-select:none;-webkit-user-select:none}
.doors .d-defs{position:absolute;width:0;height:0;overflow:hidden}
.d-stage{position:absolute;inset:0;perspective:1600px;perspective-origin:50% 50%;overflow:hidden;background:#030202}
@media (max-width:700px){.d-stage{perspective:900px}.d-seam{box-shadow:0 0 5px 1px rgba(255,59,42,.9),0 0 18px 4px rgba(208,26,31,.5),0 0 50px 12px rgba(163,8,12,.28)}.d-center{transform:translate(-50%,-62%)}.doors.opening .d-center{transform:translate(-50%,-62%) scale(1.12)}}
.door{position:absolute;top:0;bottom:0;width:50.2%;transform-style:preserve-3d;backface-visibility:visible;will-change:transform}
.dl{left:0;transform-origin:0 50%}
.dr{right:0;transform-origin:100% 50%}
.face{position:absolute;inset:0;overflow:hidden;background:#140d09;
 box-shadow:inset 0 0 0 clamp(6px,1vw,12px) #0b0806,inset 0 0 0 calc(clamp(6px,1vw,12px) + 2px) rgba(201,162,74,.18),inset 0 0 60px 20px rgba(0,0,0,.75)}
.dr .face{transform:scaleX(-1)} /* mirror: seam side always on the "right" of the face */
.tex{position:absolute;inset:0;background:url(../images/door-wood.webp) center/cover;filter:contrast(1.2) brightness(1.08) saturate(.9)}
.dr .tex{background-position:30% 40%;filter:contrast(1.2) brightness(1) saturate(.85) hue-rotate(-6deg)}
/* overall lighting: dark at hinge + top/bottom, red light leaking at the seam */
.shade{position:absolute;inset:0;pointer-events:none;background:
 linear-gradient(90deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.25) 28%,rgba(0,0,0,0) 65%,rgba(120,8,10,.22) 92%,rgba(208,26,31,.55) 100%),
 linear-gradient(180deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 74%,rgba(0,0,0,.85) 100%),
 radial-gradient(ellipse 60% 40% at 100% 50%,rgba(208,26,31,.28),transparent 70%)}
/* hinge straps: wide at the hinge, spear point toward the seam, rivets */
.strap{position:absolute;left:0;width:82%;height:clamp(18px,3.2vh,34px);
 clip-path:polygon(0 0,86% 0,94% 30%,100% 50%,94% 70%,86% 100%,0 100%);
 background:
  radial-gradient(circle at 50% 50%,#a39277 0,#4b4036 calc(clamp(2px,.35vw,4px)),#0b0907 calc(clamp(3px,.5vw,6px)),transparent calc(clamp(3px,.5vw,6px) + 1px)) clamp(14px,2vw,26px) 50%/clamp(34px,5vw,64px) 100% repeat-x,
  linear-gradient(180deg,#8a7f72 0,#4a423b 14%,#25201d 50%,#0c0a09 100%);
 box-shadow:0 4px 10px rgba(0,0,0,.8);filter:drop-shadow(0 6px 6px rgba(0,0,0,.9))}
.strap:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 30% 40%,rgba(140,60,20,.45),transparent 40%),radial-gradient(ellipse at 70% 70%,rgba(110,45,15,.4),transparent 35%);mix-blend-mode:screen;opacity:.7}
.s1{top:9%}.s2{top:86%}
/* gothic panels */
.pnl{position:absolute;left:14%;right:16%;width:auto;filter:drop-shadow(1px 1px 0 rgba(230,200,160,.06))}
.p1{top:16%;height:43%}
.p2{top:64%;height:19%}
.pnl use{width:100%;height:100%}
/* iron stile along the seam edge, rivet column */
.stile{position:absolute;top:0;bottom:0;right:0;width:clamp(12px,1.9vw,26px);
 background:
  radial-gradient(circle,#a39277 0,#4b4036 calc(clamp(2px,.33vw,4px)),#0b0907 calc(clamp(3px,.5vw,6px)),transparent calc(clamp(3px,.5vw,6px) + 1px)) 50% 3%/100% clamp(40px,6vh,70px) repeat-y,
  linear-gradient(90deg,#060505,#2d2723 35%,#4e463f 55%,#191513 80%,#050404);
 box-shadow:-6px 0 14px rgba(0,0,0,.8),inset -2px 0 0 rgba(208,26,31,.5)}
/* ring handles */
.handle{position:absolute;right:clamp(16px,3.2vw,52px);top:68%;width:clamp(44px,6.4vw,92px);height:auto;aspect-ratio:100/150;overflow:visible;filter:drop-shadow(4px 8px 6px rgba(0,0,0,.9))}
.handle .ring{transform-origin:50px 62px;transform-box:view-box;animation:dRing 4.5s ease-in-out infinite}
.dr .handle .ring{animation-delay:-2.2s}
@keyframes dRing{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
/* blood + claw marks (outside the mirrored face, so they differ per door) */
.drip{position:absolute;pointer-events:none}
.dtop{top:0;right:0;width:clamp(120px,19vw,300px);height:auto;opacity:.95;filter:drop-shadow(0 2px 2px rgba(0,0,0,.6))}
.smear{right:clamp(84px,14vw,240px);top:73%;width:clamp(46px,6.5vw,100px);height:auto;transform:rotate(4deg);opacity:.72}
.claw{position:absolute;left:40%;top:17%;width:clamp(70px,10vw,150px);height:auto;transform:rotate(-14deg);opacity:.92}
/* seam light */
.d-seam{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;pointer-events:none;
 background:linear-gradient(180deg,rgba(255,60,40,.2),#ff3b2a 30%,#ffb08a 50%,#ff3b2a 70%,rgba(255,60,40,.2));
 box-shadow:0 0 6px 1px rgba(255,59,42,.9),0 0 26px 6px rgba(208,26,31,.55),0 0 90px 24px rgba(163,8,12,.35);
 animation:dFlick 3.2s infinite steps(1)}
@keyframes dFlick{0%,100%{opacity:.95}7%{opacity:.55}9%{opacity:1}43%{opacity:.8}45%{opacity:.4}47%{opacity:.95}71%{opacity:.85}}
/* fog + vignette */
.d-fog{position:absolute;left:-20%;right:-20%;bottom:-6%;height:46%;pointer-events:none}
.d-fog i{position:absolute;inset:0;opacity:.9;background:
 radial-gradient(ellipse 30% 40% at 20% 80%,rgba(170,160,160,.3),transparent 70%),
 radial-gradient(ellipse 35% 45% at 55% 90%,rgba(150,130,130,.28),transparent 70%),
 radial-gradient(ellipse 25% 35% at 85% 75%,rgba(160,150,150,.26),transparent 70%);
 animation:dFog 22s ease-in-out infinite alternate}
.d-fog i:nth-child(2){animation-duration:30s;animation-direction:alternate-reverse;opacity:.4;transform:translateX(8%);bottom:10%}
.d-fog i:nth-child(3){background:linear-gradient(0deg,rgba(90,10,12,.35),transparent 60%);animation:none;opacity:1}
@keyframes dFog{from{transform:translateX(-7%)}to{transform:translateX(7%)}}
.d-stage:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:radial-gradient(ellipse 55% 38% at 50% -4%,rgba(255,170,110,.16),transparent 70%);mix-blend-mode:screen}
.d-vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 80% 75% at 50% 45%,transparent 48%,rgba(0,0,0,.5) 80%,rgba(0,0,0,.88) 100%)}
.d-burst{position:absolute;left:50%;top:50%;width:140vmax;height:140vmax;margin:-70vmax 0 0 -70vmax;border-radius:50%;opacity:0;pointer-events:none;z-index:3;
 background:radial-gradient(circle,rgba(255,230,210,.95) 0,rgba(255,80,50,.7) 6%,rgba(208,26,31,.45) 18%,rgba(120,5,8,.2) 35%,transparent 60%);transform:scale(.15) scaleX(.35)}
/* centre: logo + prompt */
.d-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-60%);width:min(88vw,540px);text-align:center;pointer-events:none;z-index:4}
.d-center:before{content:"";position:absolute;left:50%;top:38%;width:130%;aspect-ratio:1.5;transform:translate(-50%,-50%);background:radial-gradient(ellipse at center,rgba(0,0,0,.92) 0,rgba(0,0,0,.7) 35%,transparent 68%);z-index:-1}
.d-center img{width:100%;height:auto;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%);filter:drop-shadow(0 0 30px rgba(208,26,31,.35));animation:dLogo 5s ease-in-out infinite}
@keyframes dLogo{0%,100%{filter:drop-shadow(0 0 24px rgba(208,26,31,.3)) brightness(1)}50%{filter:drop-shadow(0 0 42px rgba(208,26,31,.6)) brightness(1.08)}}
.d-enter{margin:clamp(4px,1.5vh,16px) 0 0;font:500 clamp(15px,2.2vw,22px)/1 var(--cond,"Oswald",sans-serif);letter-spacing:.42em;text-transform:uppercase;color:#e8c877}
.d-enter span{display:inline-flex;align-items:center;gap:.9em;padding:.95em 1.3em .95em 1.72em;border:1px solid rgba(201,162,74,.55);background:linear-gradient(180deg,rgba(40,4,6,.85),rgba(10,2,2,.9));box-shadow:0 0 0 4px rgba(0,0,0,.6),0 0 24px rgba(208,26,31,.45),inset 0 0 18px rgba(163,8,12,.5);animation:dPulse 2.2s ease-in-out infinite}
.d-enter span:before,.d-enter span:after{content:"";width:1.6em;height:1px;background:linear-gradient(90deg,transparent,#c9a24a)}
.d-enter span:after{transform:scaleX(-1)}
.d-enter span:before{margin-right:-.4em}
@keyframes dPulse{0%,100%{text-shadow:0 0 6px rgba(208,26,31,.6);box-shadow:0 0 0 4px rgba(0,0,0,.6),0 0 18px rgba(208,26,31,.35),inset 0 0 14px rgba(163,8,12,.4);color:#e8c877}50%{text-shadow:0 0 14px rgba(255,59,42,.95),0 0 2px #fff;box-shadow:0 0 0 4px rgba(0,0,0,.6),0 0 44px rgba(208,26,31,.8),inset 0 0 26px rgba(208,26,31,.7);color:#fff3cf}}
.d-sub{margin:clamp(10px,1.8vh,18px) 0 0;font:italic 500 clamp(14px,1.6vw,18px)/1.2 var(--serif,"Cormorant Garamond",serif);color:#a59d90;letter-spacing:.08em;text-shadow:0 1px 2px #000}
.doors:focus-visible .d-enter span{outline:2px solid #e8c877;outline-offset:6px}
/* ===== opening ===== */
.doors.opening{cursor:default;pointer-events:none}
.doors.opening .d-stage{background:transparent;transition:background .2s}
.doors.opening .dl{animation:dOpenL 1.45s cubic-bezier(.55,.02,.35,1) .08s forwards}
.doors.opening .dr{animation:dOpenR 1.45s cubic-bezier(.55,.02,.35,1) .08s forwards}
@keyframes dOpenL{0%{transform:rotateY(0)}9%{transform:rotateY(-3deg)}14%{transform:rotateY(-2deg)}80%{opacity:1}100%{transform:rotateY(-100deg);opacity:0}}
@keyframes dOpenR{0%{transform:rotateY(0)}9%{transform:rotateY(3deg)}14%{transform:rotateY(2deg)}80%{opacity:1}100%{transform:rotateY(100deg);opacity:0}}
.doors.opening .face{animation:dDark 1.45s ease-in .08s forwards}
@keyframes dDark{to{filter:brightness(.25)}}
.doors.opening .d-center{transition:opacity .45s ease,transform .6s ease;opacity:0;transform:translate(-50%,-60%) scale(1.12)}
.doors.opening .d-seam{animation:dSeamOut .5s ease-out forwards}
@keyframes dSeamOut{0%{opacity:1;transform:scaleX(1)}30%{opacity:1;transform:scaleX(6)}100%{opacity:0;transform:scaleX(30)}}
.doors.opening .d-burst{animation:dBurst 1.3s ease-out .1s forwards}
@keyframes dBurst{0%{opacity:0;transform:scale(.15) scaleX(.35)}22%{opacity:.95}100%{opacity:0;transform:scale(1.4) scaleX(1)}}
.doors.opening .d-fog,.doors.opening .d-vig{transition:opacity 1.2s ease .3s;opacity:0}
.doors.opening .drip,.doors.opening .claw{animation:dDark 1.45s ease-in .08s forwards}
/* reduced motion: simple fade */
@media (prefers-reduced-motion:reduce){
 .d-seam,.d-fog i,.d-center img,.d-enter span,.handle .ring{animation:none!important}
 html .doors.opening{transition:opacity .55s ease!important;opacity:0}
 .doors.opening .dl,.doors.opening .dr,.doors.opening .face,.doors.opening .d-burst,.doors.opening .d-seam,.doors.opening .drip,.doors.opening .claw{animation:none!important}
}