/* jameelgordon.com — a single-page web application. three states, one screen:
   the door (the g, filling the screen, on pure white) → the welcome (the
   encounter, verbatim, compact) → scarlett (the same design language).
   black on white, the feel of our artifacts. */
html, body { height: 100%; }
body.theme-jg {
  --ink: #000;
  --paper: #fff;
  --line: #000;
  --bubble: transparent;
  --visitor-bubble: rgba(0, 0, 0, 0.07);
  margin: 0;
  background: #fff;
  color: #000;
  font-family: Georgia, 'Times New Roman', serif;
  display: flex;
  flex-direction: column;
}
.theme-jg main {
  flex: 1 1 auto;
  min-height: 0;
  display: block;
}
.screen { height: 100%; }

/* state 1 — the door: the g fills the entire screen, edge to edge, on pure
   white. no text, no hint — the g itself is the tap target. */
#doorStage {
  background: #fff;
  perspective: 1400px;
}
#gDoor {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  transform-style: preserve-3d;
}
#gDoor img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#doorStage.turning #gDoor { animation: revolve 1.25s cubic-bezier(0.6, 0.05, 0.3, 0.95) forwards; }
@keyframes revolve {
  0% { transform: rotateY(0deg); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: rotateY(1800deg); opacity: 0; }
}

/* state 2 — the welcome: the text sits compactly, vertically centered, with
   no empty bands above or below it. */
#welcomeScreen {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.5rem;
  box-sizing: border-box;
}
#welcomeScreen[hidden] { display: none; }
.welcome-text { max-width: 46rem; }
.welcome-text .beat { margin-bottom: 1.1rem; }
.welcome-text .beat:last-child { margin-bottom: 0; }
.welcome-text p {
  font-size: clamp(1.12rem, 2.3vw, 1.45rem);
  line-height: 1.45;
  margin: 0 0 0.85rem;
}
.welcome-text p:last-child { margin-bottom: 0; }
.welcome-nav { text-align: center; margin: 1.4rem 0 0; }

/* the continue button is scarlett's pill — the same .choice component as
   her door buttons, styled once in assets/scarlett.css so the two can
   never drift apart. (the g-silhouette button was retired 2026-10-28;
   the pill itself is now the 'button' ending of the WELCOME_FLOW switch —
   the default 'cursor' ending leaves the nav hidden and the caret blinking.) */

/* the typewriter caret — a plain block that blinks while the welcome is
   being typed. in the welcome's cursor flow (WELCOME_FLOW, the default) it
   never leaves: when the text stands whole it keeps blinking at the end,
   the resting state and the whole invitation. in button flow it is gone
   when the text stands whole and the pill stands instead. */
.typer-caret {
  display: inline-block;
  width: 0.55em;
  height: 1.02em;
  margin-left: 2px;
  background: #000;
  vertical-align: -0.14em;
  animation: caretBlink 1.05s steps(1) infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }

/* state 3 — scarlett's screen shares the welcome screen's measure and type;
   her own styles live in assets/scarlett.css, tuned to this design. */
#scarlettSection {
  overflow-y: auto;
  box-sizing: border-box;
  padding: 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#scarlettSection[hidden] { display: none; }