/* =============================================================
   The Threshold — candlelit login scene with the sealed tome.
   Phase machine on .book[data-phase]: closed → breaking →
   opening → open. Pure CSS transitions; JS only swaps phases.
   ============================================================= */

.threshold {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  background: radial-gradient(120% 90% at 50% 0%, #241812 0%, #160f09 55%, #0e0a06 100%);
}

/* ambient light */
.glow { position: absolute; pointer-events: none; }
.glow-1 {
  top: -140px; left: -80px; width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(214, 150, 70, .28), transparent 62%);
  animation: flicker 5s ease-in-out infinite;
}
.glow-2 {
  top: -100px; right: -90px; width: 440px; height: 440px;
  background: radial-gradient(circle, rgba(196, 120, 60, .18), transparent 64%);
  animation: flicker 6.5s ease-in-out infinite .8s;
}
.vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 70% at 50% 46%, transparent 42%, rgba(0, 0, 0, .55) 100%);
  pointer-events: none;
}
.mote {
  position: absolute;
  border-radius: 50%;
  background: rgba(224, 180, 110, .75);
  animation: drift linear infinite;
  pointer-events: none;
}

.threshold-app-label {
  font: 400 10px var(--font-mono);
  letter-spacing: .42em;
  text-transform: uppercase;
  color: #b98d4e;
  margin-bottom: 28px;
  animation: breathe 6s ease-in-out infinite;
  text-align: center;
}

.threshold-foot {
  margin-top: 26px;
  font: 400 10px var(--font-mono);
  letter-spacing: .14em;
  color: rgba(216, 203, 172, .35);
  text-align: center;
}

/* ---------- the tome ---------- */
.book-perspective {
  position: relative;
  width: min(384px, 92vw);
  height: 496px;
  perspective: 1700px;
}
.book {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

/* inside first page.
   While the book is closed only ONE plane exists for hit-testing: the
   page is visibility:hidden (a hidden element can neither swallow
   events nor cursor state in any engine — no reliance on 3D stacking
   rules, which Firefox and Chromium resolve differently). It becomes
   visible the instant the cover starts to swing, and interactive only
   once fully open. */
.book-page {
  position: absolute;
  inset: 0;
  transform: translateZ(-1px);
  visibility: hidden;
  pointer-events: none;
  background: linear-gradient(120deg, #e9dfc6, #e3d8bd);
  border-radius: 4px 8px 8px 4px;
  box-shadow: 0 30px 60px -22px rgba(0, 0, 0, .8), inset 14px 0 26px -14px rgba(60, 40, 18, .5);
  overflow: hidden;
}
.book[data-phase="opening"] .book-page,
.book[data-phase="open"] .book-page { visibility: visible; }
/* Once open, the page returns to the front plane (a child behind its
   parent's z=0 plane would lose hit-testing to the parent itself). */
.book[data-phase="open"] .book-page { transform: translateZ(0); pointer-events: auto; }
.book-page-grain {
  position: absolute;
  inset: 0;
  filter: url(#grain);
  mix-blend-mode: multiply;
  opacity: .4;
  pointer-events: none;
}
.book-page-spine {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 20px;
  background: linear-gradient(90deg, rgba(60, 40, 18, .28), transparent);
  pointer-events: none;
}
.book-page-inner {
  position: relative;
  height: 100%;
  padding: 36px 32px 28px;
  display: flex;
  flex-direction: column;
}
.book-page-heading { text-align: center; }
.book-page-kicker {
  font: 400 9.5px var(--font-mono);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #9a7a3e;
}
.book-page-name {
  margin: 8px 0 0;
  font-family: var(--font-sc);
  font-weight: 400;
  font-size: 29px;
  line-height: 1.02;
  color: var(--ink-900);
}
.moon-row { display: flex; justify-content: center; gap: 9px; }
.page-moons { margin: 15px 0 4px; }
.moon {
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #efe6cf, #c9b98f);
  box-shadow: inset 0 -1px 2px rgba(60, 40, 18, .5);
}
.moon.big { width: 13px; height: 13px; }
.moon.gold {
  background: radial-gradient(circle at 40% 35%, #c08a44, #7a5320);
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .4);
}
.book-page-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(58, 44, 20, .4), transparent);
  margin: 13px 0 16px;
}

.book-page-preview { transition: opacity 1.1s ease .35s; opacity: 0; }
.book[data-phase="open"] .book-page-preview { opacity: 1; }

.book-page-dateline {
  font: 400 10px var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--label);
}
.book-page-welcome {
  font-family: var(--font-fell);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-600);
  margin: 5px 0 14px;
}
.book-page-items { display: flex; flex-direction: column; gap: 9px; }
.book-page-item { display: flex; gap: 10px; align-items: flex-start; }
.book-item-diamond { color: var(--accent); font-size: 12px; margin-top: 2px; }
.book-page-item-text { font-size: 14.5px; line-height: 1.45; color: var(--ink-700); }
.book-page-item-text em { font-family: var(--font-fell); }
.book-page-item-teaser {
  font-size: 14px;
  line-height: 1.45;
  color: #5a4a30;
  font-style: italic;
  font-family: var(--font-fell);
}
.book-page-item .wax-dot { flex: none; }

.enter-area {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  transition: opacity .9s ease .7s, transform .9s ease .7s;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}
.book[data-phase="open"] .enter-area {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.btn-enter {
  padding: 12px 26px;
  letter-spacing: .1em;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .6);
  transition: letter-spacing .3s ease, filter .3s ease;
}
.btn-enter:hover { letter-spacing: .16em; }
.reseal {
  background: none;
  border: none;
  font: 400 10px var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--stamp);
}

/* ---------- front cover ---------- */
.book-cover {
  position: absolute;
  inset: 0;
  z-index: 5;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-origin: left center;
  transition: transform 1.4s cubic-bezier(.72, .02, .24, 1);
  transform: rotateY(0deg);
}
.book[data-phase="opening"] .book-cover,
.book[data-phase="open"] .book-cover { transform: rotateY(-166deg); pointer-events: none; }

.cover-leather {
  position: absolute;
  inset: 0;
  border-radius: 4px 8px 8px 4px;
  background: linear-gradient(135deg, #4a2f1e, #33200f 60%, #291a0c);
  box-shadow: inset 0 0 0 2px rgba(20, 12, 6, .6), inset 0 0 40px rgba(0, 0, 0, .5), 0 30px 60px -20px rgba(0, 0, 0, .85);
  overflow: hidden;
}
.cover-grain {
  position: absolute;
  inset: 0;
  filter: url(#grain);
  mix-blend-mode: overlay;
  opacity: .5;
  pointer-events: none;
}
.cover-spine {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 26px;
  background: linear-gradient(90deg, rgba(0, 0, 0, .5), transparent);
  pointer-events: none;
}
.cover-frame {
  position: absolute;
  inset: 16px;
  border: 1.5px solid rgba(201, 162, 74, .5);
  border-radius: 3px;
  box-shadow: inset 0 0 0 3px rgba(20, 12, 6, .4);
  pointer-events: none;
}

.cover-title-block { position: absolute; top: 44px; left: 0; right: 0; text-align: center; }
.cover-anno {
  font: 400 9px var(--font-mono);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(201, 162, 74, .7);
}
.cover-title {
  margin: 8px 0 0;
  font-family: var(--font-sc);
  font-size: 29px;
  line-height: 1;
  color: var(--gilt);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
}

.cover-moons { position: absolute; top: 142px; left: 0; right: 0; gap: 13px; }
.emboss {
  width: 12px; height: 12px; border-radius: 50%;
  background: #2a1a0c;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .7), inset 0 -1px 1px rgba(201, 162, 74, .25);
}
.emboss.big {
  width: 15px; height: 15px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .8), inset 0 -1px 1px rgba(201, 162, 74, .35);
}

.cover-fields {
  position: absolute;
  top: 188px; left: 0; right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 56px;
}
.cover-fields input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(201, 162, 74, .35);
  padding: 6px 2px;
  text-align: center;
  font-family: var(--font-fell);
  font-style: italic;
  font-size: 15.5px;
  color: #e6d3a8;
}
.cover-fields input:focus { border-bottom-color: rgba(201, 162, 74, .85); }
.cover-fields input::placeholder { color: rgba(230, 211, 168, .55); }

/* the wax seal (submit button) */
.seal-button {
  position: absolute;
  left: 50%;
  top: 300px;
  transform: translateX(-50%);
  width: 96px;
  height: 96px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.seal-button:hover { filter: brightness(1.1); }
.seal-glow {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent) 40%, transparent), transparent 68%);
  animation: breathe 3.4s ease-in-out infinite;
}
.seal-half { transition: transform .75s cubic-bezier(.3, .7, .3, 1), opacity .75s ease; }
.seal-half span { display: block; width: 44px; height: 88px; }
.seal-half-left span {
  border-radius: 88px 0 0 88px;
  background: radial-gradient(120% 90% at 80% 30%, color-mix(in oklab, var(--accent), #fff 8%), var(--accent-deep) 70%);
  box-shadow: inset -2px 0 4px rgba(0, 0, 0, .4);
}
.seal-half-right span {
  border-radius: 0 88px 88px 0;
  background: radial-gradient(120% 90% at 20% 30%, var(--accent), color-mix(in oklab, var(--accent-deep), #000 12%) 70%);
  box-shadow: inset 2px 0 4px rgba(0, 0, 0, .4);
}
.book:not([data-phase="closed"]) .seal-half-left { transform: translate(-52px, 6px) rotate(-38deg); opacity: 0; }
.book:not([data-phase="closed"]) .seal-half-right { transform: translate(52px, 6px) rotate(38deg); opacity: 0; }

.seal-emblem { position: absolute; transition: transform .5s ease, opacity .4s ease; }
.seal-emblem span {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 1.5px solid rgba(240, 200, 180, .4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sc);
  font-size: 34px;
  color: #e9c9b8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.book:not([data-phase="closed"]) .seal-emblem { transform: scale(1.5); opacity: 0; }

.cover-caption {
  position: absolute;
  bottom: 34px;
  left: 0; right: 0;
  text-align: center;
  font: 400 10px var(--font-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(201, 162, 74, .6);
  animation: breathe 3s ease-in-out infinite;
}

/* gentle in-world failure message */
.threshold-msg {
  margin-top: 14px;
  font-family: var(--font-fell);
  font-style: italic;
  font-size: 14px;
  color: rgba(230, 211, 168, .8);
  text-align: center;
  min-height: 20px;
}