/* ============================================================
   Motion & detail layer
   Everything here is additive polish. Every effect below has a
   prefers-reduced-motion escape, and the page is fully readable
   with CSS animation disabled entirely.
   ============================================================ */

/* ---------- 1. Cross-document page transitions (native, no JS) ----------
   Progressive enhancement: Chrome/Edge 126+, Safari 18.2+, Firefox partial.
   Browsers without support just navigate normally — no penalty, no polyfill. */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vt-out .22s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root) { animation: vt-in  .32s cubic-bezier(0,0,.2,1) both; }

@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(10px); } }

/* The header shouldn't slide with the page — it's persistent furniture. */
header.site { view-transition-name: site-header; }
::view-transition-old(site-header),
::view-transition-new(site-header) { animation: none; mix-blend-mode: normal; }

/* A product photo morphs from its catalogue card into the detail page hero.
   The shared name is assigned per-card in JS at click time, because only one
   element on a page may carry a given view-transition-name at once. */
.vt-product-image { view-transition-name: product-image; }
::view-transition-group(product-image) { animation-duration: .4s; }

/* ---------- 2. First-paint hero sequence ----------
   CSS deliberately hides NOTHING here. Hiding is done by gsap.set() one
   statement before the timeline that reveals it, so there is no window in
   which the hero can be left blank by a script that dies, a throttled
   background tab, or a blocked file. This file only supplies the clipping
   boxes that SplitText's line wrappers need. */
.hero-line { display: block; overflow: hidden; }
.hero-line > span { display: block; will-change: transform; }

/* ---------- 3. Product cards ---------- */
.prod-card {
  position: relative;
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, border-color .28s ease;
}
/* Family colour enters as a rule across the card top, drawn on hover. */
.prod-card::after {
  content: "";
  position: absolute; inset: 0 auto auto 0;
  height: 3px; width: 100%;
  background: var(--fam, var(--pine));
  transform: scaleX(0); transform-origin: left;
  transition: transform .38s cubic-bezier(.2,.7,.3,1);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.prod-card:hover, .prod-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: var(--fam, var(--line));
}
.prod-card:hover::after, .prod-card:focus-visible::after { transform: scaleX(1); }
.prod-card .shot img { transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.prod-card:hover .shot img { transform: scale(1.04); }
.prod-card .eyebrow { color: var(--fam, var(--pine)); transition: color .2s ease; }
.prod-card .link { transition: gap .2s ease; }

/* Family → colour mapping. data-family is already on every card. */
[data-family="Retail bags"]      { --fam: var(--fam-retail); }
[data-family="Mesh & netting"]   { --fam: var(--fam-mesh); }
[data-family="Film & poly"]      { --fam: var(--fam-film); }
[data-family="Compostable"]      { --fam: var(--fam-compostable); }
[data-family="Trays & closures"] { --fam: var(--fam-trays); }
[data-family="Industrial"]       { --fam: var(--fam-industrial); }

/* ---------- 4. Filter chips ---------- */
.filter-chip { transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .12s ease; }
.filter-chip:active { transform: scale(.97); }

/* ---------- 5. Link underline that draws in ---------- */
.link-draw { position: relative; }
.link-draw::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.link-draw:hover::after, .link-draw:focus-visible::after { transform: scaleX(1); transform-origin: left; }

/* ---------- 6. Stat counters ---------- */
.stat-num { font-variant-numeric: tabular-nums; }

/* ---------- 7. Buttons ---------- */
.btn { transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease, box-shadow .18s ease; }
.btn-accent:hover, .btn-wa:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -8px rgba(16,26,53,.5); }
.btn:active { transform: translateY(0) scale(.985); }

/* ---------- 8. Woven section divider ----------
   A tiny nod to the actual product: a mesh weave, drawn in CSS, separating
   major sections instead of a plain hairline. */
.weave-rule {
  height: 8px; border: none; margin: 0;
  background-image:
    repeating-linear-gradient(45deg,  var(--line) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, var(--line) 0 1px, transparent 1px 7px);
  opacity: .9;
}

/* ---------- Reduced motion: strip all of it ---------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .prod-card, .prod-card .shot img, .prod-card::after,
  .btn, .filter-chip, .link-draw::after { transition: none !important; }
  .prod-card:hover { transform: none; }
  .prod-card:hover .shot img { transform: none; }
}