/* ============================================================
   Entrance intro — grand art-deco doors that swing open on 3D
   hinges to REVEAL the lobby beneath. Once per session (a head
   script adds html.intro-on only on a fresh visit). The open +
   fade is pure CSS, so even with JS off the doors open and the
   overlay goes visibility:hidden (never traps the lobby).
   intro.js only adds click/scroll skip + DOM cleanup.
   ============================================================ */

.intro{display:none}
.intro-on .intro{
  display:block;position:fixed;inset:0;z-index:4000;overflow:hidden;
  perspective:1800px;perspective-origin:50% 42%;background:transparent;
  animation:intro-veil 3.3s ease forwards}

/* the two door leaves — hinged on their OUTER edges */
.intro-leaf{position:absolute;top:0;bottom:0;width:51%;backface-visibility:hidden;
  background-color:#120c07;
  background-image:
    linear-gradient(180deg,rgba(192,122,61,.28) 0 5px,transparent 5px,transparent calc(100% - 5px),rgba(192,122,61,.28) calc(100% - 5px)),
    repeating-linear-gradient(90deg,rgba(0,0,0,.5) 0 3px,rgba(255,214,150,.06) 3px 5px,transparent 5px 27px),
    linear-gradient(90deg,#0b0805,#1c140d 60%,#251a11);}
.intro-leaf.l{left:0;transform-origin:left center;
  box-shadow:inset -14px 0 26px rgba(0,0,0,.55),inset 0 0 90px rgba(0,0,0,.5);
  animation:intro-open-l 2.15s cubic-bezier(.55,0,.32,1) .55s forwards}
.intro-leaf.r{right:0;transform-origin:right center;
  box-shadow:inset 14px 0 26px rgba(0,0,0,.55),inset 0 0 90px rgba(0,0,0,.5);
  animation:intro-open-r 2.15s cubic-bezier(.55,0,.32,1) .55s forwards}
/* inner (seam-side) brass stile */
.intro-leaf.l::after,.intro-leaf.r::after{content:"";position:absolute;top:0;bottom:0;width:6px;
  background:linear-gradient(90deg,transparent,rgba(224,168,112,.9));}
.intro-leaf.l::after{right:0}
.intro-leaf.r::after{left:0;background:linear-gradient(270deg,transparent,rgba(224,168,112,.9))}

/* glowing gold seam where the leaves meet */
.intro-seam{position:absolute;left:50%;top:0;bottom:0;width:3px;transform:translateX(-50%);z-index:6;
  background:linear-gradient(180deg,transparent,#ffd9a3 18%,#ffe9c8 50%,#ffd9a3 82%,transparent);
  box-shadow:0 0 28px 7px rgba(255,201,122,.7);
  animation:intro-seam 1.4s ease forwards}

/* warm light that floods out as the doors part */
.intro-flood{position:absolute;left:50%;top:50%;width:64vw;height:88vh;transform:translate(-50%,-50%);
  border-radius:50%;z-index:5;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(closest-side,rgba(255,214,150,.6),rgba(255,190,110,.18) 44%,transparent 72%);
  animation:intro-flood 2.7s ease .45s forwards}

/* RM crest on the seam, fades as the doors open */
.intro-crest{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:7;
  animation:intro-crest 1.7s ease forwards}
.intro-crest img{display:block;width:132px;height:auto;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.7)) drop-shadow(0 0 16px rgba(255,201,122,.45))}

@keyframes intro-open-l{from{transform:rotateY(0)}to{transform:rotateY(-115deg)}}
@keyframes intro-open-r{from{transform:rotateY(0)}to{transform:rotateY(115deg)}}
@keyframes intro-seam{0%,14%{opacity:1}46%{opacity:0}100%{opacity:0}}
@keyframes intro-crest{0%,10%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  46%{opacity:0;transform:translate(-50%,-50%) scale(1.18)}100%{opacity:0}}
@keyframes intro-flood{0%{opacity:0;transform:translate(-50%,-50%) scale(.55)}
  32%{opacity:.95}58%{opacity:.65;transform:translate(-50%,-50%) scale(1.1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.35)}}
@keyframes intro-veil{0%,80%{opacity:1}100%{opacity:0;visibility:hidden}}

/* click/scroll skip (intro.js) — quick fade regardless of animation phase */
.intro.intro-skip{animation:none !important;opacity:0;transition:opacity .34s ease;
  pointer-events:none;visibility:visible}