/* What Came First adapts the prototype's organic stage to the Lost Purpose shell. */
.first-board {
  --blob-ease: cubic-bezier(.22, 1, .36, 1);
  --blob-spring: cubic-bezier(.34, 1.56, .64, 1);
  min-height: 420px;
  background: linear-gradient(125deg, #ffffff08, transparent 72%), var(--glass);
  border-color: var(--glass-edge);
  box-shadow: var(--glass-shadow), var(--glass-light);
}
.first-board::before {
  width: 85%; height: 170%; left: auto; right: -19%; top: -47%;
  border-radius: 58% 42% 48% 52% / 44% 56% 44% 56%;
  background: #6d8a6338;
  animation: first-backdrop 18s ease-in-out infinite alternate;
}
.first-board::after {
  width: 56%; height: 100%; right: -22%; bottom: -63%;
  border-radius: 52% 48% 63% 37% / 58% 44% 56% 42%;
  background: #a4b79530;
  animation: first-backdrop 14s ease-in-out infinite alternate-reverse;
}
@keyframes first-backdrop {
  to { transform: translate(-8%, -4%) rotate(-9deg); border-radius: 51% 49% 62% 38% / 50% 46% 54% 50%; }
}

.first-board .first-pair {
  gap: clamp(8px, 2vw, 26px);
  align-items: center;
  max-width: 1090px;
  padding: clamp(12px, 3vh, 26px) 0;
  transition: transform .85s var(--blob-ease), opacity .55s ease;
}
.first-board .first-choice {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.13fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(8px, 1.6vw, 24px);
  border: 0;
  border-radius: 10px;
  padding: clamp(5px, 1vw, 14px);
  overflow: visible;
  background: transparent;
  box-shadow: none;
}
.first-board button.first-choice:hover {
  background: #ffffff0b;
  box-shadow: none;
}
.first-board button.first-choice:focus-visible { outline-color: var(--highlight); }
.first-board .first-card-body { padding: 0; transition: opacity .32s ease; }
.first-board .first-category { color: var(--accent); }
.first-board .first-name { font-size: clamp(16px, 2.25vw, 25px); }
.first-board .first-or { background: var(--surface); color: var(--muted); }
.first-visual { display: block; position: relative; min-width: 0; }
.first-blob {
  --blob-radius: 62% 38% 46% 54% / 60% 63% 37% 40%;
  --blob-alternate: 48% 52% 44% 56% / 64% 54% 46% 36%;
  --blob-offset: 0ms;
  display: block;
  position: relative;
  aspect-ratio: 1;
  perspective: 800px;
  isolation: isolate;
  transition: transform .42s var(--blob-spring);
}
.first-blob-1 {
  --blob-radius: 53% 47% 58% 42% / 48% 59% 41% 52%;
  --blob-alternate: 46% 54% 52% 48% / 53% 62% 38% 47%;
  --blob-offset: 130ms;
}
.first-blob-face, .first-blob-halo {
  position: absolute;
  inset: 0;
  border-radius: var(--blob-radius);
  animation: first-blob-wobble 9s ease-in-out infinite alternate;
}
@keyframes first-blob-wobble { to { border-radius: var(--blob-alternate); } }
.first-blob-halo {
  inset: -9px;
  background: #c7f47b66;
  opacity: 0;
  transform: scale(.88);
  transition: opacity .32s ease, transform .42s var(--blob-spring);
}
.first-choice:hover .first-blob-halo,
.first-choice:focus-visible .first-blob-halo,
.first-choice.is-picked .first-blob-halo,
.demo-answer .demo-earlier .first-blob-halo {
  opacity: 1;
  transform: scale(1);
}
.first-choice.is-missed .first-blob-halo { background: #ff81938c; }
.first-choice.is-earlier .first-blob-halo { background: #90d9ac8c; }
.first-choice:is(:hover, :focus-visible) .first-blob { transform: scale(1.025); }
.first-flipper {
  display: block;
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.deal-board .first-flipper {
  animation: first-mystery-flip .74s var(--blob-spring) calc(100ms + var(--blob-offset)) both;
}
@keyframes first-mystery-flip {
  from { transform: rotateY(180deg) scale(.91); }
  to { transform: rotateY(0) scale(1); }
}
.first-blob-face { display: grid; place-items: center; overflow: hidden; backface-visibility: hidden; }
.first-blob-image { box-shadow: 0 12px 30px #0006; }
.first-blob-mystery {
  transform: rotateY(180deg);
  background: var(--accent-surface);
  color: var(--accent);
  font: 700 clamp(34px, 6vw, 78px)/1 var(--sans);
}
.first-board .first-blob .first-art { width: 100%; height: 100%; }
.first-blob .first-image-frame { position: absolute; inset: 0; }
.first-blob .first-art img { object-fit: cover; }
.first-blob .first-image-frame[style] { inset-block-end: auto; height: auto; }
.first-blob .first-image-frame[style] img { height: auto; object-position: top; }
.first-board .first-reveal-date {
  margin: 0 0 8px;
  color: var(--light);
  font-size: clamp(23px, 4vw, 39px);
  font-variant-numeric: tabular-nums;
}
.first-board .is-earlier .first-reveal-date { color: var(--highlight); }
.first-board .is-missed .first-reveal-date { color: #ffabb8; }
.first-board .first-reveal-date small { font-size: 8px; }
/* The opening scene takes the entire viewport, including the site header. */
body:has(.first-demo[open]) { overflow: hidden; }
.first-demo[open] {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(12px, 3vh, 32px);
  width: 100%;
  height: 100dvh;
  min-height: 0;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: clamp(18px, 5dvh, 64px) clamp(16px, 6vw, 112px);
  overflow: auto;
  border: 0;
  border-radius: 0;
  color: var(--light);
  background: #1d251f;
  box-shadow: none;
  animation: first-intro-in .32s ease both;
}
.first-demo[open]::backdrop { background: #1d251f; backdrop-filter: none; }
.first-demo.demo-exit { animation: first-intro-out .32s ease both; }
.first-demo.demo-exit::backdrop { animation: first-intro-out .32s ease both; }
@keyframes first-intro-in { from { opacity: 0; } }
@keyframes first-intro-out { to { opacity: 0; } }
.first-demo .first-prompt { text-align: left; }
.first-demo .eyebrow { margin-bottom: 8px; color: var(--accent); }
.first-demo .first-prompt h2 {
  margin: 0 0 8px;
  font-size: clamp(36px, min(7vw, 13dvh), 96px);
  transition: opacity .24s ease, transform .24s var(--blob-ease);
}
.first-demo .demo-headline-out { opacity: 0; transform: translateY(-10px); }
.first-demo .first-instruction { margin: 0; color: var(--muted); line-height: 1.4; }
.first-demo .first-pair {
  width: min(100%, 980px);
  align-self: center;
  gap: clamp(8px, 4vw, 56px);
  padding: 0;
}
.first-demo .first-choice {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  padding: 0;
  text-align: center;
  animation: first-demo-arrive .8s .45s var(--blob-spring) backwards;
}
.first-demo .first-choice:last-child { animation-delay: .61s; }
.first-demo .first-visual { width: min(100%, 42dvh, 370px); }
.first-demo .first-or { align-self: center; margin: 0; }
.first-demo .first-reveal-date { visibility: hidden; }
.first-demo.demo-answer .first-reveal-date { visibility: visible; animation: date-pop .45s var(--blob-spring); }
.first-demo.demo-answer .demo-earlier .first-reveal-date { color: var(--highlight); }
.first-demo .first-next { align-self: end; margin: 0 auto; }
@keyframes first-demo-arrive { from { opacity: 0; transform: translateY(32px) scale(.58); } }

.first-life { display: grid; place-items: center; width: 20px; height: 23px; }
.first-life > span { grid-area: 1 / 1; }
.first-life-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); opacity: 0; }
.first-life.is-lost .first-life-heart { opacity: 0; }
.first-life.is-lost .first-life-dot { opacity: 1; }
.first-life.just-lost .first-life-heart { animation: first-life-shrink .65s ease both; }
.first-life.just-lost .first-life-dot { animation: first-life-dot .28s .44s var(--blob-spring) both; }
@keyframes first-life-shrink {
  0% { opacity: 1; transform: scale(1); }
  35% { opacity: 1; color: var(--accent-hover); transform: scale(1.3); }
  100% { opacity: 0; transform: scale(0); }
}
@keyframes first-life-dot { from { opacity: 0; transform: scale(0); } }

.score-board .first-pair { transform: translateY(59%) scale(1.17); opacity: .6; pointer-events: none; }
.score-board :is(.first-card-body, .first-reveal-date, .first-or),
.score-board .first-choice .first-blob-halo { opacity: 0; }
.first-intermission {
  position: absolute;
  z-index: 2;
  inset: 47% 10px auto;
  transform: translateY(-23%);
  display: grid;
  justify-items: center;
  gap: 7px;
  animation: first-summary .5s var(--blob-ease) backwards;
}
@keyframes first-summary { from { opacity: 0; transform: translateY(-13%) scale(.95); } }
.first-delta { margin: 0; color: var(--highlight); font-size: 13px; font-weight: 700; }
.first-delta.miss-message { color: #ffb6c4; }
.first-total { display: grid; font: 700 clamp(41px, 7vw, 66px)/1 var(--sans); font-variant-numeric: tabular-nums; }
.first-total small { color: var(--soft); font: 13px/1.5 var(--sans); }
.first-intermission .first-next { margin-top: 4px; }
.first-learn {
  background: transparent;
  border: 0;
  color: var(--light);
  min-height: 38px;
  padding: 5px 12px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.first-detail-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.first-detail-pair article { padding: 14px; border-radius: 8px; background: var(--surface-raised); border: 1px solid var(--line); }
.first-detail-pair h3 { margin: 5px 0 8px; }
.first-detail-pair .eyebrow { margin: 0; color: var(--highlight); }
.first-detail-pair .first-source { font-size: 11px; }

@media (max-width: 680px) {
  .first-board { min-height: 410px; }
  .first-board .first-choice { grid-template-columns: minmax(0, 1fr); text-align: center; gap: 8px; }
  .first-board .first-visual { width: min(100%, 164px); justify-self: center; }
  .first-board .first-name { font-size: clamp(14px, 3.8vw, 20px); }
  .first-board .first-or { align-self: start; margin-top: clamp(42px, 13vw, 75px); }
  .score-board .first-pair { transform: translateY(65%) scale(1.2); }
  .first-intermission { inset-block-start: 47%; }
}
@media (max-width: 480px) {
  .first-detail-pair { grid-template-columns: minmax(0, 1fr); }
  .first-demo .first-visual { width: min(100%, 34dvh, 180px); }
}