/*
 * Grail section slabs (Figma node 22091:113146). Stage measurements are design
 * px from the 450 × 350 "Slabs" frame multiplied by --gcc-u, so the cards scale
 * with the component width. The details below stay at their design px sizes.
 *
 * No background, padding, margin or fixed height: width comes from the Width
 * setting (capped at the parent), height from the slabs ratio plus the details.
 */
.gcc {
  --gcc-u: calc(100cqw / 450);
  /* Soft start, unhurried middle, long settle (same as the hero carousel) */
  --gcc-ease: cubic-bezier(0.45, 0, 0.3, 1);

  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  width: var(--gcc-width, 28.125rem);
  max-width: 100%;
  container-type: inline-size;
  -webkit-user-select: none;
  user-select: none;
}

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

.gcc-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 450 / 350;
}

/*
 * Coverflow: every card is a 202 × 342 slab centered in the stage, moved into
 * its slot in 3D. The side pose (24° turn, 70 back, 218 perspective) is solved
 * from the side-slab silhouettes in Figma: inner edge 302 tall at ±135, outer
 * edge 227 tall at ±224. The perspective lives in each card's transform (with
 * the stage center as origin) so z-index still controls stacking.
 *
 * --gcc-turn is set per card from JS and only ever decreases, so cards keep
 * spinning one way: past the left slot they turn their back to the viewer while
 * tucked behind the center card, then come round to face front on the right.
 */
.gcc-card {
  position: absolute;
  left: calc(50% - 101 * var(--gcc-u));
  top: calc(50% - 171.025 * var(--gcc-u));
  width: calc(202 * var(--gcc-u));
  height: calc(342.05 * var(--gcc-u));
  transform-origin: 50% 50%;
  transform: perspective(calc(218 * var(--gcc-u))) translate3d(var(--gcc-x), 0, var(--gcc-z))
    rotateY(var(--gcc-turn));
  z-index: var(--gcc-layer);
  transform-style: preserve-3d;
  transition: transform var(--gcc-duration, 1400ms) var(--gcc-ease) var(--gcc-delay);
  will-change: transform;
}

/*
 * --gcc-delay staggers the move by destination, like the hero: the incoming
 * card leads, the outgoing center follows, and the card coming out from behind
 * trails. Keep the longest delay in sync with STAGGER_MS in GrailCardCarousel.tsx.
 */
.gcc-card[data-slot="center"] {
  --gcc-x: 0px;
  --gcc-z: 0px;
  --gcc-layer: 3;
  --gcc-delay: 0ms;
}

.gcc-card[data-slot="left"] {
  --gcc-x: calc(-245.6 * var(--gcc-u));
  --gcc-z: calc(-70 * var(--gcc-u));
  --gcc-layer: 2;
  --gcc-delay: 80ms;
}

.gcc-card[data-slot="right"] {
  --gcc-x: calc(245.6 * var(--gcc-u));
  --gcc-z: calc(-70 * var(--gcc-u));
  --gcc-layer: 1;
  --gcc-delay: 200ms;
}

/* Waits directly behind the center card, facing away */
.gcc-card[data-slot="back"] {
  --gcc-x: 0px;
  --gcc-z: calc(-140 * var(--gcc-u));
  --gcc-layer: 0;
  --gcc-delay: 0ms;
}

.gcc-card__face {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.gcc-card__face--back {
  transform: rotateY(180deg);
}

/* Card details ("Card Details" frame, 82px tall in the design) */
.gcc-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  color: var(--gcc-text-color, #fbf9ff);
  font-family: var(--gcc-font, "GT Standard L", sans-serif);
  font-style: normal;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-align: center;
  transition:
    opacity 300ms ease,
    transform 300ms ease;
}

.gcc-details[data-swapping] {
  opacity: 0;
  transform: translateY(-4px);
}

.gcc-tags {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 18px;
}

.gcc-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  min-width: 37.2px;
  padding: 0 5.3px;
  border: 0.5px solid;
  border-radius: 2.4px;
  font-size: 8.4px;
  font-weight: 500;
  white-space: nowrap;
}

.gcc-tag > span,
.gcc-title,
.gcc-value__label,
.gcc-value__amount {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.gcc-tag--grade {
  background: #1f202d;
  border-color: #393945;
  color: #6d6c77;
}

.gcc-tag--rarity {
  background: #ffd600;
  border-color: #fff6c8;
  color: #050614;
}

.gcc-tag--highlight {
  border-color: #8000ff;
  color: #fbf9ff;
  /* Figma's holo radial gradient, stretched to the tag */
  background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 37.2 18' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(10.839 -4.9154 12.379 31.806 -32.069 32.907)'><stop stop-color='rgba(128,0,255,1)' offset='0'/><stop stop-color='rgba(192,0,213,1)' offset='0.125'/><stop stop-color='rgba(255,0,170,1)' offset='0.25'/><stop stop-color='rgba(192,0,213,1)' offset='0.375'/><stop stop-color='rgba(128,0,255,1)' offset='0.5'/><stop stop-color='rgba(120,11,255,1)' offset='0.51563'/><stop stop-color='rgba(112,22,255,1)' offset='0.53125'/><stop stop-color='rgba(96,44,255,1)' offset='0.5625'/><stop stop-color='rgba(80,66,255,1)' offset='0.59375'/><stop stop-color='rgba(64,88,255,1)' offset='0.625'/><stop stop-color='rgba(32,131,255,1)' offset='0.6875'/><stop stop-color='rgba(16,153,255,1)' offset='0.71875'/><stop stop-color='rgba(0,175,255,1)' offset='0.75'/><stop stop-color='rgba(16,153,255,1)' offset='0.78125'/><stop stop-color='rgba(32,131,255,1)' offset='0.8125'/><stop stop-color='rgba(64,88,255,1)' offset='0.875'/><stop stop-color='rgba(80,66,255,1)' offset='0.90625'/><stop stop-color='rgba(96,44,255,1)' offset='0.9375'/><stop stop-color='rgba(112,22,255,1)' offset='0.96875'/><stop stop-color='rgba(120,11,255,1)' offset='0.98438'/><stop stop-color='rgba(128,0,255,1)' offset='1'/></radialGradient></defs></svg>")
    center / 100% 100% no-repeat;
}

.gcc-title {
  font-size: 14px;
  font-weight: 500;
}

.gcc-value {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
}

/* min-content puts each word on its own line ("Estimated" / "Value") */
.gcc-value__label {
  width: min-content;
  color: var(--gcc-label-color, #985cfc);
  font-size: 7px;
  font-weight: 300;
  text-align: right;
  white-space: normal;
}

.gcc-value__amount {
  font-size: 24px;
  font-weight: 800;
}

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