/* theme.css — shared warm-pastel visual + interaction layer.
   Token colors live in each page's inline tailwind.config; this file only adds
   gradients, soft surfaces, hover states, and scroll-reveal. */

/* --- Soft pastel page wash --- */
body {
  background-image:
    radial-gradient(60rem 60rem at 110% -10%, rgba(194, 77, 134, 0.06), transparent 60%),
    radial-gradient(50rem 50rem at -10% 10%, rgba(139, 111, 194, 0.06), transparent 55%);
}

/* --- Hero gradient overlay (purple -> pink, soft) ---
   Add class "hero-overlay" to the hero's existing absolute overlay div. */
.hero-overlay {
  background-image: linear-gradient(
    120deg,
    rgba(74, 42, 107, 0.55) 0%,
    rgba(139, 111, 194, 0.35) 45%,
    rgba(194, 77, 134, 0.45) 100%
  );
}

/* --- Card hover lift ---
   Add class "card-soft" to cards/quick-links/news items.
   Note: will-change:transform creates a stacking context — child z-index is relative to the card, not the page. */
.card-soft {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  will-change: transform;
}
.card-soft:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 34px rgba(150, 70, 130, 0.16);
}

/* --- Button press feedback ---
   Note: do not add Tailwind transition-* utilities to the same element — they will override this rule. */
.btn-soft {
  transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}
.btn-soft:active {
  transform: scale(0.96);
}

/* --- Scroll reveal --- */
[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-reveal].revealed {
  opacity: 1;
  transform: none;
}

/* --- Respect reduced motion: disable all of the above motion --- */
@media (prefers-reduced-motion: reduce) {
  .card-soft, .btn-soft, [data-reveal] {
    transition: none !important;
    will-change: auto;
  }
  .card-soft:hover { transform: none; }
  .btn-soft:active { transform: none; }
  [data-reveal] { opacity: 1; transform: none; }
}