/* gate.css (v2): the doorway sits ON TOP of the gate picture so the doors are visible */
.gate { position: relative; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; background: #120408; transition: opacity .9s ease; }
.gate.is-leaving { opacity: 0; }

.gate__stage { position: absolute; inset: 0; transform-origin: 50% 70%; will-change: transform;
  transition: transform 3.4s cubic-bezier(.55, .05, .3, 1) .8s; }
.gate.is-open .gate__stage { transform: scale(2.6); }

.gate__frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; z-index: 1; }

/* doorway: light behind + two doors, clipped to the arch, ABOVE the frame */
.gate__doorway { position: absolute; z-index: 2;
  left: var(--dw-left, 32.6%); top: var(--dw-top, 52.7%); width: var(--dw-width, 35.8%); height: var(--dw-height, 37%);
  background: #2a1608;
  perspective: 1200px; perspective-origin: 50% 50%; overflow: hidden;
  clip-path: polygon(0% 100%, 0% 32%, 2% 24%, 6% 17%, 12% 11%, 20% 6.5%, 30% 3.2%, 40% 1%, 50% 0%, 60% 1%, 70% 3.2%, 80% 6.5%, 88% 11%, 94% 17%, 98% 24%, 100% 32%, 100% 100%); }
.gate__doorway::before { content: ''; position: absolute; inset: 0; background: var(--light) center / cover; opacity: 0; transition: opacity 1.6s ease; }
.gate.is-open .gate__doorway::before { opacity: 1; }
.gate__doorway::after { content: ''; position: absolute; inset: 0; background: rgba(255, 226, 150, .0); transition: background 2.6s ease; pointer-events: none; }
.gate.is-open .gate__doorway::after { background: rgba(255, 226, 150, .25); }

.gate__door { position: absolute; top: 0; width: 51%; height: 100%; background-size: 114% 100%; background-position: center; background-repeat: no-repeat;
  backface-visibility: hidden; will-change: transform; transition: transform var(--gate-time, 3s) cubic-bezier(.55, .05, .25, 1); }
.gate__door--left { left: 0; transform-origin: 0% 50%; box-shadow: inset -10px 0 24px rgba(0,0,0,.35); }
.gate__door--right { right: 0; transform-origin: 100% 50%; box-shadow: inset 10px 0 24px rgba(0,0,0,.35); }
.gate.is-open .gate__door--left { transform: rotateY(calc(var(--gate-angle, 80) * -1deg)); }
.gate.is-open .gate__door--right { transform: rotateY(calc(var(--gate-angle, 80) * 1deg)); }

.gate__ui { position: absolute; left: 0; right: 0; bottom: calc(4% + var(--safe-bottom, 0px)); z-index: 5; display: flex; justify-content: center; align-items: flex-end; gap: 4px; transition: opacity .5s ease; }
.gate.is-open .gate__ui { opacity: 0; pointer-events: none; }
.gate__btn { white-space: nowrap; animation: gatePulse 2.4s ease-in-out infinite; }
@keyframes gatePulse { 0% { box-shadow: 0 0 0 0 rgba(230,193,90,.55), 0 6px 20px rgba(0,0,0,.5); } 70% { box-shadow: 0 0 0 16px rgba(230,193,90,0), 0 6px 20px rgba(0,0,0,.5); } 100% { box-shadow: 0 0 0 0 rgba(230,193,90,0), 0 6px 20px rgba(0,0,0,.5); } }

.gate__loading { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; background: #120408; color: var(--gold-light, #e6c15a); font-family: var(--font-label, serif); letter-spacing: .3em; font-size: .8rem; transition: opacity .6s ease; }
.gate__loading.is-done { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .gate__stage, .gate__door, .gate__doorway::after { transition: none !important; }
  .gate.is-open .gate__stage { transform: none; }
  .gate.is-open .gate__door--left, .gate.is-open .gate__door--right { transform: none; opacity: 0; }
  .gate__btn { animation: none; }
}
.gate.is-simple .gate__door { transition: opacity .8s ease; }
.gate.is-simple.is-open .gate__door { transform: none; opacity: 0; }
.gate.is-simple.is-open .gate__stage { transform: none; }

/* shehnai players beside the button */
.gate__shehnai { height: clamp(96px, 25vw, 135px); width: auto; filter: url(#keyw); transform-origin: 50% 100%; animation: shSway 3.2s ease-in-out infinite; pointer-events: none; }
.gate__shehnai--r { animation-delay: -1.6s; }
.gate__shehnai[style*="visibility: hidden"] { display: none; }
@keyframes shSway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
.gate.is-open .gate__shehnai { opacity: 0; transition: opacity .5s; }