/* Marlen A. Fajo — in-home therapeutic recovery site. */
/* Most styling is Tailwind (via CDN); this file holds only what */
/* Tailwind utilities don't cover cleanly. */

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
}

/* Offset anchor jumps so the fixed nav doesn't cover section headings. */
section[id],
header[id] {
  scroll-margin-top: 5rem;
}

/* Hero background: a calm, clinical-spa gradient. Self-contained so the */
/* page loads fast and never depends on an external image. */
.hero-bg {
  background-color: #f0fdfa;
  background-image:
    radial-gradient(60rem 40rem at 78% -10%, rgba(45, 212, 191, 0.30), transparent 60%),
    radial-gradient(50rem 36rem at 0% 8%, rgba(125, 211, 252, 0.28), transparent 60%),
    linear-gradient(180deg, #f5f5f4, #f5f5f4);
}

/* Portrait placeholder cards hold a steady, comfortable height. */
.portrait {
  min-height: 20rem;
}

/* Reveal-on-scroll animation (progressive enhancement). */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}