/**
 * THE APP MACHINE — packaging system.
 *
 * Each product is a real photographed package (studio render, chroma-keyed to
 * transparency, stored in /products/<archetype>.webp). The renders are
 * deliberately NEUTRAL WHITE so the project's accent can be printed onto them
 * here as ink: an accent layer masked to the photo's own alpha and multiplied
 * over it, which keeps the photograph's real shading, seams and highlights.
 *
 * The site screenshot is intentionally absent from the package — that belongs
 * to the hover peek. This is the physical object.
 *
 * Products get no promoted layer or Z translation of their own: 28 composited
 * layers is a memory blowup on mobile. Depth comes from the photo, its contact
 * shadow, and scale.
 */

.pkg {
  --ink: #c0563f;

  position: relative;
  display: block;
  width: auto;
  max-width: 96%;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  color: inherit;
  transform: translate3d(0, 0, 0) rotate(var(--tilt, 0deg));
  transition:
    transform 220ms var(--ease-release),
    filter 220ms ease;
}

/* Contact shadow on its own element so it can tighten independently as the
   product lifts toward the lamp. box-shadow can't animate cheaply. */
.pkg__shadow {
  position: absolute;
  bottom: -3px;
  left: 50%;
  z-index: 0;
  width: 76%;
  height: 7px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.66), transparent 70%);
  filter: blur(3px);
  transition: height 260ms ease, filter 260ms ease, opacity 260ms ease;
}

/* The package. Height comes from the shelf; the photo's own aspect ratio
   decides the width, so a tin stays squat and a bottle stays tall. */
.pkg__body {
  position: relative;
  z-index: 1;
  display: block;
  height: calc(var(--deckh, 100px) * var(--h, 0.8));
  width: auto;
}

.pkg__photo {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
}

/* Printing ink: accent multiplied over the white board, clipped to the
   package silhouette by masking with the render's own alpha. */
.pkg__tint {
  position: absolute;
  inset: 0;
  background: var(--ink);
  mix-blend-mode: multiply;
  /* deliberately short of full strength — the photograph's shading, seams and
     specular highlights have to survive the print */
  opacity: 0.76;
  pointer-events: none;
  mask-image: var(--asset);
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-image: var(--asset);
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
}

/* Varnish: a soft specular sweep sitting on top of the print, same mask so it
   never spills past the product's edge. */
.pkg__gloss {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: screen;
  background: linear-gradient(
    112deg,
    rgba(255, 255, 255, 0.34) 0 9%,
    transparent 26%,
    transparent 74%,
    rgba(255, 255, 255, 0.14) 96%
  );
  mask-image: var(--asset);
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-image: var(--asset);
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
}

/* ---------------------------------------------------------------------- */
/* PRINTED BRAND                                                           */
/* Generated typography is unreliable at 90px, so the project name is set   */
/* in real type over the render — crisp at every size.                      */
/* ---------------------------------------------------------------------- */

.pkg__label {
  position: absolute;
  /* narrow silhouettes need the full face or long names break mid-word */
  right: 3%;
  bottom: 16%;
  left: 3%;
  z-index: 3;
  display: grid;
  gap: 1px;
  max-height: 46%;
  overflow: hidden;
  text-align: center;
  pointer-events: none;
}

.pkg__name {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-marque);
  font-size: clamp(5px, calc(var(--machine-w) * 0.0132), 8.5px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.04;
  text-transform: uppercase;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  color: #fff;
  /* ink sits on the board, so a tight dark edge rather than a soft glow */
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55);
}

.pkg__kind {
  font-family: var(--font-mono);
  font-size: clamp(3.5px, calc(var(--machine-w) * 0.0078), 5.5px);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
}

/* Light-ink products (cream cassette, gold pouch) need dark print. */
.pkg[data-ink="dark"] .pkg__name {
  color: #17181a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

.pkg[data-ink="dark"] .pkg__kind {
  color: rgba(23, 24, 26, 0.66);
}

/* Squat silhouettes have no room for a second line of type. */
.pkg--tin .pkg__kind,
.pkg--cassette .pkg__kind,
.pkg--module .pkg__kind {
  display: none;
}

/* Bottle and jar carry their label on the body, below the neck/lid. */
.pkg--bottle .pkg__label {
  bottom: 22%;
}

.pkg--jar .pkg__label {
  bottom: 18%;
}

.pkg--capsule .pkg__label {
  right: 4%;
  left: 4%;
  bottom: 12%;
}

.pkg--cassette .pkg__label {
  bottom: 30%;
}

/* ---------------------------------------------------------------------- */
/* HOVER / FOCUS / SELECT                                                  */
/* The product moves toward the glass, takes more light, and its contact    */
/* shadow tightens — the shadow change is what sells the lift.             */
/* ---------------------------------------------------------------------- */

.pkg:is(:hover, :focus-visible) {
  transform: translate3d(0, -3px, 0) scale(1.04) rotate(var(--tilt, 0deg));
  filter: brightness(1.12) contrast(1.02);
}

.pkg:is(:hover, :focus-visible) .pkg__shadow {
  height: 4px;
  opacity: 0.7;
  filter: blur(5px);
}

.pkg:focus-visible {
  outline: 2px solid #0b0d10;
  outline-offset: 0;
  box-shadow:
    0 0 0 4px #ffe9a8,
    0 0 16px 4px rgba(255, 233, 168, 0.5);
  border-radius: 3px;
}

.pkg.is-selected {
  transform: translate3d(0, -5px, 0) scale(1.07) rotate(0deg);
  filter: brightness(1.18);
}

.pkg.is-selected .pkg__shadow {
  height: 3px;
  filter: blur(6px);
}

/* Dispense: the package rotates off the coil and drops toward the port. */
.pkg.is-dispensing {
  animation: dispense 380ms var(--ease-drop) forwards;
}

@keyframes dispense {
  0% {
    transform: translate3d(0, -5px, 0) scale(1.07);
  }
  22% {
    transform: translate3d(0, -2px, 0) rotate(-7deg) scale(1.04);
  }
  100% {
    transform: translate3d(0, 90px, 0) rotate(-16deg) scale(0.9);
    opacity: 0;
  }
}

/* Excluded by a category filter — still stocked, just not lit. */
.slot.is-muted .pkg {
  filter: saturate(0.2) brightness(0.4);
  pointer-events: none;
}

.slot.is-muted .pkg__shadow {
  opacity: 0.28;
}

/* ====================================================================== */
/* ARCHETYPE HEIGHTS                                                       */
/* Only relative height lives here now — silhouette, material and seams    */
/* all come from the photograph.                                           */
/* ====================================================================== */

.pkg--carton .pkg__body { --h: 0.96; }
.pkg--bottle .pkg__body { --h: 0.95; }
.pkg--box .pkg__body { --h: 0.86; }
.pkg--pouch .pkg__body { --h: 0.84; }
.pkg--jar .pkg__body { --h: 0.74; }
.pkg--can .pkg__body { --h: 0.9; }
.pkg--sleeve .pkg__body { --h: 0.78; }
.pkg--capsule .pkg__body { --h: 0.8; }
.pkg--tin .pkg__body { --h: 0.5; }
.pkg--module .pkg__body { --h: 0.52; }
.pkg--cassette .pkg__body { --h: 0.42; }

/* ====================================================================== */
/* MOBILE: stand closer, products get bigger                               */
/* ====================================================================== */

@media (max-width: 640px) {
  .pkg__name {
    font-size: 8.5px;
    letter-spacing: -0.02em;
  }

  .pkg__kind {
    font-size: 6px;
  }
}