/* Entrance to The Room: a pair of gallery doors with the artist's name, opening onto the room in full screen. */
.gate{position:fixed;inset:0;z-index:20;perspective:2400px;perspective-origin:50% 50%;overflow:hidden;display:grid;place-items:center;background:#030406}
.doors{position:absolute;inset:0;display:flex;transform-style:preserve-3d}
.door{position:relative;flex:1 1 50%;height:100%;backface-visibility:hidden;transition:transform 2.8s cubic-bezier(.62,0,.22,1);
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.014) 0 1px,transparent 1px 9px),
    linear-gradient(180deg,rgba(255,255,255,.035),rgba(0,0,0,0) 30%,rgba(0,0,0,.35)),
    #0c0d11}
.door.left{transform-origin:left center;background-position:0 0}
.door.right{transform-origin:right center}
.door::after{content:"";position:absolute;inset:0;background:#000;opacity:0;transition:opacity 2.8s ease;pointer-events:none}
.pane{position:absolute;top:7%;bottom:7%;left:11%;right:11%;border:1px solid rgba(217,184,115,.16);
  box-shadow:inset 0 0 0 12px rgba(0,0,0,.22),inset 0 0 0 13px rgba(217,184,115,.07),inset 0 30px 60px rgba(0,0,0,.55);
  background:linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,0) 42%)}
.pull{position:absolute;top:64%;height:22%;width:7px;border-radius:4px;
  background:linear-gradient(90deg,#6d5527,#f0d89a 42%,#b8964a 70%,#7a5f2b);
  box-shadow:0 0 18px rgba(217,184,115,.14),2px 4px 10px rgba(0,0,0,.6)}
.left .pull{right:5%}.right .pull{left:5%}
.seam{position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,rgba(255,236,200,.55) 25%,rgba(200,225,255,.6) 75%,transparent);
  filter:blur(.4px);opacity:.55;-webkit-mask-image:linear-gradient(180deg,#000 18%,transparent 24%,transparent 60%,#000 66%);mask-image:linear-gradient(180deg,#000 18%,transparent 24%,transparent 60%,#000 66%);animation:breathe 4.5s ease-in-out infinite;transition:width 1s ease,opacity 1s ease,filter 1s ease}
@keyframes breathe{50%{opacity:.85}}
.welcome{position:relative;z-index:2;max-width:min(46ch,90vw);margin-top:-12vh;text-align:center;display:flex;flex-direction:column;align-items:center;transition:opacity .7s ease,transform .9s ease}
.who{margin:0 0 16px;font:500 clamp(15px,1.5vw,20px)/1.3 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--label);padding-left:.3em}
.what{margin:0;font:300 italic clamp(19px,2.3vw,30px)/1.2 var(--serif);color:var(--label);white-space:nowrap}
.how{margin:14px 0 0;font:400 clamp(14px,1.25vw,16px)/1.55 var(--sans);color:var(--soft)}
.enter{margin-top:clamp(30px,5.5vh,50px);background:none;border:0;color:var(--ink);cursor:pointer;
  font:500 13px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;padding:18px 30px 18px calc(30px + .32em);
  position:relative;transition:color .4s ease,letter-spacing .6s ease}
/* hairline frame that slowly fades out and back in, with a soft glow */
.enter::before{content:"";position:absolute;inset:0;border:1px solid rgba(217,184,115,.85);border-radius:1px;
  box-shadow:0 0 14px rgba(217,184,115,.28),inset 0 0 10px rgba(217,184,115,.12);opacity:0;animation:hairline 4.2s ease-in-out infinite;pointer-events:none}
@keyframes hairline{0%,100%{opacity:0}50%{opacity:1}}
.enter:hover,.enter:focus-visible{color:var(--gold);letter-spacing:.36em}
.enter:hover::before,.enter:focus-visible::before{animation-play-state:paused;opacity:1}
.enter:focus-visible{outline:none}

/* Opening */
.gate.opening .welcome{opacity:0;transform:translateY(-8px)}
.gate.opening .seam{width:10px;opacity:1;filter:blur(6px);animation:none;-webkit-mask-image:none;mask-image:none}
.gate.open .door.left{transform:rotateY(-100deg)}
.gate.open .door.right{transform:rotateY(100deg)}
.gate.open .door::after{opacity:.75}
.gate.open .seam{opacity:0}
.gate.open{background:transparent;transition:background-color .6s ease}
.gate.gone{display:none}

/* Instructions: bright on arrival, then dimmed, gone once a painting is brought forward. */
.hint{color:var(--ink);text-shadow:0 1px 14px #000,0 0 2px #000;font-size:15px}
.hint.dim{opacity:.3;transition:opacity 2.5s ease}
.hint.gone{opacity:0;transition:opacity 1.2s ease}

/* The room behind the doors */
body.gated .focus{opacity:0!important}
body.gated .top .mark{visibility:hidden}
body.gated .hint,body.walking .hint,body.walking .focus{opacity:0!important}
body.walking .leave,body.walking .top{opacity:0;pointer-events:none}
body.walking #stage{cursor:default}
body.immersed .top{opacity:0;pointer-events:none;transition:opacity .8s ease}
.leave{position:fixed;top:14px;right:var(--gut);z-index:6;background:none;border:0;color:var(--soft);font:400 13px/1 var(--sans);letter-spacing:.06em;padding:10px 0;cursor:pointer;opacity:.6;transition:opacity .3s ease}
.leave:hover,.leave:focus-visible{opacity:1;color:var(--ink)}
@media (max-width:640px){.pull{width:5px}.left .pull{right:7%}.right .pull{left:7%}.welcome{margin-top:-6vh}}
@media (prefers-reduced-motion:reduce){.door,.door::after,.welcome{transition:none}.seam{animation:none}.enter::before{animation:none;opacity:.7}.gate.open .door{opacity:0}}

/* The logo sits above her name on the doors, then glides to the top centre as they open. */
:root{--brand-h:clamp(44px,10.5vh,96px)}
.brandslot{display:block;height:var(--brand-h);margin-bottom:clamp(8px,2vh,18px);aspect-ratio:152/240}
.brand{position:fixed;left:50%;top:0;height:var(--brand-h);width:auto;z-index:25;pointer-events:none;opacity:0;transform-origin:50% 0;transform:translate(-50%,var(--y,20vh)) scale(1);transition:opacity .6s ease}
.brand.seated{opacity:1}
.brand.glide{transform:translate(-50%,10px) scale(calc(var(--s,.5)*.82));transition:transform 1.9s cubic-bezier(.45,0,.2,1),opacity .6s ease}
@media (max-width:1180px){body.menu .brand{opacity:0}}
.welcome{margin-top:-26vh}
@media (max-height:700px){.pull{top:76%;height:16%}.welcome{margin-top:-16vh}}
@media (max-height:480px){:root{--brand-h:34px}.how{display:none}.pull{display:none}.welcome{margin-top:-18vh}body.gated .top .mark{display:none}}
@media (prefers-reduced-motion:reduce){.brand,.brand.glide{transition:none}}