*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: #0b0a09;
  color: #d9cfbd;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  overflow: hidden;
  cursor: default;
  -webkit-font-smoothing: antialiased;
}

/* --vvt / --vvh track the part of the screen that is actually visible
   (set by door.js), so the door moves up above a phone's keyboard. */
#motes {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  transition: opacity 2s ease;
}
body.open #motes { opacity: 0.35; }

#door {
  position: fixed; left: 0; right: 0;
  top: var(--vvt, 0px);
  height: var(--vvh, 100vh);
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  place-items: center;
  transition: top 0.25s ease, height 0.25s ease;
}

.numbers {
  grid-row: 2;
  margin: 0;
  font-size: clamp(0.9rem, 2.2vw, 1.45rem);
  font-weight: 400;
  letter-spacing: 0.12em;
  white-space: nowrap;
  text-align: center;
  padding: 0 1.5rem;
  transition: opacity 1.8s ease, filter 1.8s ease;
  user-select: none;
}
/* Each number surfaces in turn; the dots arrive with the number after them. */
.numbers span, .numbers i {
  font-style: normal;
  opacity: 0;
  animation: surface 1.6s ease forwards;
}
.numbers span:nth-of-type(1) { animation-delay: 0.8s; }
.numbers i:nth-of-type(1), .numbers span:nth-of-type(2) { animation-delay: 1.9s; }
.numbers i:nth-of-type(2), .numbers span:nth-of-type(3) { animation-delay: 3.0s; }
.numbers i:nth-of-type(3), .numbers span:nth-of-type(4) { animation-delay: 4.1s; }
.numbers i:nth-of-type(4), .numbers span:nth-of-type(5) { animation-delay: 5.2s; }
.numbers i:nth-of-type(5), .numbers span:nth-of-type(6) { animation-delay: 6.3s; }
@keyframes surface {
  from { opacity: 0; filter: blur(4px); }
  to   { opacity: 1; filter: blur(0); }
}

.whisper {
  grid-row: 3;
  align-self: start;
  margin: 2.4rem 0 0;
  font-style: italic;
  font-size: clamp(0.8rem, 1.3vw, 0.95rem);
  letter-spacing: 0.08em;
  color: rgba(217, 207, 189, 0.32);
  opacity: 0;
  animation: surface 3s ease 10s forwards;
  user-select: none;
  transition: opacity 1.4s ease;
}

.mark {
  position: absolute;
  grid-row: 1 / -1;
  height: clamp(7rem, 26vh, 12rem);
  width: auto;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 2.4s ease 0.8s, transform 3s ease 0.8s;
  pointer-events: none;
}

.typed {
  position: fixed; left: 0; right: 0;
  top: calc(var(--vvt, 0px) + var(--vvh, 100vh) * 0.86);
  text-align: center;
  font-size: 1.1rem;
  letter-spacing: 0.35em;
  color: rgba(217, 207, 189, 0.22);
  height: 1.6rem;
  transition: opacity 1s ease, top 0.25s ease;
}
.typed span#typed span { transition: opacity 1.6s ease; }
.typed span#typed span.gone { opacity: 0; }

body.open .numbers { opacity: 0; filter: blur(6px); }
body.open .whisper { opacity: 0 !important; animation: none; }
body.open .mark { opacity: 1; transform: scale(1); }
body.open .typed { opacity: 0; }

/* Off-screen input so phones can raise a keyboard on tap. */
#sink {
  position: fixed; left: -9999px; top: 0;
  width: 1px; height: 1px; opacity: 0;
  font-size: 16px; /* prevents iOS zoom */
}

/* Phones: larger numbers, tighter spacing so they stay on one line;
   typed letters sit close under the whisper, well clear of the keyboard. */
@media (max-width: 520px) {
  .numbers { font-size: 5.2vw; letter-spacing: 0.03em; padding: 0 0.6rem; }
  .whisper { font-size: 3.4vw; margin-top: 1.6rem; }
  .typed { font-size: 1.25rem; color: rgba(217, 207, 189, 0.4); top: calc(var(--vvt, 0px) + var(--vvh, 100vh) * 0.78); }
}

@media (prefers-reduced-motion: reduce) {
  .numbers, .mark, .typed, #door { transition: none; }
  .numbers span, .numbers i, .whisper { animation: none; opacity: 1; }
}