/* Behaviour that React/framer-motion provided on the original Airo site. */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 4rem; }

/* Fade-up on scroll (only when JS is running, so content is never hidden without it) */
.js .reveal, .js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.js .reveal.is-visible, .js [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* FAQ accordion */
#faq-list [role="region"] { overflow: hidden; transition: height .2s ease-out; }
#faq-list button svg { transition: transform .2s; }
#faq-list button[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Waitlist form feedback */
.form-msg:empty { display: none; }
.form-msg.ok { color: #2f6b3a; }
.form-msg.err { color: #b42318; }

/* Legal / support pages */
.prose-page { max-width: 46rem; margin: 0 auto; padding: 8rem 1.5rem 5rem; color: rgb(122, 74, 42); line-height: 1.75; }
.prose-page h1 { font-family: var(--font-heading); color: rgb(57, 12, 0); font-size: clamp(2rem, 5vw, 2.75rem); line-height: 1.2; margin-bottom: .5rem; }
.prose-page h2 { font-family: var(--font-heading); color: rgb(57, 12, 0); font-size: 1.35rem; margin: 2.25rem 0 .5rem; }
.prose-page p, .prose-page ul { margin: 0 0 1rem; }
.prose-page ul { padding-left: 1.25rem; list-style: disc; }
.prose-page li { margin-bottom: .35rem; }
.prose-page a { color: rgb(154, 64, 31); text-decoration: underline; text-underline-offset: 2px; }
.prose-page .updated { font-size: .875rem; color: rgb(154, 122, 90); margin-bottom: 2rem; }
.prose-page .card { background: rgb(253, 248, 242); border: 1px solid rgb(212, 184, 150); border-radius: .75rem; padding: 1.25rem 1.5rem; margin: 1.5rem 0; }

/* Tailwind display utilities (e.g. .flex) otherwise override the hidden attribute */
[hidden] { display: none !important; }

/* Hero mandala: one slow full turn per minute, as on the original */
@keyframes mandala-spin { to { transform: rotate(360deg); } }
.mandala-spin { animation: mandala-spin 60s linear infinite; }
@media (prefers-reduced-motion: reduce) { .mandala-spin { animation: none; } }