/* 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; }

/* Issue 5: Touch/Scroll chaining fix -- isolate horizontal rail swiping */
.overflow-x-auto, [data-horizontal-rail], #category-scroll-strip {
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}

/* ---------------------------------------------------------------------
   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); } }

/* F-034: the `hidden` ATTRIBUTE must win over a display utility.
   Tailwind's Preflight sets [hidden]{display:none}, but that sits in the
   base layer and loses to a utility class like `flex` at equal
   specificity -- so `<button hidden class="... flex ...">` stays visible.
   Everything that relies on the attribute to hide itself (the back-to-top
   button, and anything added later) needs this to be true. */
[hidden] { display: none !important; }

/* Every <details> on this site supplies its own affordance -- a chevron
   icon, a styled pill, or a link-looking control. The browser's default
   disclosure marker was still being painted on top of that, so "Edit" on
   a saved address rendered as a stray "▶ Edit" that looks like a broken
   bullet rather than a button. Two selectors because Safari and older
   WebKit use the pseudo-element rather than list-style. */
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}