/* Theme-only animations the compiled Tailwind build doesn't include
   (the React app used Framer Motion for these). */

/* Hero headline: words rise in on load */
.hero-line { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .hero-word { transform: translateY(110%); opacity: 0; animation: howWordUp 0.85s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .hero-word.w1 { animation-delay: 0.45s; }
  .hero-word.w2 { animation-delay: 0.57s; }
  .hero-word.w3 { animation-delay: 0.69s; }
}
@keyframes howWordUp { to { transform: translateY(0); opacity: 1; } }

/* Reveal-on-scroll (progressive enhancement: only hides once JS marks the page) */
@media (prefers-reduced-motion: no-preference) {
  html.reveal-ready .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
  html.reveal-ready .reveal.in { opacity: 1; transform: none; }
  html.reveal-ready .reveal-stagger .reveal:nth-child(2) { transition-delay: 0.08s; }
  html.reveal-ready .reveal-stagger .reveal:nth-child(3) { transition-delay: 0.16s; }
  html.reveal-ready .reveal-stagger .reveal:nth-child(4) { transition-delay: 0.24s; }
  html.reveal-ready .reveal-stagger .reveal:nth-child(5) { transition-delay: 0.32s; }
  html.reveal-ready .reveal-stagger .reveal:nth-child(6) { transition-delay: 0.40s; }
  html.reveal-ready .reveal-stagger .reveal:nth-child(7) { transition-delay: 0.48s; }
  html.reveal-ready .reveal-stagger .reveal:nth-child(8) { transition-delay: 0.56s; }
}

/* ---- Generic page content (Privacy, T&C, and any standard WP page via page.php) ---- */
.howx-prose { color: #2b2b28; font-size: 1.02rem; line-height: 1.75; }
.howx-prose > :first-child { margin-top: 0; }
.howx-prose h1, .howx-prose h2, .howx-prose h3, .howx-prose h4 {
  color: #1E1E1C; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em;
  margin: 2.2em 0 0.6em;
}
.howx-prose h1 { font-size: 1.9rem; }
.howx-prose h2 { font-size: 1.5rem; }
.howx-prose h3 { font-size: 1.2rem; }
.howx-prose h4 { font-size: 1.05rem; }
.howx-prose p { margin: 0 0 1.1em; }
.howx-prose ul, .howx-prose ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.howx-prose ul { list-style: disc; }
.howx-prose ol { list-style: decimal; }
.howx-prose li { margin: 0.35em 0; }
.howx-prose li::marker { color: #00BDDB; }
.howx-prose a { color: #BE2F8B; text-decoration: underline; text-underline-offset: 2px; }
.howx-prose a:hover { color: #D846A6; }
.howx-prose strong, .howx-prose b { color: #1E1E1C; font-weight: 700; }
.howx-prose hr { border: 0; border-top: 1px solid rgba(30,30,28,0.12); margin: 2em 0; }
.howx-prose blockquote { border-left: 3px solid #00BDDB; padding-left: 1em; margin: 1.4em 0; color: #444; font-style: italic; }
.howx-prose img { max-width: 100%; height: auto; border-radius: 12px; }
.howx-prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 0.95rem; }
.howx-prose th, .howx-prose td { border: 1px solid rgba(30,30,28,0.14); padding: 0.55em 0.8em; text-align: left; vertical-align: top; }
.howx-prose th { background: #f3fbfd; font-weight: 700; }