/* §41 THE DOOR, OPENING — the seal's frames the other way round, with the
   winter they have been sealed away from in the hole. door_7..door_10 are
   door_3..door_0 with outside_3 put in where the fire was. */
.dro{animation:droShake 10s cubic-bezier(.36,.07,.19,.97) forwards}
.dro .fr{animation:drCut 10s steps(1,end) forwards}
.dro .o0{animation-delay:0s}   .dro .o1{animation-delay:1.8s}
.dro .o2{animation-delay:3.4s} .dro .o3{animation-delay:4.6s}
.dro .o4{animation-delay:5.8s} .dro .o5{animation-delay:7.0s}
.dro .dro-cold{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(28% 46% at 60% 44%, rgba(225,238,255,.55), rgba(225,238,255,0) 70%);
  animation:droCold 10s ease-out forwards}
@keyframes droCold{0%,68%{opacity:0}80%{opacity:1}100%{opacity:.55}}
@keyframes droShake{
  0%,17%{transform:translate(0,0)}
  18%{transform:translate(-7px,4px)}  19.5%{transform:translate(6px,-4px)}
  21%{transform:translate(-4px,-2px)} 22.5%{transform:translate(3px,2px)}
  24%,100%{transform:translate(0,0)} }
@media (prefers-reduced-motion:reduce){
  .dro{animation:none} .dro .fr{animation:none;opacity:0} .dro .o5{opacity:1} .dro .dro-cold{animation:none;opacity:.55} }

#enclaveDoor{position:absolute;inset:0;z-index:404;background:#02060a;display:flex;flex-direction:column;
  justify-content:center;transition:opacity .8s ease}
#enclaveDoor.gone{opacity:0}
#enclaveDoor .dr{flex:0 0 auto}
#enclaveDoor .dro-cap{position:absolute;left:0;right:0;bottom:3%;text-align:center;font-family:var(--mono,monospace);
  font-size:12px;letter-spacing:.2em;color:#dfe9f3;text-shadow:0 1px 6px #000}