/* ---------------------------------------------------------------------
   Products -- the five COFT bag designs (1.png..5.png), closing out the
   page after ProcessSection's video. Static grid, no scroll choreography
   -- follows the same eyebrow/heading/lede + card-grid pattern as
   .journey in style.css rather than introducing a new one.
--------------------------------------------------------------------- */
.products-section {
  position: relative;
  padding: 7rem 0 8rem;
  background: var(--coffee-black);
  width: 100%;
}

.products-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  letter-spacing: -0.01em;
  margin: 0 0 1.25rem;
  max-width: 34rem;
}

.products-lede {
  color: #d8cec0;
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 34rem;
  margin: 0 0 4rem;
}

/* Entrance for the section's own eyebrow/heading/lede -- ProductsSection.js
   reveals `.products-intro` as one IntersectionObserver target (same
   one-shot pattern as the cards below), and each child animates in with
   its own staggered delay so the badge, then the heading, then the lede
   settle in one after another instead of all three snapping in at once. */
.products-intro > * {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.products-intro > *:nth-child(1) { transition-delay: 0s; }
.products-intro > *:nth-child(2) { transition-delay: 0.12s; }
.products-intro > *:nth-child(3) { transition-delay: 0.24s; }

.products-intro--visible > * {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .products-intro > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.75rem;
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.25rem;
  border-radius: 0.75rem;
  background: rgba(246, 239, 228, 0.03);
  border: 1px solid rgba(200, 168, 118, 0.16);
  overflow: hidden;
  /* Hidden/offset until ProductsSection.js's IntersectionObserver adds
     --visible the first time each card scrolls into view (see below);
     transform is also what the pointer-tilt effect drives on hover, via an
     inline style that temporarily overrides this one. Kept a good deal
     shorter than the opacity/position transition so the tilt itself still
     feels responsive rather than laggy. */
  opacity: 0;
  transform: translateY(2.5rem);
  transition: opacity 0.7s ease, transform 0.4s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;
}

/* Staggers the reveal left-to-right instead of all five cards fading in
   in lockstep, which read as flat/static despite the animation. */
.product-card:nth-child(1) { transition-delay: 0s, 0s, 0s, 0s; }
.product-card:nth-child(2) { transition-delay: 0.08s, 0.08s, 0s, 0s; }
.product-card:nth-child(3) { transition-delay: 0.16s, 0.16s, 0s, 0s; }
.product-card:nth-child(4) { transition-delay: 0.24s, 0.24s, 0s, 0s; }
.product-card:nth-child(5) { transition-delay: 0.32s, 0.32s, 0s, 0s; }

.product-card--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Cursor-anchored spotlight -- position comes from --mx/--my, set on
   pointermove by ProductsSection.js. Sits behind the card's own content
   (see `.product-card > *` below) via the shared z-index:0/1 split, not by
   DOM order, since an absolutely-positioned pseudo-element would otherwise
   paint above plain in-flow children regardless of source order. */
.product-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(200, 168, 118, 0.16), transparent 70%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.product-card > * {
  position: relative;
  z-index: 1;
}

.product-card:hover,
.product-card:focus-within {
  border-color: rgba(200, 168, 118, 0.45);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

.product-card:hover::before,
.product-card:focus-within::before {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .product-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.product-card img {
  width: 100%;
  max-width: 11rem;
  height: 14rem;
  object-fit: contain;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.45));
  margin-bottom: 1.5rem;
  transition: transform 0.4s ease;
}

.product-card:hover img {
  transform: scale(1.06) translateY(-4px);
}

.product-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--coffee-tan);
  margin: 0 0 0.6rem;
}

.product-card p {
  color: #c9beb0;
  line-height: 1.6;
  margin: 0 0 1.5rem;
  font-size: 0.88rem;
}

.product-cta {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--coffee-black);
  background: linear-gradient(135deg, #e3c393, #b8894f);
  border: none;
  border-radius: 999px;
  padding: 0.55rem 1.35rem;
  cursor: pointer;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.product-cta:hover {
  box-shadow: 0 10px 22px rgba(184, 137, 79, 0.4);
  transform: translateY(-1px);
}

@media (max-width: 1100px) {
  .products-grid {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 2.5rem;
  }
}

@media (max-width: 640px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 460px) {
  /* Two columns of a card built around an 11rem-wide image get cramped
     well before typical small-phone widths -- one column reads far better
     down here than a squeezed 2-up grid. */
  .products-grid {
    grid-template-columns: 1fr;
  }
}