/* Why yuli: child perspectives, parent feedback, and research-informed design. */

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

/* ---------- voices + firefly ---------- */
.why-page .voices p:nth-child(2),
.why-page .voices p:nth-child(3) { padding-block: 0; }
.why-page .voices { position: relative; overflow: visible; align-content: center; }
.why-page .voices p { position: relative; }
.why-page .voices p span { position: relative; display: inline-block; transition: color 700ms ease, text-shadow 700ms ease; }
.why-page .voices p::before { content: ''; position: absolute; left: 50%; top: 50%; width: 120%; height: 260%; transform: translate(-50%, -50%) scale(0.85); background: radial-gradient(closest-side, color-mix(in srgb, var(--gold) 55%, transparent), transparent); opacity: 0; transition: opacity 800ms ease, transform 800ms ease; pointer-events: none; }

/* only dim the unlit lines once the firefly is running, so no-JS still reads in full */
.why-page .voices.is-alive p span { color: var(--grey); }
.why-page .voices.is-alive p.is-lit span { color: var(--forest); text-shadow: 0 0 12px color-mix(in srgb, var(--gold) 90%, transparent), 0 0 26px color-mix(in srgb, var(--gold) 55%, transparent); }
.why-page .voices.is-alive p.is-lit::before { opacity: 0.9; transform: translate(-50%, -50%) scale(1); }

.voices-fly { position: absolute; left: 0; top: 0; width: 46px; height: 46px; pointer-events: none; z-index: 2; will-change: transform; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gold) 80%, transparent)); }
.voices-fly svg { width: 100%; height: 100%; overflow: visible; }
.voices-fly .fly-glow { transform-box: view-box; transform-origin: 16px 21px; animation: fly-pulse 2.4s ease-in-out infinite; }
.voices-fly .fly-wing { transform-box: view-box; animation: fly-flap 0.16s ease-in-out infinite alternate; }
.voices-fly .fly-wing-l { transform-origin: 15px 13px; }
.voices-fly .fly-wing-r { transform-origin: 17px 13px; }
.voices-fly.is-resting .fly-wing { animation-duration: 0.9s; }
/* before JS places it, sit where the old gold point was */
.voices:not(.is-alive) .voices-fly { left: 50%; top: 50%; margin: -23px 0 0 -23px; }

@keyframes fly-pulse { 0%, 100% { transform: scale(0.85); opacity: 0.75; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes fly-flap { from { transform: scaleX(1); } to { transform: scaleX(0.55); } }

@media (prefers-reduced-motion: reduce) {
  .voices-fly .fly-wing,
  .voices-fly .fly-glow { animation: none; }
}

/* Numbered steps stay readable without connector arrows across wrapped rows. */
.why-page .page h1, .why-page .sec h2 { font-weight: 500; }
.why-page .door { margin-block: var(--page-space); padding: clamp(1.5rem, 4vw, 3rem); background: #142319; border-radius: 18px; color: #FAF7F0; }
.why-page .door .eyebrow { color: #DFC484; }
.why-page .door .eyebrow::before { background: #DFC484; }
.why-page .door h2 { max-width: 30ch; color: #FAF7F0; }
.door-lead { margin-top: 1.25rem; max-width: 65ch; font-size: 1rem; line-height: 1.75; color: #e0e5df; }
.door-row { list-style: none; margin-top: 2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
.door-step { padding: clamp(1.25rem, 2.5vw, 1.75rem); border: 1px solid #88a18a70; border-radius: 12px; background: #1c3627; }
.door-number { display: block; margin-bottom: 1rem; color: #DFC484; font-size: 0.85rem; font-weight: 500; }
.door-step h3 { font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.1rem; font-weight: 500; line-height: 1.45; color: #FAF7F0; }
.door-desc { margin-top: 0.75rem; font-size: 1rem; line-height: 1.7; color: #e0e5df; }
.door-research { margin-top: 1.25rem; border-top: 1px solid #88a18a60; }
.door-research summary { padding-block: 0.85rem; min-height: 44px; font-size: 0.9rem; font-weight: 500; line-height: 1.6; color: #DFC484; cursor: pointer; }
.door-research summary:focus-visible, .why-actions a:focus-visible, .voices-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.research-body { padding-top: 0.5rem; font-size: 0.95rem; line-height: 1.75; }
.research-body .research-label { margin-bottom: 0.5rem; font-weight: 600; color: #DFC484; }
.research-body .research-citation { margin-block: 0.75rem 1.5rem; font-size: 0.85rem; }
.research-citation a { color: #DFC484; text-decoration: underline; text-underline-offset: 3px; }
.door-outcome { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #dfc48470; }
.door-outcome h3 { font-size: clamp(1.6rem, 3vw, 2rem); color: #DFC484; font-weight: 500; }
.door-outcome p, .door-limitation { margin-top: 0.75rem; max-width: 68ch; line-height: 1.75; font-size: 1rem; }
.door-limitation { margin-top: 1.5rem; }
.door-research-note { margin-top: 1.25rem; max-width: 75ch; color: #e0e5df; font-size: 0.9rem; line-height: 1.7; }
.why-invitation { padding: clamp(1.5rem, 4vw, 3rem); margin-bottom: 3rem; background: var(--surface-gold); border-radius: 12px; }
.why-invitation h2 { margin-top: 0.75rem; font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 500; line-height: 1.25; }
.why-invitation > p:not(.eyebrow) { margin-top: 1rem; max-width: 60ch; line-height: 1.75; }
.why-actions { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; margin-top: 1.5rem; }
.why-primary { display: inline-flex; align-items: center; min-height: 48px; padding: 0.8rem 1.25rem; background: var(--forest); color: var(--cream); border-radius: 6px; text-decoration: none; font-size: 0.95rem; font-weight: 500; }
.why-primary:hover { background: var(--forest-hover); }
.voices-toggle { position: absolute; bottom: 0.75rem; left: 50%; transform: translateX(-50%); min-height: 44px; padding: 0.5rem 0.75rem; border: 1px solid var(--forest); border-radius: 6px; background: var(--cream); color: var(--forest); font: 0.8rem "Plus Jakarta Sans", sans-serif; cursor: pointer; z-index: 3; }
.voices-toggle[hidden] { display: none; }
.voices.is-paused .voices-fly *, .voices:not(.is-alive) .voices-fly * { animation-play-state: paused; }
.why-page .voices.is-paused p span { color: var(--forest); text-shadow: none; transition: none; }
.why-page .voices.is-paused p::before { opacity: 0; transition: none; }
@media (max-width: 680px) {
  .door-row { grid-template-columns: 1fr; }
  .why-page .voices { padding-top: 4rem; padding-bottom: 5rem; }
  .why-actions { align-items: stretch; flex-direction: column; }
  .why-primary { justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .why-page .voices p span, .why-page .voices p::before { transition: none; }
}