/* ============================================================
   descent.css — per-animal atmosphere theming of the result,
   the choose-your-descent doorways, and the staged-reveal keyframes.
   Pairs with the generated css/atmosphere.css (token values) and
   js/reveal-seq.js (the sequence). Motion is transform/opacity only.
   ============================================================ */

/* ---- result inherits the animal's atmosphere once themed ---- */
.descent { position: relative; }
.descent[data-animal] #resultWrap.show::before {
  content: ""; position: absolute; inset: -8% -4% 40%; z-index: -1;
  background: radial-gradient(60% 40% at 50% 0%, var(--glow), transparent 70%);
  pointer-events: none; opacity: .9;
}
.descent[data-animal] #animalName { color: var(--accent-soft, var(--moon)); }
.descent[data-animal] #resultWrap.show .cross,
.descent[data-animal] #resultWrap.show .essence { color: var(--body); }
.descent[data-animal] #animalLink { border-color: var(--accent); }

/* ---- choose your descent: real links upgraded to doorways ---- */
.descent-doors { margin: 22px 0 4px; }
.descent-doors > p.eyebrow { margin-bottom: 10px; }
.doorRow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 560px) { .doorRow { grid-template-columns: 1fr; } }
.door {
  display: block; text-decoration: none; text-align: left;
  background: var(--panel2, #12131f); border: 1px solid var(--line, #2a2c44);
  border-radius: 14px; padding: 16px 18px;
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.door:hover, .door:focus-visible {
  border-color: var(--accent, var(--brass));
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--accent) 8%, var(--panel2, #12131f));
}
.door .dn { display: block; font-family: var(--serif, serif); font-size: 1.2rem; color: var(--moon); }
.door .dh { display: block; margin-top: 4px; font-size: .86rem; color: var(--muted); }

/* ---- staged reveal (paired with js/reveal-seq.js). Reserved space,
   no layout shift, transform + opacity only. ---- */
.descent { --seq-glyph: 420ms; --seq-name: 420ms; --seq-essence: 380ms;
  --seq-doors: 460ms; --seq-ease: cubic-bezier(.22,.61,.36,1); }
#resultWrap.seq #cross,
#resultWrap.seq #animalName,
#resultWrap.seq #animalEssence,
#resultWrap.seq .descent-doors { opacity: 0; will-change: transform, opacity; }
.descent #animalName.is-in { animation: seqResolve var(--seq-name) var(--seq-ease) forwards; }
.descent #cross.is-in { animation: seqFadeUp var(--seq-glyph) var(--seq-ease) forwards; }
.descent #animalEssence.is-in { animation: seqFadeUp var(--seq-essence) var(--seq-ease) forwards; }
.descent .descent-doors.is-in { animation: seqFadeUp var(--seq-doors) var(--seq-ease) forwards; }
#resultWrap.seq-done #cross,
#resultWrap.seq-done #animalName,
#resultWrap.seq-done #animalEssence,
#resultWrap.seq-done .descent-doors { opacity: 1; transform: none; will-change: auto; }
@keyframes seqResolve { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes seqFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  #resultWrap.seq #cross, #resultWrap.seq #animalName,
  #resultWrap.seq #animalEssence, #resultWrap.seq .descent-doors {
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
}

/* ---- stage-aware sticky action (mobile-first) ---- */
.stageBar {
  position: sticky; bottom: 0; z-index: 90;
  display: flex; justify-content: center;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--ink, #0a0b14) 60%, transparent);
  pointer-events: none;
}
.stageBar .btn { pointer-events: auto; min-height: 48px; min-width: 60%; }
@media (min-width: 768px) { .stageBar { display: none; } }