/* ============================================================
   "Why did that happen?" — bottom-sheet reveal
   ============================================================ */

.why-backdrop {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(4,5,10,0);
  backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px);
  transition: background 260ms ease, backdrop-filter 260ms ease;
}
.why-backdrop.in { background: rgba(4,5,10,0.62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }

.why-sheet {
  width: 100%; max-width: 520px;
  background: #16171f;
  border-top-left-radius: 24px; border-top-right-radius: 24px;
  border: 1px solid var(--border-light, #2A2B34); border-bottom: none;
  padding: 14px 22px calc(26px + env(safe-area-inset-bottom));
  box-shadow: 0 -12px 40px rgba(0,0,0,0.5);
  transform: translateY(100%);
  transition: transform 300ms cubic-bezier(0.32,0.72,0,1);
}
.why-backdrop.in .why-sheet { transform: translateY(0); }

.why-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--border-light, #2A2B34); margin: 0 auto 16px; }
.why-eyebrow { font-family: var(--font-mono, monospace); font-size: 0.7rem; letter-spacing: 2px; color: #35e0ff; margin-bottom: 8px; }
.why-title { font-weight: 800; font-size: 1.3rem; color: var(--text-primary, #E6E2DC); margin-bottom: 16px; line-height: 1.3; }
.why-points { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 0 0 18px; padding: 0; }
.why-points li { position: relative; padding-left: 22px; color: var(--text-secondary, #A8A5A0); font-size: 1rem; line-height: 1.55; }
.why-points li::before { content: '✦'; position: absolute; left: 0; top: 0; color: var(--gold, #D4A574); }
.why-name { font-size: 0.85rem; color: var(--text-tertiary, #6B6966); font-style: italic; margin-bottom: 18px; padding-top: 12px; border-top: 1px solid var(--border-light, #2A2B34); }
.why-close {
  width: 100%; padding: 14px; border: none; border-radius: 14px;
  background: linear-gradient(135deg, var(--purple, #8B6BAE), #35e0ff);
  color: #0b0d14; font-weight: 700; font-size: 1rem; cursor: pointer;
  transition: transform 140ms cubic-bezier(0.23,1,0.32,1);
}
.why-close:active { transform: scale(0.98); }

@media (prefers-reduced-motion: reduce) {
  .why-sheet, .why-backdrop { transition: none; }
}