/* 3D card: on hover (or keyboard focus) the cover tilts back, the title lifts forward and a cut-out
   picture rises out of the card. Pure CSS, no script.

   Kept fast: only transform and opacity animate, so the browser moves layers on the graphics card instead of
   repainting. The shadow is drawn once on a layer whose opacity fades in, rather than animating box-shadow.
   Nothing here touches the page outside .card3d. Motion is switched off for people who ask for less of it,
   and touch screens (no hover) show the card at rest.

   Markup:
   <a class="card3d" href="...">
     <span class="card3d-cover"><img src="cover.webp" width="200" height="300" alt="" loading="lazy" decoding="async"></span>
     <img class="card3d-title" src="title.webp" width="200" height="110" alt="Product name" loading="lazy" decoding="async">
     <img class="card3d-pop" src="cutout.webp" width="200" height="260" alt="" loading="lazy" decoding="async">
   </a>
   Size the pictures for the card (about 400 x 600 px for the cover at 2x), WebP, a few tens of KB each. */

.card3d {
  --card3d-h: 300px;
  --card3d-w: calc(var(--card3d-h) / 1.5);
  position: relative; display: inline-flex; justify-content: center; align-items: flex-end;
  width: var(--card3d-w); height: var(--card3d-h); padding: 0 36px; margin: 0 24px;
  perspective: 2500px; border-radius: 6px; text-decoration: none; outline: none;
}
.card3d-cover {
  position: absolute; inset: 0; z-index: -1; border-radius: 6px;
  transition: transform 0.5s ease; will-change: transform;
}
.card3d-cover img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; display: block; }
/* shadow and darkening drawn once, faded in with opacity */
.card3d-cover::before, .card3d-cover::after {
  content: ""; position: absolute; left: 0; width: 100%; border-radius: 6px; pointer-events: none;
  transition: opacity 0.5s ease;
}
.card3d-cover::before {
  inset: 0; opacity: 0;
  background: linear-gradient(to top, transparent 46%, rgba(12, 13, 19, 0.5) 68%, rgb(12, 13, 19) 97%);
  box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
}
.card3d-cover::after {
  bottom: 0; height: 120px; transform-origin: bottom; transform: scaleY(0.67);
  background: linear-gradient(to bottom, transparent 46%, rgba(12, 13, 19, 0.5) 68%, rgb(12, 13, 19) 97%);
  transition: transform 0.5s ease;
}
.card3d-title { width: 100%; transition: transform 0.5s ease; }
.card3d-pop {
  position: absolute; width: 100%; z-index: -1; opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

@media (hover: hover) {
  .card3d:hover .card3d-cover, .card3d:focus-visible .card3d-cover {
    transform: perspective(900px) translateY(-5%) rotateX(25deg);
  }
  .card3d:hover .card3d-cover::before, .card3d:focus-visible .card3d-cover::before { opacity: 1; }
  .card3d:hover .card3d-cover::after, .card3d:focus-visible .card3d-cover::after { transform: scaleY(1); }
  .card3d:hover .card3d-title, .card3d:focus-visible .card3d-title { transform: translate3d(0, -50px, 100px); }
  .card3d:hover .card3d-pop, .card3d:focus-visible .card3d-pop { opacity: 1; transform: translate3d(0, -30%, 100px); }
}
.card3d:focus-visible { box-shadow: 0 0 0 3px var(--accent, #2a78d6); }

@media (prefers-reduced-motion: reduce) {
  .card3d-cover, .card3d-cover::before, .card3d-cover::after, .card3d-title, .card3d-pop { transition: none; }
}

/* Product cards: the cover is the pack's own colour, the figures sit in the title layer, the pack pops out. */
.hero-row { display: flex; flex-wrap: wrap; gap: 24px 20px; padding: 72px 0 8px; }
.hero-row .card3d { margin: 0; padding: 0 18px; color: var(--pack-ink); }
.hero-row .card3d.small { --card3d-h: 230px; }
.hero-card .card3d-cover { background: radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.16), transparent 60%), var(--pack); }
.hero-card .card3d-cover::before { background: linear-gradient(to top, transparent 50%, rgba(0, 0, 0, 0.18) 100%); }
.hero-card .card3d-cover::after { background: linear-gradient(to bottom, transparent 30%, rgba(0, 0, 0, 0.28) 100%); }
.hero-card .card3d-title { position: relative; display: grid; gap: 2px; padding-bottom: 18px; text-align: left; }
.hero-title strong { font-size: 15px; letter-spacing: 0.01em; }
.hero-figure { font-size: 32px; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.small .hero-figure { font-size: 26px; }
.hero-sub { font-size: 12px; opacity: 0.85; }
/* the extra figures sit just below the title and show once it has lifted, so they take no room at rest */
.hero-more { position: absolute; left: 0; right: 0; top: calc(100% - 10px); display: grid; gap: 1px; font-size: 12px; opacity: 0; transition: opacity 0.5s ease; }
.hero-more b { font-variant-numeric: tabular-nums; }
.hero-card .card3d-pop {
  width: auto; max-width: 100%; max-height: calc(var(--card3d-h) * 0.78); bottom: 30%; left: 50%;
  transform: translate3d(-50%, 0, 0);
}
@media (hover: hover) {
  .hero-card:hover .card3d-pop, .hero-card:focus-visible .card3d-pop { transform: translate3d(-50%, -48%, 100px); }
  .hero-card:hover .hero-more, .hero-card:focus-visible .hero-more { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .hero-more { transition: none; } }