/* The Beginning — Storytime's opening descent.
   An OVERLAY, never a transform on the real app: the desk, header, and paper
   underneath keep their exact layout (position:fixed descendants of #app must
   never gain a transformed ancestor). The overlay paints its own miniature
   world — wordmark high above, a sheet far below that rises to meet you,
   chrome slats assembling — then crossfades away to reveal the real desk.
   States are classes on #beginning:
     bg-aloft    high above the desk (start)
     bg-descend  floating down; elements assembling
     bg-hover    holding just above the page (sign-in woven in here)
     bg-auth-open  the account card is showing
     bg-out      final crossfade to the real desk
     bg-brief    returning-visit timings (short)
     bg-calm     prefers-reduced-motion: no travel, calm crossfade only
     bg-skip     a click/keypress landed: every transition collapses to 0 */

#beginning {
  position: fixed;
  inset: 0;
  z-index: 12000;
  overflow: hidden;
  background: var(--boot-desk-grad, var(--boot-desk, var(--bg, #eadfce)));
  font-family: var(--ui, system-ui, sans-serif);
  color: var(--ink, #2b2226);
  --bgt: 3.4s;      /* descent duration (full first visit) */
  --bgw: 1.1s;      /* wordmark fade */
}
#beginning.bg-brief { --bgt: 0.9s; --bgw: 0.4s; }
#beginning.bg-skip * { transition-duration: 0s !important; animation-duration: 0s !important; }
#beginning.bg-out { opacity: 0; transition: opacity 1.2s ease; pointer-events: none; }  /* the dissolve */
#beginning.bg-skip.bg-out { transition-duration: 0s; }

/* a faint vignette of height: darker sky at the top of the fall */
#beginning .bg-sky {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 118%, transparent 55%, rgba(43, 34, 38, 0.34));
  opacity: 1;
  transition: opacity calc(var(--bgt) * 0.9) ease;
}
#beginning.bg-descend .bg-sky,
#beginning.bg-hover .bg-sky { opacity: 0.12; }

/* the miniature desk scene that rises toward the viewer */
#beginning .bg-scene {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  perspective: 1400px;
}
#beginning .bg-sheet {
  width: min(46vh, 62vw);
  aspect-ratio: 8.5 / 11;
  background: var(--boot-paper, var(--paper, #ffffff));
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(43, 34, 38, 0.14), 0 30px 80px -20px rgba(43, 34, 38, 0.38);
  transform: scale(0.045) translateY(160%);
  filter: blur(2.5px);
  opacity: 0.85;
  transition:
    transform var(--bgt) cubic-bezier(0.22, 0.61, 0.24, 1),
    filter var(--bgt) ease,
    opacity var(--bgt) ease;
  display: flex; flex-direction: column;
  gap: 4.2%;
  padding: 11% 12%;
}
#beginning.bg-descend .bg-sheet,
#beginning.bg-hover .bg-sheet {
  transform: scale(0.92) translateY(0);
  filter: blur(0);
  opacity: 1;
}
/* faint courier lines settling onto the sheet */
#beginning .bg-line {
  height: 2.6%;
  border-radius: 2px;
  background: var(--boot-ink, var(--ink-faint, #a3949b));
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
#beginning .bg-line:nth-child(2) { width: 72%; align-self: center; }
#beginning .bg-line:nth-child(3) { width: 88%; }
#beginning .bg-line:nth-child(4) { width: 54%; align-self: center; }
#beginning .bg-line:nth-child(5) { width: 80%; }
#beginning .bg-line:nth-child(1) { width: 40%; }
#beginning.bg-descend .bg-line,
#beginning.bg-hover .bg-line {
  opacity: 0.16;
  transform: translateY(0);
}
#beginning.bg-descend .bg-line:nth-child(1) { transition-delay: calc(var(--bgt) * 0.42); }
#beginning.bg-descend .bg-line:nth-child(2) { transition-delay: calc(var(--bgt) * 0.52); }
#beginning.bg-descend .bg-line:nth-child(3) { transition-delay: calc(var(--bgt) * 0.6); }
#beginning.bg-descend .bg-line:nth-child(4) { transition-delay: calc(var(--bgt) * 0.68); }
#beginning.bg-descend .bg-line:nth-child(5) { transition-delay: calc(var(--bgt) * 0.76); }

/* the studio chrome assembling around the page: three quiet slats */
#beginning .bg-slat {
  position: absolute;
  left: 50%;
  height: 10px;
  border-radius: 6px;
  background: var(--surface, rgba(255, 255, 255, 0.72));
  box-shadow: 0 1px 2px rgba(43, 34, 38, 0.08);
  opacity: 0;
  transition: opacity 0.9s ease, transform 0.9s ease;
}
#beginning .bg-slat-top   { top: 5%;    width: 42%; transform: translate(-50%, -26px); }
#beginning .bg-slat-tools { top: 50%;   width: 8px; height: 26%; margin-left: min(26vh, 34vw); transform: translate(-50%, -50%) translateX(22px); }
#beginning .bg-slat-foot  { bottom: 5%; width: 34%; transform: translate(-50%, 26px); }
#beginning.bg-descend .bg-slat,
#beginning.bg-hover .bg-slat { opacity: 0.85; }
#beginning.bg-descend .bg-slat-top,
#beginning.bg-hover .bg-slat-top { transform: translate(-50%, 0); transition-delay: calc(var(--bgt) * 0.55); }
#beginning.bg-descend .bg-slat-tools,
#beginning.bg-hover .bg-slat-tools { transform: translate(-50%, -50%); transition-delay: calc(var(--bgt) * 0.66); }
#beginning.bg-descend .bg-slat-foot,
#beginning.bg-hover .bg-slat-foot { transform: translate(-50%, 0); transition-delay: calc(var(--bgt) * 0.6); }

/* the wordmark — Storytime, in the app's own display voice */
#beginning .bg-word {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  pointer-events: none;
  transition: transform var(--bgt) cubic-bezier(0.3, 0.5, 0.3, 1), opacity calc(var(--bgt) * 0.66) ease;
}
#beginning .bg-wordmark {
  margin: 0;
  font-family: var(--display, 'Didot', Georgia, serif);
  font-weight: 400;
  font-size: clamp(44px, 8.5vw, 108px);
  letter-spacing: 0.04em;
  color: var(--ink, #2b2226);
  opacity: 0;
  transition: opacity var(--bgw) ease;
}
#beginning.bg-aloft .bg-wordmark,
#beginning.bg-calm .bg-wordmark { opacity: 1; }
/* the one quiet motif: a hairline rule with a middle dot, title-page style */
#beginning .bg-rule {
  width: clamp(120px, 18vw, 260px);
  display: flex; align-items: center; gap: 10px;
  opacity: 0;
  transition: opacity var(--bgw) ease 0.25s;
  color: var(--rose, #b4435e);
  font-size: 14px;
  line-height: 1;
}
#beginning .bg-rule::before,
#beginning .bg-rule::after {
  content: ''; flex: 1; height: 1px;
  background: currentColor; opacity: 0.55;
}
#beginning.bg-aloft .bg-rule,
#beginning.bg-calm .bg-rule { opacity: 0.9; }
#beginning.bg-descend .bg-word,
#beginning.bg-hover .bg-word {
  transform: translateY(-16vh) scale(0.6);
  opacity: 0;
}
/* while the account card is up the wordmark sits small above it instead */
#beginning.bg-auth-open .bg-word { display: none; }

/* reduced motion: no travel at all — a calm crossfade */
#beginning.bg-calm .bg-scene { display: none; }
#beginning.bg-calm .bg-sky { opacity: 0.1; transition: none; }

/* --- the account card, woven into the hover --- */
#beginning .bg-auth {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) translateY(10px);
  width: min(360px, calc(100vw - 48px));
  background: var(--paper, #fff);
  border-radius: var(--radius, 14px);
  box-shadow: var(--shadow, 0 12px 40px -12px rgba(141, 79, 98, 0.25));
  padding: 28px 28px 22px;
  display: flex; flex-direction: column; gap: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
#beginning.bg-auth-open .bg-auth {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}
#beginning .bg-auth-word {
  margin: 0 0 2px;
  font-family: var(--display, 'Didot', Georgia, serif);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 0.03em;
  text-align: center;
  color: var(--ink, #2b2226);
}
#beginning .bg-auth-sub {
  margin: 0 0 6px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft, #6d5f66);
}
#beginning .bg-auth input {
  font: inherit;
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid var(--line, rgba(43, 34, 38, 0.1));
  border-radius: 9px;
  background: #fff;
  color: var(--ink, #2b2226);
  outline: none;
}
#beginning .bg-auth input:focus { border-color: var(--rose, #b4435e); }
#beginning .bg-auth-error {
  min-height: 17px;
  margin: 0;
  font-size: 12.5px;
  color: var(--rose-deep, #8e2f48);
  text-align: center;
}
#beginning .bg-auth-primary {
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 11px 12px;
  border: 0;
  border-radius: 9px;
  background: var(--rose, #b4435e);
  color: #fff;
  cursor: pointer;
}
#beginning .bg-auth-primary:hover { background: var(--rose-deep, #8e2f48); }
#beginning .bg-auth-google {
  font: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--line, rgba(43, 34, 38, 0.1));
  border-radius: 9px;
  background: var(--surface, rgba(255, 255, 255, 0.72));
  color: var(--ink-faint, #a3949b);
  cursor: not-allowed;
}
#beginning .bg-auth-toggle {
  font: inherit;
  font-size: 13px;
  border: 0;
  background: none;
  color: var(--ink-soft, #6d5f66);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 2px;
}
#beginning .bg-auth-toggle:hover { color: var(--rose, #b4435e); }

/* the whisper at the bottom of the intro */
#beginning .bg-hint {
  position: absolute;
  left: 0; right: 0; bottom: 26px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-soft, #6d5f66);
  opacity: 0;
  transition: opacity 1.2s ease 1.4s;
  pointer-events: none;
}
#beginning.bg-aloft .bg-hint,
#beginning.bg-descend .bg-hint { opacity: 0.7; }
#beginning.bg-brief .bg-hint,
#beginning.bg-auth-open .bg-hint { opacity: 0; transition: none; }

/* --- negative -> positive (the only opening now) ---------------------------
   Black ground, white wordmark; then page one of the script in white on black,
   which reverses into the real paper. The cloned sheet is positioned inline
   by beginning.js. */
#beginning.bg-calm { background: #000; color: #fff; }
#beginning.bg-calm .bg-word { place-content: end center; padding-bottom: 22vh; gap: 0; }
#beginning.bg-calm .bg-wordmark {
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--ui, system-ui, sans-serif);
  font-size: clamp(11px, 1.05vw, 14px);
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-indent: 0.34em;   /* optically center the letterspaced word */
}
#beginning.bg-calm .bg-rule { display: none; }
#beginning.bg-calm .bg-hint { color: rgba(255, 255, 255, 0.6); }
#beginning.bg-negative .bg-word { opacity: 0; transition: opacity 0.5s ease; }
#beginning.bg-negative .bg-hint { opacity: 0; transition: opacity 0.3s ease; }
#beginning .bg-negative-sheet { pointer-events: none; user-select: none; }
#beginning .bg-negative-sheet::before, #beginning .bg-negative-sheet::after { display: none !important; }  /* no tooth/cloud on the negative */
#beginning.bg-calm .bg-scene, #beginning.bg-calm .bg-sky { display: none; }