/* The front door. A title, the world turning over behind it, and one box for
   the word. Everything here is scoped to <body class="at-door">, which goes
   the moment a word opens a side, so none of it leaks into the frame. */

body.at-door {
  --ink:#f3eee1; --dim:rgba(243,238,225,.66);
  height:100vh; height:100dvh; margin:0; padding:0; background:#0b0d11; color:var(--ink);
  font-family:'Alegreya Sans', system-ui, sans-serif;
  display:grid; place-items:center; overflow:hidden;
  color-scheme:dark;
}
html:has(body.at-door) { background:#0b0d11; }
body.at-door #shell { display:none !important; }

/* ---------------------------------------------------- the world, turning over */
.stage { position:fixed; inset:0; z-index:0; overflow:hidden; }
.slide {
  position:absolute; inset:-3%;
  background-size:cover; background-position:center 42%;
  opacity:0; transform:scale(1.04);
  transition:opacity 2200ms ease, transform 9000ms linear;
}
.slide.on { opacity:.62; transform:scale(1.10); }
.vignette {
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 0%, rgba(8,10,14,.62) 62%, rgba(8,10,14,.92) 100%),
    linear-gradient(180deg, rgba(8,10,14,.72) 0%, rgba(8,10,14,.18) 35%, rgba(8,10,14,.86) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 26%, transparent) 0%, transparent 58%);
  transition:background 2200ms ease;
}

/* -------------------------------------------------------------------- the door */
body.at-door .door {
  position:relative; z-index:1; text-align:center; width:min(440px, 100%);
  padding:28px 20px calc(28px + env(safe-area-inset-bottom));
  animation:settle 900ms cubic-bezier(.22,.7,.3,1) both;
}
@keyframes settle { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

body.at-door .title {
  font-family:'Marcellus', Georgia, serif; font-weight:400; color:var(--ink);
  font-size:clamp(44px, 12vw, 104px); letter-spacing:.09em; margin:0;
  text-shadow:0 4px 44px rgba(0,0,0,.8), 0 1px 3px rgba(0,0,0,.9);
}
body.at-door .line { color:var(--dim); margin:10px 0 0; font-size:clamp(14px,3.4vw,17px); letter-spacing:.04em; min-height:1.4em; }

/* the word */
.word {
  margin:clamp(28px,6vh,48px) auto 0; width:min(340px, 100%);
  padding:18px 18px 16px; border-radius:15px;
  border:1px solid rgba(243,238,225,.20);
  background:rgba(14,17,22,.52);
  -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
}
.word-ask {
  display:block; font-family:'Marcellus', Georgia, serif; font-size:clamp(19px,4.6vw,23px);
  letter-spacing:.04em; margin-bottom:12px;
}
.word input {
  width:100%; padding:12px 14px; border-radius:11px; font:inherit; font-size:17px;
  border:1px solid rgba(243,238,225,.26); background:rgba(243,238,225,.10); color:var(--ink);
  text-align:center; letter-spacing:.14em; margin-bottom:10px;
}
.word input:focus { outline:none; border-color:color-mix(in srgb, var(--accent) 72%, rgba(243,238,225,.5)); }
.word button {
  width:100%; padding:12px; border:0; border-radius:11px; cursor:pointer; font:inherit; font-size:17px;
  background:color-mix(in srgb, var(--accent) 80%, #2a2016); color:#fff8ea;
  transition:filter 200ms ease;
}
.word button:hover { filter:brightness(1.1); }
.word button:disabled { opacity:.6; cursor:default; }
.word-trouble { color:#ffb49a; min-height:1.3em; margin:10px 0 0; font-size:15px; }
.word-trouble:empty { margin:0; min-height:0; }

body.at-door .where { margin:clamp(22px,4vh,34px) 0 0; font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(243,238,225,.42); }

@media (prefers-reduced-motion: reduce) {
  .slide { transition:opacity 600ms ease; transform:none; }
  .slide.on { transform:none; }
  body.at-door .door { animation:none; }
}