/* The home page: Corinna (or Cory) fills the screen, with three controls on top of her -
   who you talk to (top right), the talk button, and the way to the details page. */

:root {
  --sand: #ddd1bf;
  --sand-deep: #c7b89f;
  --ink: #1d1a17;
  --ink-soft: rgba(29, 26, 23, 0.62);
  --glass: rgba(29, 26, 23, 0.58);
  --glass-line: rgba(255, 255, 255, 0.14);
  --paper: #f6f1e9;
  --live: #d9412b;
  --gutter: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body.home {
  overflow: hidden;
  font-family: var(--font);
  color: var(--ink);
  /* The same warm studio sand Corinna stands in front of, so the switch to Cory
     and the moments before she appears keep one room. */
  background: radial-gradient(120% 90% at 50% 38%, #ebe2d4 0%, var(--sand) 55%, var(--sand-deep) 100%);
  -webkit-tap-highlight-color: transparent;
}

/* ---- the stage ---------------------------------------------------------- */

.stage.cory-embed {
  position: fixed;
  inset: 0;
  display: block;
  max-width: none;
  margin: 0;
}

.stage .cory-embed-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  border-radius: 0;
}

/* The sand she stands in front of, laid over the stage until she is on screen, so
   the wait looks the same on every device whatever the orb page draws meanwhile. */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 38%, #ebe2d4 0%, var(--sand) 55%, var(--sand-deep) 100%);
  transition: opacity 700ms ease;
}

body.is-shown .curtain { opacity: 0; }

/* ---- who you talk to ---------------------------------------------------- */

.face-toggle {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  right: var(--gutter);
  z-index: 5;
  display: flex;
  padding: 4px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}

.face-toggle button {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 8px 16px;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font: 600 14px/1 var(--font);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

.face-toggle button:hover { color: #fff; }

.face-toggle button[aria-pressed="true"] {
  background: var(--paper);
  color: var(--ink);
}

.face-toggle button:focus-visible,
.talk:focus-visible,
.more:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* ---- the dock: status, talk button, details link ------------------------ */

.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 var(--gutter) max(18px, env(safe-area-inset-bottom));
  pointer-events: none;
}

.dock > * { pointer-events: auto; }

.status {
  min-height: 1.4em;
  margin: 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(246, 241, 233, 0.72);
  color: var(--ink);
  font: 500 13px/1.4 var(--font);
  text-align: center;
  transition: opacity 240ms ease, visibility 0s linear 0s;
}

/* Hidden, not only transparent: with the GPU drawing it, Chrome kept painting an empty pill's
   backdrop at opacity 0, a light blob on her chest. */
.status.is-empty {
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms ease, visibility 0s linear 240ms;
}

.talk {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  margin: 0;
  padding: 0 26px 0 20px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font: 650 16px/1 var(--font);
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(29, 26, 23, 0.28);
  transition: background-color 180ms ease, color 180ms ease, opacity 180ms ease, transform 120ms ease;
}

.talk svg {
  width: 22px;
  height: 22px;
  flex: none;
}

.talk:active:not(:disabled) { transform: scale(0.97); }

/* Greyed out until the one you talk to is on screen. */
.talk:disabled {
  background: rgba(120, 112, 102, 0.5);
  color: rgba(246, 241, 233, 0.7);
  box-shadow: none;
  cursor: default;
}

.talk.is-live {
  background: var(--live);
  color: #fff;
  animation: talk-pulse 1.8s ease-in-out infinite;
}

@keyframes talk-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 65, 43, 0.45), 0 10px 30px rgba(29, 26, 23, 0.28); }
  50% { box-shadow: 0 0 0 12px rgba(217, 65, 43, 0), 0 10px 30px rgba(29, 26, 23, 0.28); }
}

/* A light pill, so the link reads on her dark jacket as well as on the sand. */
.more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(246, 241, 233, 0.78);
  color: var(--ink);
  font: 600 13px/1.3 var(--font);
  text-decoration: none;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background-color 160ms ease;
}

.more:hover { background: var(--paper); }

.more span { transition: transform 160ms ease; }
.more:hover span { transform: translateX(3px); }

@media (max-width: 480px) {
  .face-toggle button { padding: 8px 13px; font-size: 13px; }
  .talk { min-height: 54px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .talk.is-live { animation: none; }
  .talk, .more span, .status, .curtain { transition: none; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.noscript {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  top: 42%;
  margin: 0;
  text-align: center;
  font: 500 16px/1.5 var(--font);
}

.noscript a { color: var(--ink); }