/* The door: the 3D studio behind / and /join, and Mr. Hootman on the card.
   Art comes from 99 Attachments/Art Sources/login-door. Loaded after each page's own styles. */
html,body{height:auto;min-height:100%}
body{margin:0;min-height:100dvh;overflow-x:hidden;overflow-y:auto;color:var(--ink);
  background:#0B2C5F;
  font-family:ui-rounded,"SF Pro Rounded","Segoe UI Variable Display","Segoe UI",-apple-system,BlinkMacSystemFont,sans-serif}
.drScene{position:fixed;inset:-14px;z-index:0;background:#14376F url(/door/studio.webp?v=1) 28% 50%/cover no-repeat;
  transform:translate(var(--dx,0),var(--dy,0));transition:transform .5s cubic-bezier(.2,.8,.25,1)}
.drScene:after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(11,44,95,0) 45%,rgba(11,44,95,.55) 100%)}
.drSpark{position:fixed;z-index:1;width:7px;height:7px;border-radius:50%;background:#FFE27A;pointer-events:none;
  box-shadow:0 0 12px 3px rgba(255,214,110,.75);opacity:0;animation:drRise 9s linear infinite}
@keyframes drRise{0%{opacity:0;transform:translateY(0) scale(.5)}15%{opacity:.9}
  80%{opacity:.5}100%{opacity:0;transform:translateY(-34vh) translateX(26px) scale(1)}}

.drHoot{position:absolute;z-index:3;left:50%;top:-136px;width:164px;height:164px;margin:0 0 0 -82px;padding:0;
  background:none;border:0;cursor:pointer;display:block;box-shadow:none;transform-origin:50% 92%;
  animation:drBob 4.6s ease-in-out infinite}
.drHoot:hover,.drHoot:active{background:none;box-shadow:none;transform:none}
.drHoot:focus-visible{outline:3px solid #FFE27A;outline-offset:2px;border-radius:50%}
.drHoot img{position:absolute;inset:0;width:100%;height:100%;display:block;visibility:hidden;pointer-events:none;
  filter:drop-shadow(0 8px 8px rgba(11,20,50,.35))}
.drHoot img.on{visibility:visible}
.drHoot.drBop{animation:drBop .36s cubic-bezier(.2,.8,.25,1)}
@keyframes drBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes drBop{0%{transform:scale(1.05,.93)}55%{transform:scale(.97,1.05) translateY(-5px)}100%{transform:none}}

.dr-go{box-shadow:0 5px 0 #071D42;position:relative}
.dr-go:hover{box-shadow:0 7px 0 #071D42}
.dr-go:active{box-shadow:0 1px 0 #071D42;transform:translateY(4px)}
.msg.wait{display:block;background:#FFF3D1;color:#6B4A00;border:1.5px solid var(--gold)}
.drPow{width:max-content;max-width:100%;margin:1.2em auto .4em;padding:.35em 1em;border-radius:999px;
  background:rgba(7,29,66,.72);color:#DCE8FF;font-size:12px;font-weight:600;letter-spacing:.08em}

@media (max-width:640px){
  .drScene{background-position:24% 0;background-size:auto 46vh;background-color:transparent;inset:0;bottom:auto;height:46vh;
    -webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
  .drScene:after,.drSpark{display:none}
  .eyebrow{letter-spacing:.12em}
}
@media (prefers-reduced-motion:reduce){
  .drHoot,.drHoot.drBop,.drSpark{animation:none}
  .drSpark{display:none}
  .drScene{transition:none;transform:none}
}