* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #171a19; }
body { overflow: hidden; }
body::before {
  content: "";
  position: fixed;
  inset: -35px;
  background: url('/assets/elandor-cover.png') center / cover no-repeat;
  filter: blur(24px) brightness(.38);
  pointer-events: none;
}
.scene {
  position: relative;
  height: 100vh;
  height: 100svh;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
}
.cover {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: contain;
  object-position: center;
}
.sign {
  position: absolute;
  left: 50%;
  bottom: max(1.5vh, env(safe-area-inset-bottom));
  width: min(46vh, 88vw, 550px);
  width: min(46svh, 88vw, 550px);
  height: auto;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 115%) scale(.92);
  filter: drop-shadow(0 14px 18px rgb(0 0 0 / .65));
  pointer-events: none;
}
.sign.is-visible {
  visibility: visible;
  animation: sign-arrives 1000ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes sign-arrives {
  0% { opacity: 0; transform: translate(-50%, 115%) scale(.92); }
  72% { opacity: 1; transform: translate(-50%, -3%) scale(1.01); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .sign.is-visible { animation: none; opacity: 1; transform: translate(-50%, 0); }
}