/* ============================================================
   BOX STORY — pinned, scroll-scrubbed 3D suture box (products page)
   .bx height controls how long the scene stays pinned.
   ============================================================ */
.bx { position: relative; height: 520vh; height: 520svh; background: #12040a; color: #fff; }
.bx-pin {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  cursor: default; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  background:
    radial-gradient(ellipse 60% 55% at 66% 52%, rgba(120, 90, 190, .22), transparent 70%),
    linear-gradient(135deg, #12040a 0%, #2d0a10 100%);
}
.bx-pin.bx-drag { cursor: default; }
.bx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.bx-copy { position: absolute; z-index: 2; left: clamp(20px, 6vw, 96px); top: clamp(84px, 16vh, 150px); max-width: min(460px, 86vw); pointer-events: none; }
.bx-eyebrow { display: inline-block; font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; color: #ff6b5e; margin-bottom: 14px; }
.bx-title { font-size: clamp(1.9rem, 4.4vw, 3.4rem); line-height: 1.08; font-weight: 700; margin: 0 0 18px; color: #fff; }
.bx-title span { color: #ff3b3b; }
.bx-steps { position: relative; min-height: 4.6em; }
.bx-step {
  position: absolute; left: 0; top: 0; right: 0; margin: 0;
  font-size: clamp(.95rem, 1.5vw, 1.1rem); line-height: 1.6; color: rgba(255, 255, 255, .78);
  opacity: 0; transform: translate3d(0, 14px, 0);
  transition: opacity .5s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
}
.bx-step.on { opacity: 1; transform: none; }
.bx-step b { color: #fff; font-weight: 600; }
.bx-dots { display: flex; gap: 8px; margin-top: 22px; }
.bx-dots i { width: 28px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .22); transition: background .4s ease, width .4s ease; }
.bx-dots i.on { background: #ff3b3b; width: 46px; }
.bx-hint {
  position: absolute; z-index: 2; left: 50%; bottom: max(22px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .5);
  transition: opacity .5s ease; pointer-events: none;
}
.bx-hint::after {
  content: ''; display: block; width: 1px; height: 26px; margin: 8px auto 0;
  background: linear-gradient(#ff6b5e, transparent); animation: bx-hint 1.8s ease-in-out infinite;
}
@keyframes bx-hint { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (max-width: 700px) {
  .bx { height: 320vh; height: 320svh; }
  .bx-copy { top: clamp(76px, 12vh, 110px); }
  .bx-steps { min-height: 5.6em; }
}
.pf-filtered .bx { display: none; }
@media (prefers-reduced-motion: reduce) { .bx-hint::after { animation: none; } .bx-step { transition: none; } }