/* ===== Made in Xiaolin — temple gate (swing-open, slow cinematic reveal) ===== */
#xl-gate{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:#000;perspective:1500px;animation:xlGateFade 1s ease 4.4s forwards}
#xl-gate.xl-skip{animation:xlGateFade .45s ease forwards}

/* revealed interior + golden burst (behind the doors, seen through the opening) */
#xl-gate:before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(120% 82% at 50% 44%, #25100a, #000 78%)}
#xl-gate .xl-burst{position:absolute;z-index:1;inset:0;opacity:0;
  background:radial-gradient(circle at 50% 44%, rgba(245,206,80,.6), rgba(245,206,80,.14) 24%, transparent 46%);
  animation:xlBurst 3.2s ease 1.4s forwards}
#xl-gate .xl-rays{position:absolute;z-index:1;left:50%;top:44%;width:170vmax;height:170vmax;
  transform:translate(-50%,-50%);opacity:0;pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 50% 50%, rgba(245,206,80,.15) 0deg 5deg, transparent 5deg 13deg);
  animation:xlSpin 30s linear 1.4s infinite, xlRaysFade 4s ease 1.4s forwards}

/* incense smoke billowing through the opening */
#xl-gate .xl-smoke{position:absolute;z-index:1;left:0;right:0;bottom:-6%;height:82%;pointer-events:none}
#xl-gate .xl-smoke span{position:absolute;bottom:0;border-radius:50%;filter:blur(30px);opacity:0;
  background:radial-gradient(circle, rgba(238,228,208,.55), rgba(214,194,162,.16) 54%, transparent 72%);
  animation:xlPuff 8.5s ease-in infinite}
#xl-gate .xl-smoke span:nth-child(1){left:36%;width:40vw;height:40vw;animation-delay:1.5s}
#xl-gate .xl-smoke span:nth-child(2){left:50%;width:30vw;height:30vw;animation-delay:2.4s}
#xl-gate .xl-smoke span:nth-child(3){left:28%;width:34vw;height:34vw;animation-delay:3.2s}
#xl-gate .xl-smoke span:nth-child(4){left:56%;width:26vw;height:26vw;animation-delay:3.9s}
#xl-gate .xl-smoke span:nth-child(5){left:44%;width:32vw;height:32vw;animation-delay:4.7s}
@keyframes xlPuff{0%{opacity:0;transform:translateY(18%) scale(.55)}22%{opacity:.7}100%{opacity:0;transform:translateY(-95%) scale(1.6)}}

/* doors — each shows its half of the gate art, hinged on its OUTER edge, swings open */
#xl-gate .xl-door{position:absolute;top:0;height:100%;width:50%;z-index:3;background-repeat:no-repeat;background-size:100vw 100vh;
  background-color:#140805;background-image:url(img/gate-doors.jpg);box-shadow:inset 0 0 120px rgba(0,0,0,.7);
  backface-visibility:hidden;will-change:transform}
#xl-gate .xl-door.l{left:0;background-position:left center;transform-origin:left center;animation:xlDoorL 2.7s cubic-bezier(.55,0,.2,1) .9s forwards}
#xl-gate .xl-door.r{right:0;background-position:right center;transform-origin:right center;animation:xlDoorR 2.7s cubic-bezier(.55,0,.2,1) .9s forwards}
#xl-gate .xl-seam{position:absolute;z-index:3;top:0;height:100%;width:6px;left:50%;margin-left:-3px;
  background:linear-gradient(180deg,#ffe6a8,#f5ce50,#ffe6a8);box-shadow:0 0 38px rgba(245,206,80,.9);
  animation:xlSeamFade .9s ease 1.2s forwards}

/* crest with the Made in Xiaolin logo — revealed as the doors swing open */
#xl-gate .xl-crest{position:relative;z-index:2;text-align:center;opacity:0;transform:scale(.7);animation:xlCrest 2s ease 1.6s forwards}
#xl-gate .xl-crest .xl-seal{width:122px;height:122px;object-fit:contain;display:block;margin:0 auto 14px;
  filter:drop-shadow(0 0 36px rgba(245,206,80,.7));animation:xlSealGlow 2.6s ease-in-out infinite}
#xl-gate .xl-crest .xl-kick{font-family:Georgia,serif;font-size:clamp(10px,2.2vw,13px);letter-spacing:.42em;color:#f5ce50;text-transform:uppercase;margin-bottom:8px}
#xl-gate .xl-crest .xl-word{font-family:Georgia,'Times New Roman',serif;font-size:clamp(32px,8vw,76px);letter-spacing:.14em;font-weight:700;line-height:1.02;
  background:linear-gradient(180deg,#fbe899,#e8b13c 65%,#caa12f);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 2px 44px rgba(245,206,80,.5)}
#xl-gate .xl-crest .xl-sub{margin-top:10px;font-family:Georgia,serif;font-size:clamp(11px,2.4vw,15px);letter-spacing:.42em;color:#d8222f;text-transform:uppercase}
/* full artwork panel revealed by the sign gate (Enter the Training Chambers) */
#xl-gate .xl-crest .xl-sign{display:block;width:auto;height:auto;max-width:92vw;max-height:76vh;border-radius:16px;
  box-shadow:0 0 70px rgba(245,206,80,.5);filter:drop-shadow(0 14px 46px rgba(0,0,0,.65))}

#xl-gate .xl-snd{position:absolute;z-index:6;top:calc(14px + env(safe-area-inset-top));right:14px;width:42px;height:42px;border-radius:50%;
  background:rgba(0,0,0,.55);border:1px solid rgba(245,206,80,.5);color:#f5ce50;font-size:1.05rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
#xl-gate .xl-snd:active{transform:scale(.94)}
#xl-gate .xl-tap{position:absolute;z-index:6;bottom:calc(26px + env(safe-area-inset-bottom));left:0;right:0;text-align:center;
  font-family:Georgia,serif;font-size:11px;letter-spacing:.3em;color:rgba(245,206,80,.55);text-transform:uppercase;animation:xlBlink 1.6s ease infinite}

@keyframes xlDoorL{to{transform:rotateY(-118deg)}}
@keyframes xlDoorR{to{transform:rotateY(118deg)}}
@keyframes xlSeamFade{to{opacity:0}}
@keyframes xlCrest{0%{opacity:0;transform:scale(.7)}55%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
@keyframes xlBurst{0%{opacity:0}60%{opacity:1}100%{opacity:.85}}
@keyframes xlRaysFade{to{opacity:.6}}
@keyframes xlSpin{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes xlSealGlow{50%{filter:drop-shadow(0 0 64px rgba(245,206,80,.95))}}
@keyframes xlGateFade{to{opacity:0;visibility:hidden}}
@keyframes xlBlink{0%,100%{opacity:.25}50%{opacity:.7}}

/* quicker chamber gates (still a swing, just snappier) */
#xl-gate.xl-quick{animation:xlGateFade .8s ease 3.1s forwards}
#xl-gate.xl-quick .xl-door.l,#xl-gate.xl-quick .xl-door.r{animation-duration:2s;animation-delay:.5s}
#xl-gate.xl-quick .xl-seam{animation-delay:.9s}
#xl-gate.xl-quick .xl-crest{animation-delay:1.1s}
#xl-gate.xl-quick .xl-burst{animation-delay:1s}
#xl-gate.xl-quick .xl-rays{animation-delay:1s}