@keyframes appearPop { 0% { opacity: 0; transform: scale(0.9); } 70% { opacity: 1; transform: scale(1.02); } 100% { opacity: 1; transform: scale(1); } }
@keyframes appearSoft { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes appearBlur { from { opacity: 0.35; filter: blur(4px); } to { opacity: 1; filter: blur(0); } }
.appear {
  opacity: 1;
  animation-duration: 0.9s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-delay: var(--d, 0.05s);
}
.appear--pop { animation-name: appearPop; }
.appear--soft { animation-name: appearSoft; }
.hero-em-reveal { animation: appearBlur 1s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.6s; }
@media (prefers-reduced-motion: reduce) {
  .appear, .hero-em-reveal { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* --- Interaction polish: applies to existing hover-intent classes site-wide, no HTML edits needed --- */
html { scroll-behavior: smooth; }

a[class*="hover:border-primary"],
a[class*="hover:shadow"],
article[class*="hover:shadow"],
article[class*="hover:border-primary"],
div[class*="hover:shadow"],
main article.group {
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}
a[class*="hover:border-primary"]:hover,
a[class*="hover:shadow"]:hover,
article[class*="hover:shadow"]:hover,
article[class*="hover:border-primary"]:hover,
div[class*="hover:shadow"]:hover,
main article.group:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(7, 36, 23, 0.10);
}

button, .btn, a {
  transition: transform 0.15s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
button:active, a:active { transform: scale(0.97); }

/* FAQ accordion answers: fade+slide the content in when it opens (structure untouched) */
[class*="border-outline-variant/40"]:not(.hidden) {
  animation: appearSoft 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  a, button, .btn, main article.group,
  [class*="border-outline-variant/40"] { transition: none !important; animation: none !important; transform: none !important; }
}