/* ============================================================
   products.css — product card presentation layer (.pc-*)
   Real-scene crossfade on hover / focus / touch-centered,
   floating packshots, shine sweep, bundle lineup float.
   Hand-written additive layer (no build tooling — see story.css).
   `.pc-hover` is toggled by products.js on touch devices when a
   card is centered in the viewport, mirroring :hover.
   ============================================================ */

.pc-media { isolation: isolate; }

/* --- real lifestyle scene (fades in over the gradient) --- */
.pc-scene {
  z-index: 1;
  opacity: 0;
  transform: scale(1.1);
  transition: opacity 0.55s ease, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.group:hover .pc-scene,
.pc-hover .pc-scene,
article:focus-within .pc-scene {
  opacity: 1;
  transform: scale(1.02);
}

/* --- packshot cutout --- */
.pc-cutout {
  z-index: 2;
  filter: drop-shadow(0 18px 20px oklch(40% 0.05 60 / 0.25));
  transition: opacity 0.45s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.group:hover .pc-cutout,
.pc-hover .pc-cutout,
article:focus-within .pc-cutout {
  opacity: 0;
  transform: scale(1.14);
}

/* soft ground shadow under the floating packshot */
.pc-shadow {
  position: absolute;
  left: 50%;
  bottom: 1.3rem;
  width: 52%;
  height: 1rem;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, oklch(30% 0.04 60 / 0.32), transparent 70%);
  filter: blur(6px);
  z-index: 1;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.group:hover .pc-shadow,
.pc-hover .pc-shadow,
article:focus-within .pc-shadow { opacity: 0; }

/* --- caption chip revealed with the scene --- */
.pc-scene-tag {
  position: absolute;
  left: 1.15rem;
  bottom: 1.05rem;
  z-index: 3;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: oklch(22% 0.02 60 / 0.55);
  color: oklch(97.5% 0.018 85);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease 0.15s, transform 0.45s ease 0.15s;
  pointer-events: none;
}
.group:hover .pc-scene-tag,
.pc-hover .pc-scene-tag,
article:focus-within .pc-scene-tag {
  opacity: 1;
  transform: translateY(0);
}

/* --- shine sweep across the media area --- */
.pc-sheen {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, oklch(100% 0 0 / 0.32) 50%, transparent 58%);
  transform: translateX(-130%);
}
.group:hover .pc-sheen,
.pc-hover .pc-sheen { animation: pc-sheen 0.9s ease 0.12s forwards; }
@keyframes pc-sheen { to { transform: translateX(130%); } }

/* --- idle float (runs for everyone; the page-level pause toggle and
       ?vsmotion=0 are the opt-outs — owner decision) --- */
.pc-cutout, .pc-lineup {
  animation: pc-float 5.5s ease-in-out infinite alternate;
}
#products article:nth-of-type(2) .pc-cutout { animation-delay: 0.9s; }
#products article:nth-of-type(3) .pc-cutout { animation-delay: 1.8s; }
.pc-lineup { animation-duration: 6.5s; }
/* `translate` is independent of `transform`, so the hover scale and the
   float never fight each other */
@keyframes pc-float {
  from { translate: 0 0; }
  to   { translate: 0 -9px; }
}

/* touch devices: keep the price visible while a card is in preview */
.pc-hover { box-shadow: var(--shadow-glow); }