/*
 * Every measurement is in design px from the 453 × 368 Figma frame
 * (node 22091:113012), multiplied by --hcc-u so the stage scales with its width.
 * Cards are laid out at center size and scaled into the side/back slots.
 */
.hcc {
  --hcc-u: calc(100cqw / 453);
  /* Soft start, unhurried middle, long settle */
  --hcc-ease: cubic-bezier(0.45, 0, 0.3, 1);

  /* No background, padding, margin or fixed height: width comes from the
     Width setting (capped at the parent), height from the card layout ratio. */
  position: relative;
  box-sizing: border-box;
  width: var(--hcc-width, 28.3125rem);
  max-width: 100%;
  aspect-ratio: 453 / 368;
  container-type: inline-size;
  -webkit-user-select: none;
  user-select: none;
}

.hcc *,
.hcc *::before,
.hcc *::after {
  box-sizing: border-box;
}

/* Slab footprint of the center card */
.hcc-card {
  position: absolute;
  left: calc(132.22 * var(--hcc-u));
  top: calc(0.43 * var(--hcc-u));
  width: calc(189.276 * var(--hcc-u));
  height: calc(320.098 * var(--hcc-u));
  transform-origin: 50% 0;
  transform: translate(var(--hcc-x), var(--hcc-y)) scale(var(--hcc-s));
  z-index: var(--hcc-z);
  transition: transform var(--hcc-duration, 1400ms) var(--hcc-ease) var(--hcc-delay);
  will-change: transform;
}

/*
 * --hcc-delay staggers the move by destination: the incoming card leads, the
 * outgoing center follows a beat later, and the card coming out from behind
 * waits until the new center has started to cover it. Keep the longest delay
 * in sync with STAGGER_MS in HeroCardCarousel.tsx.
 */
.hcc-card[data-slot="center"] {
  --hcc-x: 0px;
  --hcc-y: 0px;
  --hcc-s: 1;
  --hcc-z: 3;
  --hcc-delay: 0ms;
}

/* 148.724px slab at x 0.78, y 35 */
.hcc-card[data-slot="left"] {
  --hcc-x: calc(-151.716 * var(--hcc-u));
  --hcc-y: calc(34.57 * var(--hcc-u));
  --hcc-s: 0.785752;
  --hcc-z: 2;
  --hcc-delay: 80ms;
}

/* 148.724px slab at x 303.5, y 35 */
.hcc-card[data-slot="right"] {
  --hcc-x: calc(151.004 * var(--hcc-u));
  --hcc-y: calc(34.57 * var(--hcc-u));
  --hcc-s: 0.785752;
  --hcc-z: 1;
  --hcc-delay: 200ms;
}

/* 119.046px slab tucked behind the center card */
.hcc-card[data-slot="back"] {
  --hcc-x: calc(-1.838 * var(--hcc-u));
  --hcc-y: calc(60.05 * var(--hcc-u));
  --hcc-s: 0.628955;
  --hcc-z: 0;
  --hcc-delay: 0ms;
}

.hcc-card__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}

.hcc-badge {
  position: absolute;
  left: calc(50% - 0.62 * var(--hcc-u));
  top: calc(259.51 * var(--hcc-u));
  width: calc(107.594 * var(--hcc-u));
  height: calc(107.572 * var(--hcc-u));
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  pointer-events: none;
}

/* The default art already has Figma's 90° rotation baked in, so custom
   badge images show upright and are letterboxed into the same square. */
.hcc-badge__bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}

.hcc-badge__text {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(6.84 * var(--hcc-u));
  color: var(--hcc-text-color, #fbf9ff);
  font-style: normal;
  line-height: 0.85;
  text-transform: uppercase;
  white-space: nowrap;
}

.hcc-badge__value,
.hcc-badge__label {
  font-weight: 900;
  letter-spacing: -0.02em;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* Badge type per Figma node 22110:10207 ("Value Sticker"). --badge-fit is set
   from JS (shared/Badge.tsx) to shrink values too wide for the badge. */
.hcc-badge__value {
  font-family: var(--hcc-font-value, "GT Standard L Condensed", "GT Standard L", "Arial Narrow", sans-serif);
  font-size: calc(30 * var(--hcc-u) * var(--badge-fit, 1));
}

.hcc-badge__label {
  font-family: var(--hcc-font-label, "GT Standard L Expanded", "GT Standard L", sans-serif);
  font-size: calc(10.336 * var(--hcc-u));
}

@media (prefers-reduced-motion: reduce) {
  .hcc-card {
    transition: none;
  }
}