/* Base resets matching the Stitch design system output */
@layer base {
  html, body { margin: 0; padding: 0; }
  body { overscroll-behavior: none; }
}
::-webkit-scrollbar { display: none; }
* { scrollbar-width: none; }

/* ---------------------------------------------------------------------
   Scroll-reveal animations. Elements start hidden/offset via [data-reveal]
   and are flipped to .is-visible by assets/js/site.js's IntersectionObserver.
   Respects prefers-reduced-motion.
------------------------------------------------------------------------ */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-28px); }
[data-reveal="left"].is-visible { transform: translateX(0); }
[data-reveal="right"] { transform: translateX(28px); }
[data-reveal="right"].is-visible { transform: translateX(0); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="scale"].is-visible { transform: scale(1); }

/* Staggered children: add [data-reveal-group] to a container and
   [data-reveal] to each child — site.js assigns increasing transition-delay. */

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---------------------------------------------------------------------
   Micro-interactions
------------------------------------------------------------------------ */
.hover-lift {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px -8px rgba(0, 81, 40, 0.18);
}

.btn-press:active { transform: scale(0.97); }

@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, #eceeeb 0px, #f6f7f5 40px, #eceeeb 80px);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite linear;
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.animate-float { animation: floatY 5s ease-in-out infinite; }

@keyframes countUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-count { animation: countUp 0.5s ease-out both; }

/* Mobile menu slide */
#mobile-menu { animation: slideDown 0.25s ease-out; }
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Toast */
.toast {
  animation: toastIn 0.3s cubic-bezier(0.16, 1, 0.3, 1), toastOut 0.3s ease-in 2.7s forwards;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(16px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px) scale(0.98); } }