/* The front page, pageturn.game (BR1, 2026-09-29: "elegant, classy", "NOT … a vibe coded
 * HTML beginner website", "it can still be rather simple").
 *
 * A book's title page, in the theater's own colours: the shelf's one ink on black, and
 * nothing else. The type is the two families parked as brand fonts in July (the
 * theater's src/assets/fonts): Libre Baskerville's italic for the two ways in, Glacial
 * Indifference for the small print. Both are served from here because the page's
 * security policy allows fonts from this site only (firebase.json).
 *
 * Like the legal pages, this is a plain static file ahead of the theater app, so the
 * front door costs no framework. It shares nothing with splash.css, which the legal pages
 * and the paused Japanese page still use.
 *
 * Browsers keep this file for a week (firebase.json), so any change here moves the ?v=
 * number where list.html links it.
 */

/* Libre Baskerville subset to Latin; Glacial Indifference whole, converted only, since
   its licence reserves its name for unmodified copies. */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/splash/fonts/LibreBaskerville-Italic-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Glacial Indifference';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/splash/fonts/GlacialIndifference-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Glacial Indifference';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/splash/fonts/GlacialIndifference-Bold.woff2') format('woff2');
}

/* One ink, black behind it, as on the shelf: anything quieter is the same ink, fainter. */
:root {
  --night: #000;
  --ink: #f2f6ec;
  --ink-soft: rgba(242, 246, 236, 0.72);
  --ink-quiet: rgba(242, 246, 236, 0.5);
  --ink-faint: rgba(242, 246, 236, 0.28);
  --ink-hush: #747672; /* the fine print: 4.5 to 1 on black, and no fainter */
  --wrong: #f2b8b0;

  --serif: 'Libre Baskerville', Baskerville, Georgia, serif;
  --door-size: clamp(1.9rem, 5vw, 2.5rem); /* Read Stories, Create Stories, Join Discord */
  --sans: 'Glacial Indifference', 'Avenir Next', 'Century Gothic', sans-serif;

  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

body.front {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  background: var(--night);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 6px;
  border-radius: 2px;
}

/* ---------- the title page ---------- */

.title-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(3rem + env(safe-area-inset-top, 0px)) 1rem 2.5rem;
  text-align: center;
}

.wordmark {
  margin: 0;
  line-height: 0;
}

.wordmark img {
  display: block;
  width: clamp(15rem, 62vw, 30rem);
  height: auto;
}

.rule {
  width: clamp(7rem, 26vw, 12rem);
  margin: clamp(1.25rem, 3.5vw, 2rem) auto clamp(2.25rem, 6vw, 3.25rem);
  border: 0;
  border-top: 1px solid var(--ink-quiet);
}

/* The two ways in. Always underlined, faintly, so they read as links with no pointer to
   hover (BR1 wants what can be pressed to look it). The line fills in bright under a mouse
   or the keyboard; on a phone, a tap fills it and the next page opens once it is full
   (front.js). */
/* Three columns, so the gutter sits at the page's middle under the wordmark whatever
   the two links' lengths: each leans in towards it. On a phone they stack (below). */
.doors {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(1.5rem, 6vw, 2.75rem);
  width: 100%;
}

.door--left {
  justify-self: end;
}

.door--right {
  justify-self: start;
}

.door {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--door-size);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 0.15em;
  background:
    linear-gradient(var(--ink), var(--ink)) left bottom / 0% 1px no-repeat,
    linear-gradient(var(--ink-faint), var(--ink-faint)) left bottom / 100% 1px no-repeat;
  transition: background-size 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.door:focus-visible {
  background-size: 100% 1px, 100% 1px;
}

/* Filling under a pointer is for a mouse only. A phone treats a tap as a hover, so the
   line began filling and then stopped part-way when the browser left for the next page,
   like a loading bar that had frozen (BR1, 2026-09-29). */
@media (hover: hover) {
  .door:hover {
    background-size: 100% 1px, 100% 1px;
  }
}

/* A tap: the line fills, left to right, whatever the next page's own speed (front.js). */
.doors .door.is-going {
  animation: fill-line 0.55s cubic-bezier(0.45, 0.05, 0.35, 1) both;
}

@keyframes fill-line {
  from {
    background-size: 0% 1px, 100% 1px;
  }
  to {
    background-size: 100% 1px, 100% 1px;
  }
}

/* The book's gutter between its two pages. A border, not a filled box: a browser draws a
   border at least one screen pixel wide, where a one-pixel box can round away. */
.gutter {
  width: 0;
  height: 3.25rem;
  border-left: 1px solid var(--ink-faint);
}

/* On a phone the two pages stack, and the gutter goes. */
@media (max-width: 36rem) {
  .doors {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 1.1rem;
  }
  .door--left,
  .door--right {
    justify-self: center;
  }
  .gutter {
    display: none;
  }
}

/* Small print that can be pressed: "Email me with updates", and "Close" once signed up. */
.quiet-link {
  appearance: none;
  background: none;
  border: 0;
  padding: 0.6rem 0.25rem;
  font: inherit;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: var(--ink-faint);
  cursor: pointer;
  transition: color 0.2s, text-decoration-color 0.2s;
}

.quiet-link:focus-visible {
  color: var(--ink);
  text-decoration-color: var(--ink);
}

.updates {
  margin-top: clamp(2.5rem, 7vw, 3.75rem);
}

/* Discord on its own: the mark, and "Join Discord" beneath it in the size, hand and ink
   of Read Stories and Create Stories (BR1, 2026-09-29). Under a pointer its words
   underline the way those two do. A short rule, then X, Instagram and TikTok in grey. */
.elsewhere {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(2.75rem, 9vw, 4rem);
}

.social a {
  color: var(--ink-quiet);
  transition: color 0.2s;
}

.discord {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.25rem 0.5rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--door-size);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-decoration: none;
}

.discord span {
  padding-bottom: 0.15em;
  background: linear-gradient(var(--ink), var(--ink)) left bottom / 0% 1px no-repeat;
  transition: background-size 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.discord:focus-visible span {
  background-size: 100% 1px;
}

.discord svg {
  flex: none;
  width: 1.4em;
  height: 1.4em;
}

.divider {
  width: 2.5rem;
  margin: 1.4rem 0 0.6rem;
  border-top: 1px solid var(--ink-faint);
}

.social {
  display: flex;
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.social a {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
}

.social svg {
  width: 1.65rem;
  height: 1.65rem;
}

.social a:focus-visible {
  color: var(--ink);
}

/* One line where it fits; where it doesn't, lines of even length, never one link left alone
   on the last. Quiet on purpose, with no underline (BR1, 2026-09-29: "so eye catching"; no
   law asks for one: California's privacy law wants only a link on this page with the word
   "privacy" in it, Bus. & Prof. Code 22577(b)(3)). The grey is as dark as small text goes
   while still reading at 4.5 to 1 against the black, the usual accessibility standard. */
.fine-print {
  padding: 1.25rem 1rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
  font-size: 0.8rem;
  line-height: 2.2;
  text-align: center;
  text-wrap: balance;
}

.fine-print a {
  margin: 0 0.6rem;
  white-space: nowrap;
  color: var(--ink-hush);
  text-decoration: none;
  text-underline-offset: 4px;
  transition: color 0.2s;
}

.fine-print a:focus-visible {
  color: var(--ink-soft);
  text-decoration: underline;
}

/* What a mouse pointer does, kept from phones, where a tap would leave it stuck on. */
@media (hover: hover) {
  .quiet-link:hover {
    color: var(--ink);
    text-decoration-color: var(--ink);
  }
  .discord:hover span {
    background-size: 100% 1px;
  }
  .social a:hover {
    color: var(--ink);
  }
  .fine-print a:hover {
    color: var(--ink-soft);
    text-decoration: underline;
  }
}

/* ---------- the Create Stories placeholder (create.html) ---------- */

.soon {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--door-size);
  line-height: 1.3;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.title-page .back {
  margin-top: clamp(2rem, 6vw, 3rem);
}

/* ---------- The page fills ----------
   The page fills on load the way a page of a story does, and nothing pops on (BR1,
   2026-09-29). The wordmark is written in from left to right, and the rule draws out from
   its middle a beat after it starts; then Read Stories, Create Stories and Join Discord
   settle in one at a time, well apart; then the rest. Everything can be pressed from the
   first moment; only the drawing waits. It plays again on coming back with the browser's
   Back button (front.js), and not at all for anyone who has asked their device for less
   motion. The shelf's masthead plays the same (BetaIndex.vue).
   Its pace: each line's own fade is slow, and nothing waits for the one before it to
   finish. Every line has begun within about a second and a half, overlapping the last
   (BR1, 2026-09-30: "let's not do so much synchronous waiting, it feels like we're in
   line for an attraction"). */

@media (prefers-reduced-motion: no-preference) {
  .wordmark img {
    -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
    mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
    -webkit-mask-size: 250% 100%;
    mask-size: 250% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    animation: write-in 2.2s cubic-bezier(0.45, 0.05, 0.35, 1) 0.15s both;
  }
  .rule {
    animation: draw-out 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.4s both;
  }
  .doors .door,
  .doors .gutter,
  .soon {
    animation: settle 1.8s ease-out 0.7s both;
  }
  .doors .gutter {
    animation-delay: 0.85s;
  }
  .doors .door + .gutter + .door {
    animation-delay: 1.05s;
  }
  .discord {
    animation: settle 1.8s ease-out 1.35s both;
  }
  .updates,
  .divider,
  .social,
  .title-page .back,
  .fine-print {
    animation: appear 1.8s ease-out 1.65s both;
  }
}

/* Leaving for the shelf, or coming back to this page from it, the one page dissolves into
   the other (BR1, 2026-09-29), in the browsers that can: Safari 18.2 and Chrome 126 on.
   Both pages have to ask for it; the shelf's side is in the theater's main.css. Slower
   than the browser's own quarter second. */
/* The Create Stories placeholder (create.html) has only its one line to show, so it
   comes in alongside the wordmark, as "Workshop" does on the shelf, and the rest follows
   soon after (BR1, 2026-09-30: no waiting for "Page Turn" to finish). */
@media (prefers-reduced-motion: no-preference) {
  .front--soon .soon {
    animation-delay: 0.35s;
  }
  .front--soon .title-page .back,
  .front--soon .fine-print {
    animation-delay: 0.9s;
  }
}

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.7s;
}

@keyframes write-in {
  from {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
  to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}

@keyframes draw-out {
  from {
    transform: scaleX(0);
  }
}

@keyframes settle {
  from {
    opacity: 0;
    transform: translateY(0.4rem);
  }
}

@keyframes appear {
  from {
    opacity: 0;
  }
}

/* ---------- the email window ---------- */

.sheet {
  width: min(25rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 1px solid var(--ink-faint);
  border-radius: 3px;
  background: var(--night);
  color: var(--ink);
  overflow: auto;
}

.sheet::backdrop {
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.sheet[open] {
  animation: sheet-in 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sheet[open]::backdrop {
  animation: appear 0.35s ease-out;
}

@keyframes sheet-in {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
}

.sheet__page {
  position: relative;
  padding: 2.25rem 1.75rem 1.75rem;
}

.sheet__close {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--serif);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ink-quiet);
  cursor: pointer;
  transition: color 0.2s;
}

.sheet__close:hover,
.sheet__close:focus-visible {
  color: var(--ink);
}

.sheet__title {
  margin: 0 0 1.75rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.2;
  text-align: center;
}

.sheet__fields {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}

/* A line to write on, like a card's. The typing is never under 16px, or an iPhone zooms
   the page when the field is touched (Ledger, 2026-09-29). */
.line {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--ink-quiet);
}

.line input {
  width: 100%;
  padding: 0.4rem 0 0.45rem;
  border: 0;
  border-bottom: 1px solid var(--ink-faint);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: max(16px, 1.1rem);
  letter-spacing: 0.01em;
  transition: border-color 0.2s;
}

.line input:focus {
  outline: none;
  border-bottom-color: var(--ink);
}

/* The browser's own fill-in paints the field pale; keep it ink on black. */
.line input:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 100px var(--night) inset;
  caret-color: var(--ink);
}

.choices {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 0.25rem;
}

.choices label {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.05rem;
  color: var(--ink-soft);
  cursor: pointer;
}

.choices input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  border: 1px solid var(--ink-quiet);
  border-radius: 2px;
  background: transparent center / 78% no-repeat;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

.choices input:checked {
  border-color: var(--ink);
  background-color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.choices input:focus-visible {
  outline-offset: 3px;
}

.choices label:has(input:checked) {
  color: var(--ink);
}

/* The sign-up's agreement to get email, which Japan's anti-spam law wants stated before
   anyone is written to (2026-09-27); the form's timestamp is the record. */
.consent {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--ink-quiet);
  text-align: center;
  text-wrap: balance;
}

.sheet__send {
  width: 100%;
  padding: 0.85rem 1rem 0.8rem;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: var(--ink);
  color: var(--night);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.sheet__send:hover:not(:disabled) {
  background: transparent;
  color: var(--ink);
}

.sheet__send:disabled {
  opacity: 0.55;
  cursor: default;
}

.note {
  margin: 0;
  text-align: center;
  font-size: 0.95rem;
}

.note--bad {
  color: var(--wrong);
}

.sheet__done {
  padding: 0.5rem 0 0;
  text-align: center;
}

.sheet__done p {
  margin: 0 0 0.75rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.35rem;
}

/* Once signed up, the thank-you stands in for the form. */
form.is-done .sheet__fields {
  display: none;
}