/*
 * Shared site-wide motion: smooth scrolling, a soft page fade-in,
 * scroll-triggered reveals for page content, and eased hover states
 * for links, buttons and pill CTAs. Loaded on every page alongside
 * the Tailwind CDN build.
 */

html {
  scroll-behavior: smooth;
}

body {
  opacity: 0;
  animation: pageFadeIn .6s cubic-bezier(.4,0,.2,1) forwards;
}

@keyframes pageFadeIn {
  to { opacity: 1; }
}

/* Scroll-reveal: progressive enhancement, only active once js/animate.js
   has tagged <html> as ready. Content stays fully visible if JS fails. */
html.js-anim main > *,
html.js-anim body > section,
html.js-anim [class*="grid"] > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--reveal-delay, 0s);
}

html.js-anim main > *.in-view,
html.js-anim body > section.in-view,
html.js-anim [class*="grid"] > *.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Smoother, slower easing on existing Tailwind "transition" utilities
   (nav links, inline CTAs) without changing what they animate. */
a.transition,
button.transition,
a[class*="transition"],
button[class*="transition"] {
  transition-duration: .35s;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
}

/* Gentle lift + glow on pill-shaped buttons/links site-wide. */
a[class*="rounded-full"],
button[class*="rounded-full"] {
  transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s ease,
    background-color .35s ease, border-color .35s ease, color .35s ease;
}

a[class*="rounded-full"]:hover,
button[class*="rounded-full"]:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -14px rgba(13,148,136,.5);
}

a[class*="rounded-full"]:active,
button[class*="rounded-full"]:active {
  transform: translateY(0);
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  body { animation: none; opacity: 1; }

  html.js-anim main > *,
  html.js-anim body > section,
  html.js-anim [class*="grid"] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  a[class*="rounded-full"]:hover,
  button[class*="rounded-full"]:hover {
    transform: none;
  }
}