/* product cards (featured compounds)

   the "View Details" strip is part of the panel, hidden under a clip-path at rest.
   on hover the panel slides up 42px and the clip opens so there's no seam.
   42px = strip height. also used in sections.js (--panel-top), change both */

.pcard {
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 118%;
}

.pcard__vial {
  position: absolute;
  z-index: 20;
  pointer-events: none;
  width: calc(var(--w) * 1cqw);
  height: auto;
  left: calc(50% + var(--x) * 1cqw);
  bottom: calc(var(--drop) * -1cqw);
  transform: translateX(-50%);
  filter: drop-shadow(0 24px 30px rgba(0,0,0,.28));
  transition: filter 1.6s var(--ease-out);
}
.pcard:hover .pcard__vial { filter: drop-shadow(0 28px 32px rgba(0,0,0,.32)); }

/* warm glow behind the vial */
.pcard > div:first-child::before {
  content: '';
  position: absolute;
  z-index: 15;
  pointer-events: none;
  width: 110cqw;
  height: 110cqw;
  left: 50%;
  bottom: -14cqw;
  transform: translateX(-50%) scale(.85);
  background: radial-gradient(circle at center, rgba(162,151,138,.32) 0%, rgba(162,151,138,.15) 30%, rgba(162,151,138,.04) 52%, rgba(162,151,138,0) 68%);
  opacity: 0;
  transition: opacity 1s var(--ease-out), transform 1.4s var(--ease-out);
}
.pcard:hover > div:first-child::before { opacity: 1; transform: translateX(-50%) scale(1); }

.pcard__panel {
  will-change: transform;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0), 0 10px 22px rgba(0,0,0,0);
  transition:
    transform 1.6s var(--ease-out),
    box-shadow 1.6s var(--ease-out),
    background-color 1.6s var(--ease-out),
    border-color 1.6s var(--ease-out),
    clip-path 1.6s var(--ease-out),
    backdrop-filter 1.6s var(--ease-out),
    z-index 0s linear .4s;
}
/* panels stretch to the tallest card so the lifted panel always meets the strip */
.pcard > .pcard__panel {
  flex: 1 1 auto;
  margin-top: -42px;
  padding-bottom: calc(1.25rem + 42px) !important;
  border-color: transparent !important;
  transform: translateY(42px);
  clip-path: inset(0 0 42px 0 round 1rem);
}
/* resting 1px border, only around the visible part */
.pcard > .pcard__panel::before {
  content: '';
  position: absolute;
  inset: 0 0 42px 0;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 1rem;
  pointer-events: none;
  transition: border-color 1.6s var(--ease-out);
}

.pcard:hover .pcard__panel {
  z-index: 30;
  transition-delay: 0s;
  transform: translateY(0);
  clip-path: inset(0 0 0 0 round 1rem);
  background-color: rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(28px);
  backdrop-filter: blur(28px);
  box-shadow: none;
  filter: blur(0px);
  animation: none;
}
.pcard:hover > .pcard__panel::before { border-color: transparent; }

/* tiny refocus blur when the mouse leaves */
@keyframes pcard-unblur {
  from { filter: blur(9px); }
  to   { filter: blur(0px); }
}
.pcard:not(:hover) .pcard__panel { animation: pcard-unblur 1.6s var(--ease-out); }

/* shadow lives on its own layer behind the panel so it never shows through the glass */
.pcard::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: var(--panel-top, 60%);
  z-index: 5;
  pointer-events: none;
  border-radius: 1rem;
  box-shadow: 0 18px 34px -16px rgba(0,0,0,0), 0 4px 10px -4px rgba(0,0,0,0);
  transition: top 1.6s var(--ease-out), box-shadow 1.6s var(--ease-out);
}
.pcard:hover::after {
  top: calc(var(--panel-top, 60%) - 42px);
  box-shadow: 0 30px 50px -20px rgba(0,0,0,.48), 0 8px 18px -6px rgba(0,0,0,.22);
}

.pcard__cta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  letter-spacing: .04em;
  color: rgba(255,255,255,.45);
  opacity: 0;
  transition: opacity 1.2s var(--ease-out), color .35s ease;
}
.pcard:hover .pcard__cta { opacity: 1; }
.pcard__cta:hover { color: #fff; }