* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #af0070;
}

#field {
  display: block;
  width: 100vw;
  height: 100vh;
  background: #af0070;
  touch-action: none;
  filter: blur(0.8px);
}

/* Cinematic lateral depth-of-field: a blurred read of the scene faded in
   only toward the left/right edges via a mask, crossfading against the
   sharp canvas beneath — center stays fully in focus. */
.edge-blur {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 24vw;
  max-width: 380px;
  pointer-events: none;
  z-index: 4;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
#edge-blur-left {
  left: 0;
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}
#edge-blur-right {
  right: 0;
  -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  mask-image: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

/* Title: floats above the organism as part of the composition, not a
   website heading — thin, wide-tracked, luminous rather than flat white. */
#title {
  position: fixed;
  top: 7vh;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 200;
  font-size: clamp(1.8rem, 5.2vw, 4.4rem);
  letter-spacing: 0.28em;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
  text-transform: uppercase;
  mix-blend-mode: screen;
  text-shadow: 0 0 50px rgba(255, 255, 255, 0.45), 0 0 130px rgba(180, 220, 255, 0.25);
  pointer-events: none;
  user-select: none;
  z-index: 5;
}

/* Bottom CTA: glass-like, integrated into the scene rather than a standard
   website button — subtle, translucent, minimal. */
#cta {
  position: fixed;
  bottom: 4vh;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3em;
  padding: 0.85em 1.7em;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  appearance: none;
  -webkit-appearance: none;
  color: #ffffff;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  z-index: 20;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  isolation: isolate;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
  transition: opacity 0.7s ease, transform 0.4s ease, background 0.3s ease;
}
#cta:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateX(-50%) translateY(-2px);
}
#cta.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(10px);
}
.cta-arrow {
  font-size: 1.05em;
  line-height: 1;
  display: inline-block;
  animation: cta-bob 2.2s ease-in-out infinite;
}
@keyframes cta-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* Reveal text: hidden underneath the organism until the opening transition
   uncovers it — a slow, refined fade, not a UI toast. */
#reveal-text {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 200;
  font-size: clamp(1.6rem, 4.4vw, 3.2rem);
  letter-spacing: 0.06em;
  color: #ffffff;
  text-align: center;
  white-space: normal;
  max-width: 92vw;
  text-wrap: balance;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  z-index: 5;
  text-shadow: 0 0 40px rgba(255, 255, 255, 0.4), 0 0 100px rgba(180, 220, 255, 0.2);
  transition: opacity 2.4s ease;
}
#reveal-text.visible {
  opacity: 1;
}
/* Approved sequencing: the opening question leaves with its own slow,
   complete exit — readable for a long moment, then fully gone before the
   cell dialogue begins. Nothing follows it into this space. */
#reveal-text.out {
  transition: opacity 3s ease;
  opacity: 0;
}

/* STAGES 05-08: when the second act begins, the first act's question
   dissolves with the world it belonged to. */
#reveal-text.leave {
  transition: opacity 7s ease;
  opacity: 0;
}

/* Encounter reveal: the final line of the story. It appears only after the
   visitor has truly disturbed the two cells and let them find each other
   again — an even slower, quieter fade than the first reveal, more felt
   than read. Sits slightly lower so the two lines never occupy the same
   optical band. */
#encounter-text {
  position: fixed;
  top: 61%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 200;
  font-size: clamp(1.1rem, 2.9vw, 2.1rem);
  letter-spacing: 0.14em;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  z-index: 5;
  text-shadow: 0 0 34px rgba(255, 255, 255, 0.32), 0 0 90px rgba(180, 220, 255, 0.18);
  transition: opacity 6s ease;
}
#encounter-text.visible {
  opacity: 0.86;
}
/* STAGES 05-08: the first act's final line leaves as the transformation
   takes the composition. */
#encounter-text.leave {
  transition: opacity 7s ease;
  opacity: 0;
}

/* STAGE 04 EVOLUTION — Story phrases. One narration line for the whole
   story: the same thin, wide-tracked, luminous typography as the other
   reveals, at the quietest weight. Each phrase fades in slowly at its
   biological moment and releases as the next one arrives (the .swap dip
   below), so the line is read once and then leaves. */
#story-phrase {
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 200;
  font-size: clamp(1.05rem, 2.7vw, 2rem);
  letter-spacing: 0.13em;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  z-index: 5;
  text-shadow: 0 0 34px rgba(255, 255, 255, 0.32), 0 0 90px rgba(180, 220, 255, 0.18);
  transition: opacity 2.2s ease;
}
#story-phrase.visible {
  opacity: 0.82;
}
/* Approved rhythm: each phrase ends with its own complete, unhurried
   exit — it is read, it breathes, and it leaves fully before the next
   line may arrive. The screen is quiet in between. */
#story-phrase.out {
  transition: opacity 3s ease;
  opacity: 0;
}
/* Phrase hand-off: the outgoing line dips out quickly, the new text is
   swapped in, then it fades back at its own slow pace. Never stacked. */
#story-phrase.swap {
  transition: opacity 0.9s ease;
  opacity: 0;
}

/* STAGE 04 EVOLUTION — NEXT: the story's closing invitation. It appears
   only after the two cells have truly connected (several real exchanges),
   as a quiet, low presence under the organism — the same glass language
   as the opening CTA, smaller and calmer, closer to a whispered label
   than a button. */
#next-cta {
  position: fixed;
  bottom: 3.4vh;
  left: 50%;
  transform: translate(-50%, 14px);
  padding: 0.6em 1.6em;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  appearance: none;
  -webkit-appearance: none;
  color: rgba(255, 255, 255, 0.82);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  cursor: pointer;
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  box-shadow: 0 4px 26px rgba(0, 0, 0, 0.12);
  transition: opacity 2.6s ease, transform 2.6s ease, background 0.3s ease, color 0.3s ease;
}
#next-cta.visible {
  opacity: 0.88;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
#next-cta:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}
#next-cta.gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity 1.6s ease, transform 1.6s ease;
}

/* STAGES 05-08 — Second-act narration. The same quiet, wide-tracked,
   luminous voice as every other line of the story; this one lives at the
   center of the emptying composition. The final line carries its own line
   break, so pre-line whitespace. */
#act-line {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 200;
  font-size: clamp(1.15rem, 3vw, 2.25rem);
  letter-spacing: 0.12em;
  line-height: 1.7;
  color: #ffffff;
  text-align: center;
  white-space: pre-line;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  z-index: 5;
  text-shadow: 0 0 40px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 200, 235, 0.16);
  transition: opacity 3.4s ease;
}
#act-line.visible {
  opacity: 0.85;
}
#act-line.swap {
  transition: opacity 0.9s ease;
  opacity: 0;
}