/* assets/css/style.css
   Small hand-written additions the Tailwind Play CDN can't generate on its
   own (keyframes, ::-webkit- pseudo-elements). Everything else uses plain
   Tailwind utility classes directly in the markup. */

html {
  scroll-behavior: smooth;
}

/* Hero slider crossfade */
.slide {
  opacity: 0;
  transition: opacity 900ms ease-in-out;
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.slide.is-active {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
}

/* Slow "Ken Burns" zoom on the active hero slide's image for a subtle
   sense of motion instead of a static photo. */
.slide img {
  transform: scale(1.06);
  transition: transform 6500ms ease-out;
}
.slide.is-active img {
  transform: scale(1);
}

/* Sticky header gains a shadow once the page has scrolled, so it reads
   as "lifted" above the content instead of blending into it. */
#site-header.is-scrolled {
  box-shadow: 0 4px 16px -4px rgb(0 0 0 / 0.08);
}

/* Generic scroll-reveal: elements start faded/offset and animate in once
   they enter the viewport (see the IntersectionObserver in main.js).
   Respects reduced-motion preferences. */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .slide img { transition: none; transform: none; }
}

/* Product gallery thumbnail active ring */
.thumb-active {
  outline: 2px solid #0AB89D;
  outline-offset: 2px;
}

/* Slim custom scrollbar for horizontal scrollers (category chips, etc.) */
.scrollbar-thin::-webkit-scrollbar { height: 6px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: #E4E4E6; border-radius: 9999px; }

/* Skeleton loading shimmer for AJAX variant swaps */
@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, #f0efe9 25%, #e8e6de 37%, #f0efe9 63%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite linear;
}

/* Fallback multi-line clamp for older browsers (Tailwind's line-clamp-* covers modern ones) */
.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Product description rendering (admin-authored via the rich-text editor).
   Tailwind's preflight reset strips default paragraph/list spacing and
   bullets, so this restores just enough to read as normal formatted text. */
.rich-content p { margin-bottom: 1em; }
.rich-content p:last-child { margin-bottom: 0; }
.rich-content ul { list-style: disc; padding-left: 1.5em; margin-bottom: 1em; }
.rich-content ol { list-style: decimal; padding-left: 1.5em; margin-bottom: 1em; }
.rich-content li { margin-bottom: 0.25em; }
.rich-content strong, .rich-content b { font-weight: 600; color: inherit; }
.rich-content .ql-align-center { text-align: center; }
.rich-content .ql-align-right { text-align: right; }
.rich-content .ql-align-justify { text-align: justify; }