/* Ambient glows live on a fixed pseudo so they don't trigger repaints on scroll
 * (background-attachment: fixed is a known perf killer paired with sticky+backdrop-filter). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 540px at 92% -10%, rgba(177, 18, 38, 0.08), transparent 55%),
    radial-gradient(720px 560px at -5% 108%, rgba(35, 38, 45, 0.06), transparent 55%),
    radial-gradient(520px 360px at 60% 50%, rgba(217, 74, 79, 0.025), transparent 60%);
}

/* Hairline below header for layered separation */
.header {
  position: relative;
  z-index: 5;
}
.header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.10) 22%, rgba(217, 74, 79, 0.45) 50%, rgba(255, 255, 255, 0.10) 78%, transparent);
  pointer-events: none;
}

/* ─── Scroll reveal ──────────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--t-reveal) var(--ease-out),
    transform var(--t-reveal) var(--ease-out);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

button,
input,
textarea {
  font: inherit;
}

.app {
  min-height: 100vh;
}