/* ===================== CHAPTER 2 — THE COMPANION ===================== */

#chapter2 {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  overflow: hidden;
}

/* #chapter2's ID selector above outranks the native [hidden] attribute
   style (display:none) by specificity, so it would render even while
   hidden — this rule (ID + attribute) wins back over the plain ID rule. */
#chapter2[hidden] {
  display: none;
}

/* ---- ambient drifting particles (generated in JS) ---- */
.particle-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

@keyframes particle-drift {
  from {
    transform: translateY(0);
    opacity: var(--p-opacity, 0.4);
  }
  to {
    transform: translateY(var(--p-drift, -140px));
    opacity: 0;
  }
}

.particle {
  position: absolute;
  left: var(--p-left);
  top: var(--p-top);
  width: var(--p-size, 2px);
  height: var(--p-size, 2px);
  border-radius: 50%;
  background: var(--p-color, var(--color-mint));
  opacity: 0;
  animation: particle-drift var(--p-duration, 12s) linear var(--p-delay, 0s) infinite;
}

/* ---- layout wrapper ---- */
.chapter2-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  width: min(90vw, 640px);
  text-align: center;
  padding: 2rem;
}

/* ---- the companion ---- */
.companion-stage {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.companion-orb {
  position: relative;
  width: 64px;
  height: 64px;
  opacity: 0;
  transform: scale(0);
  will-change: transform;
}

/* the plain glowing "point of light" shown before she's chosen a form */
.companion-orb-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(79, 158, 255, 0.9) 0%,
    rgba(109, 240, 194, 0.7) 55%,
    rgba(6, 8, 13, 0) 78%
  );
  box-shadow: 0 0 22px 4px rgba(109, 240, 194, 0.35);
  transition: opacity 0.5s var(--ease-soft);
}

/* creature silhouettes, layered on top of the glow and each other; only
   the active one (matched via the parent's companion-orb--<form> class)
   is visible at a time inside the hero orb. */
.creature {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s var(--ease-soft);
}

.c-fill {
  fill: currentColor;
  stroke: none;
}

.c-stroke {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.companion-orb--llama .companion-orb-glow,
.companion-orb--fox .companion-orb-glow,
.companion-orb--duckling .companion-orb-glow {
  opacity: 0;
}

.companion-orb--llama .creature--llama,
.companion-orb--fox .creature--fox,
.companion-orb--duckling .creature--duckling {
  opacity: 1;
}

/* each creature stays within the site's blue/mint palette — different
   points in the same spectrum, not a literal-color redesign */
.creature--llama {
  color: var(--color-mint);
  filter: drop-shadow(0 0 10px rgba(109, 240, 194, 0.6));
}

.creature--duckling {
  color: var(--color-blue);
  filter: drop-shadow(0 0 12px rgba(79, 158, 255, 0.5));
}

.creature--fox {
  color: #f2fffb;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6)) drop-shadow(0 0 14px rgba(109, 240, 194, 0.35));
}

/* ---- narrative + closing lines (reuse chapter1's .line styles) ---- */
.c2-narrative {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.c2-closing {
  display: none;
  flex-direction: column;
  gap: 0.6rem;
}

.c2-closing .line {
  opacity: 0;
}

/* ---- companion picker ---- */
.companion-picker {
  /* display:none until JS reveals it — an invisible-but-flex section
     still occupies layout height and would push/crop everything else
     in this centered column (each subsequent step does the same). */
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
}

.companion-prompt {
  font-weight: 500;
}

.companion-options {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 0.5rem;
}

.companion-idle-msg {
  min-height: 1.2em;
  font-size: 0.85rem;
  font-weight: 300;
  font-style: italic;
  color: var(--color-mint);
  opacity: 0;
}

.companion-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  width: 148px;
  padding: 1rem 0.75rem;
  border-radius: 14px;
  transition: background-color 0.25s var(--ease-soft), transform 0.25s var(--ease-soft), opacity 0.4s var(--ease-soft);
}

.companion-option:hover {
  background-color: rgba(109, 240, 194, 0.06);
  transform: translateY(-2px);
}

.companion-option.is-fading {
  opacity: 0;
  transform: translateY(10px) scale(0.92);
  pointer-events: none;
}

/* overrides .creature's absolute/opacity-0 defaults — a picker preview
   is a single always-visible icon, not a layered hero-orb creature */
.companion-preview {
  position: static;
  display: block;
  width: 30px;
  height: 30px;
  opacity: 1;
}

.companion-label {
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.companion-blurb {
  font-size: 0.78rem;
  font-weight: 300;
  line-height: 1.4;
  color: var(--color-text-dim);
}

/* preview-only idle motion so each form reads differently before she picks */
@keyframes llama-jitter {
  0%, 100% { transform: translate(0, 0) scale(1); }
  15% { transform: translate(4px, -3px) scale(1.05); }
  30% { transform: translate(-3px, 2px) scale(0.95); }
  45% { transform: translate(3px, 3px) scale(1.02); }
  60% { transform: translate(-4px, -2px) scale(0.98); }
  75% { transform: translate(2px, -4px) scale(1.03); }
}

@keyframes duckling-float {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(6px, -8px); }
  50% { transform: translate(-2px, -14px); }
  75% { transform: translate(-7px, -6px); }
}

@keyframes fox-dart {
  0%, 15% { transform: translate(0, 0); }
  18%, 45% { transform: translate(8px, -6px); }
  48%, 75% { transform: translate(-6px, 4px); }
  78%, 100% { transform: translate(3px, 7px); }
}

.companion-preview.creature--llama {
  animation: llama-jitter 2.6s ease-in-out infinite;
}

.companion-preview.creature--duckling {
  animation: duckling-float 5s ease-in-out infinite;
}

.companion-preview.creature--fox {
  animation: fox-dart 3.2s steps(1, end) infinite;
}

/* small "pick me" flourish for an idle, unpicked option */
.companion-option.is-nudging .companion-preview {
  animation-duration: 0.5s;
}

/* ---- name-the-companion gate ---- */
.companion-name-gate {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
}

.companion-name-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.companion-name-row .name-input {
  width: 180px;
  text-align: center;
  border-bottom: 1.5px solid rgba(143, 163, 179, 0.35);
  transition: border-color 0.25s var(--ease-soft);
}

/* keyboard/focus indicator — replaces the removed native outline (see
   chapter1.css .name-input) with the same mint accent used site-wide */
.companion-name-row .name-input:focus {
  border-color: var(--color-mint);
}

.text-btn {
  padding: 0.55rem 1.4rem;
  border: 1px solid rgba(109, 240, 194, 0.4);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--color-mint);
  transition: background-color 0.25s var(--ease-soft), color 0.25s var(--ease-soft);
}

.text-btn:hover {
  background: var(--gradient-accent);
  color: var(--color-bg);
}

/* ---- mood check-in ---- */
.mood-gate {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
}

.mood-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}

.mood-chip {
  padding: 0.5rem 1.1rem;
  border: 1px solid rgba(143, 163, 179, 0.3);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--color-text-dim);
  transition: border-color 0.25s var(--ease-soft), color 0.25s var(--ease-soft), background-color 0.25s var(--ease-soft);
}

.mood-chip:hover {
  border-color: rgba(109, 240, 194, 0.5);
  color: var(--color-text);
}

.mood-chip.is-selected {
  border-color: transparent;
  background: var(--gradient-accent-soft);
  color: var(--color-text);
}

/* ---- responsive tightening ---- */
@media (max-width: 480px) {
  .companion-option {
    width: 42%;
  }

  .companion-name-row {
    flex-direction: column;
  }
}