/* =========================================
   DOOR INTRO  (reference: Images/door.jpg, 640x1136)
   .dg-stage = photo ka exact ratio. Darwaze usi photo ke
   clip kiye hue hisse hain, isliye design 1:1 match karta hai.

   PERFORMANCE: poora sequence ek hi class (dg-open) se CSS mein chalta hai.
   Sirf transform + opacity animate hote hain -> GPU (compositor) thread,
   main thread busy ho tab bhi smooth. Scroll lock layout nahi badalta.
========================================= */

/* door ke dauraan hero ki CSS animations ruki (layout par koi asar nahi) */
body.dg-locked .couple-content,
body.dg-locked .place-content{animation-play-state:paused}

/* palace door ke peeche pehle se taiyaar hai; camera andar jaate waqt halka push-in */
.hero-image{transform:scale(1);transition:transform 3.6s cubic-bezier(.3,.55,.25,1) .7s;will-change:transform}
body.dg-opened .hero-image{transform:scale(1.035)}

/* ---------- GATE ---------- */
.dg-gate{position:fixed;inset:0;z-index:100;overflow:hidden;cursor:pointer;outline:none;
  touch-action:none;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;
  transform-origin:50% 56%;
  will-change:transform,opacity}
/* camera roshni mein aage badhta hai (pehle 5x zoom tha - ab halka 1.5x push) */
.dg-gate.dg-open{animation:dgPush 2.1s cubic-bezier(.45,0,.2,1) .7s forwards,dgFade 1.1s ease 1.6s forwards}
@keyframes dgPush{from{transform:scale(1)}to{transform:scale(1.5)}}
@keyframes dgFade{to{opacity:0}}
.dg-gate.dg-release{pointer-events:none}
.dg-gate.dg-gone{display:none}             /* saari GPU layers free */

/* tablet: side mein usi photo ka blur (phone par stage poori screen dhakta hai -> band) */
.dg-gate::before{content:"";position:absolute;inset:-60px;
  background:#e6cabd url("../Images/door.jpg?v=20261022b") center/cover;filter:blur(30px);opacity:.85;
  transition:opacity .6s ease}
@media (max-aspect-ratio: 640/1136){.dg-gate::before{display:none}}
.dg-gate.dg-open::before{opacity:0}

/* phone: height bharta hai (sides thodi crop), wide screen: poora door dikhta hai */
.dg-stage{position:absolute;left:50%;top:50%;
  height:100vh;height:100svh;
  width:calc(100vh * 640 / 1136);width:calc(100svh * 640 / 1136);
  transform:translate(-50%,-50%)}
.dg-stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  box-shadow:0 0 80px rgba(70,30,30,.35);transition:opacity .6s ease}
.dg-gate.dg-open .dg-stage::after{opacity:0}

/* frame. Arch ki "khidki" tap ke pointerdown par hi kat jaati hai (dg-prime),
   taaki ek baar ka repaint animation shuru hone se pehle ho jaye */
.dg-bg{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;user-select:none;will-change:transform}
.dg-gate.dg-prime .dg-bg,
.dg-gate.dg-open .dg-bg{clip-path:polygon(evenodd,0% 0%,100% 0%,100% 100%,0% 100%,0% 0%,11.25% 96.13%,11.25% 38.73%,11.56% 35.21%,12.5% 32.13%,14.37% 29.49%,16.25% 27.99%,17.5% 26.41%,18.75% 24.65%,21.09% 22.71%,24.22% 21.13%,26.56% 19.81%,28.13% 18.05%,30.47% 16.73%,33.59% 15.67%,36.72% 14.52%,39.06% 13.2%,42.19% 12.15%,45.63% 11.27%,48.44% 10.65%,50.47% 10.3%,52.5% 10.65%,55.31% 11.27%,58.75% 12.15%,61.88% 13.2%,64.22% 14.52%,67.34% 15.67%,70.47% 16.73%,72.81% 18.05%,74.38% 19.81%,76.72% 21.13%,79.84% 22.71%,82.19% 24.65%,83.44% 26.41%,84.69% 27.99%,86.56% 29.49%,88.44% 32.13%,89.38% 35.21%,89.69% 38.73%,89.69% 96.13%,11.25% 96.13%)}

/* ---------- PALACE KE ANDAR KI ROSHNI (darwazon ke peeche) ---------- */
.dg-light{position:absolute;inset:0;
  clip-path:polygon(11.25% 96.13%,11.25% 38.73%,11.56% 35.21%,12.5% 32.13%,14.37% 29.49%,16.25% 27.99%,17.5% 26.41%,18.75% 24.65%,21.09% 22.71%,24.22% 21.13%,26.56% 19.81%,28.13% 18.05%,30.47% 16.73%,33.59% 15.67%,36.72% 14.52%,39.06% 13.2%,42.19% 12.15%,45.63% 11.27%,48.44% 10.65%,50.47% 10.3%,52.5% 10.65%,55.31% 11.27%,58.75% 12.15%,61.88% 13.2%,64.22% 14.52%,67.34% 15.67%,70.47% 16.73%,72.81% 18.05%,74.38% 19.81%,76.72% 21.13%,79.84% 22.71%,82.19% 24.65%,83.44% 26.41%,84.69% 27.99%,86.56% 29.49%,88.44% 32.13%,89.38% 35.21%,89.69% 38.73%,89.69% 96.13%);
  background:radial-gradient(ellipse 70% 45% at 50% 58%,#fffdf7 0,#fdebd2 45%,#f2c6a3 100%);
  box-shadow:inset 0 0 60px rgba(120,60,40,.35);will-change:opacity}
/* halki roshni: pehle se bani hui, sirf opacity badalti hai */
.dg-light::after{content:"";position:absolute;inset:0;opacity:0;box-shadow:inset 0 0 160px 60px #fffaf0}
.dg-gate.dg-open .dg-light{animation:dgReveal 1.6s ease forwards}
.dg-gate.dg-open .dg-light::after{animation:dgWarm .7s ease forwards}
@keyframes dgReveal{0%,30%{opacity:1}100%{opacity:0}}
@keyframes dgWarm{to{opacity:1}}

/* ---------- DOORS ---------- */
.dg-doors{position:absolute;inset:0;perspective:1400px;perspective-origin:50% 55%}
.dg-door{position:absolute;top:10.3%;height:85.83%;width:39.22%;overflow:hidden;will-change:transform;
  transition:transform 2s cubic-bezier(.55,.05,.25,1)}
.dg-door::after{content:"";position:absolute;inset:0;background:rgba(20,8,6,.3);opacity:0;transition:opacity 2s ease}
.dg-gate.dg-open .dg-door::after{opacity:1}
.dg-door img{position:absolute;top:-12%;width:254.98%;height:116.51%;max-width:none;display:block;pointer-events:none;user-select:none}
.dg-door.l{left:11.25%;transform-origin:0 50%;
  clip-path:polygon(0% 100%,0% 33.13%,0.8% 29.03%,3.19% 25.44%,7.97% 22.36%,12.75% 20.62%,15.94% 18.77%,19.12% 16.72%,25.1% 14.46%,33.07% 12.62%,39.04% 11.08%,43.03% 9.03%,49% 7.49%,56.97% 6.26%,64.94% 4.92%,70.92% 3.38%,78.88% 2.15%,87.65% 1.13%,94.82% 0.41%,100% 0%,100% 100%)}
.dg-door.l img{left:-28.69%}
.dg-door.r{left:50.47%;transform-origin:100% 50%;
  clip-path:polygon(100% 100%,100% 33.13%,99.2% 29.03%,96.81% 25.44%,92.03% 22.36%,87.25% 20.62%,84.06% 18.77%,80.88% 16.72%,74.9% 14.46%,66.93% 12.62%,60.96% 11.08%,56.97% 9.03%,51% 7.49%,43.03% 6.26%,35.06% 4.92%,29.08% 3.38%,21.12% 2.15%,12.35% 1.13%,5.18% 0.41%,0% 0%,0% 100%)}
.dg-door.r img{left:-128.69%}
.dg-gate.dg-open .dg-door.l{transform:rotateY(88deg)}
.dg-gate.dg-open .dg-door.r{transform:rotateY(-88deg)}

/* ---------- HINT ---------- */
.dg-hint{position:absolute;left:50%;bottom:calc(6.5vh + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:3;
  padding:9px 18px 9px calc(18px + .35em);border-radius:999px;white-space:nowrap;
  background:rgba(255,248,240,.82);border:1px solid rgba(184,137,47,.55);
  box-shadow:0 6px 20px rgba(90,40,40,.25);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font-family:"Cormorant Garamond",serif;font-weight:700;
  letter-spacing:.35em;text-transform:uppercase;font-size:12px;color:#8a4b57;animation:dgPulse 2s infinite}
.dg-gate:focus-visible .dg-hint{outline:2px solid #b8892f;outline-offset:3px}
.dg-gate.dg-prime .dg-hint,
.dg-gate.dg-open .dg-hint{opacity:0;animation:none;transition:opacity .3s;backdrop-filter:none;-webkit-backdrop-filter:none}
@keyframes dgPulse{50%{opacity:.55}}

@media (prefers-reduced-motion: reduce){
  .dg-gate.dg-open{animation:dgFade .6s ease .5s forwards}
  .dg-door{transition:transform .9s ease}
  .dg-hint{animation:none}
  .hero-image,body.dg-opened .hero-image{transform:none;transition:none}
}