/* Boathouse holo cards (carousel slides — FULL pre-designed racer cards).
   Each card is one complete card PNG: the gold frame, name banner + tagline and TR logo are all
   baked into the art. CSS no longer draws a frame or name — it only lays the cards out and runs
   the pointer→CSS-var holographic FOIL (adapted from Simey's pokemon-cards-css) over the top.
   Stack inside .cs-card__rot: .cs-card__art (PNG) < .cs-card__shine (z2 foil) < .cs-card__glare
   (z3) < .cs-card__frame (z4, depth shadow + rarity glow only). JS sets per card: the .cs-card
   transform; on the focused card --mx/--my/--posx/--posy/--rx/--ry/--hyp/--o (tilt + foil). */

.cs-card {
  --radius: 20px;
  --foil: .72;                                   /* rarity foil multiplier (per data-rarity) */
  position: absolute;
  top: 50%;
  left: 50%;
  height: clamp(220px, 54vh, 380px);
  aspect-ratio: 1414 / 2001;                     /* match the full-card art (frame + name baked in) */
  margin: 0;
  transform: translate(-50%, -50%);              /* JS overwrites with the carousel transform */
  transform-style: preserve-3d;
  transition: transform .45s var(--spring), opacity .35s var(--ease-soft), filter .35s var(--ease-soft);
  will-change: transform;
  cursor: pointer;
}
.cs-card.is-focused { cursor: grab; }
.cs-card.is-focused.dragging { cursor: grabbing; }

.cs-card__rot {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  transform: rotateY(var(--rx, 0deg)) rotateX(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform .3s var(--ease-soft);
}
.cs-card.interacting .cs-card__rot { transition: none; }

/* ── Art window — holds the complete card PNG (full-bleed; frame + name are part of the art) ── */
.cs-card__art {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  background: #0a1730;                            /* fallback while the PNG decodes */
}
.cs-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;                             /* art ratio matches the card → no real crop */
  object-position: 50% 50%;                      /* full card is centered (banner + logo baked in) */
  display: block;
  -webkit-user-drag: none;
  user-select: none;
}

/* ── Holographic foil — a moving sheen ON TOP (now over flat art → can run richer) ── */
.cs-card__shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: var(--radius);
  pointer-events: none;
  opacity: calc(var(--o, 0) * var(--foil));
  mix-blend-mode: color-dodge;
  background-image:
    repeating-linear-gradient(112deg,
      #00E5FF 0%, #7FF2FF 5%, #Dff6ff 9%, #FFE000 14%, #00B8D4 20%, #00E5FF 26%),
    radial-gradient(farthest-corner circle at var(--mx, 50%) var(--my, 50%),
      rgba(255, 255, 255, .55), rgba(80, 80, 80, .12) 45%, rgba(0, 0, 0, .35) 90%);
  background-size: 300% 300%, 200% 200%;
  background-position: var(--posx, 50%) var(--posy, 50%), center;
  background-blend-mode: color-dodge, overlay;
  filter: brightness(calc((var(--hyp, 0) * .45) + .55)) contrast(1.8) saturate(1.28);
  transition: opacity .3s var(--ease-soft);
}
.cs-card.is-focused:not(.interacting) .cs-card__shine { animation: holoDrift 7s ease-in-out infinite; }
@keyframes holoDrift {
  0%, 100% { background-position: 12% 50%, center; }
  50%      { background-position: 88% 50%, center; }
}
.cs-card__glare {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: var(--radius);
  pointer-events: none;
  opacity: var(--o, 0);
  mix-blend-mode: overlay;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 55%);
  transition: opacity .3s var(--ease-soft);
}

/* ── Frame layer — depth shadow + a faint glass gloss (the card's own frame is baked in) ── */
.cs-card__frame {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: var(--radius);
  pointer-events: none;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .6);     /* depth only — no keyline (baked into the art) */
}
.cs-card__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: linear-gradient(128deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .03) 20%, transparent 42%, transparent 68%, rgba(255, 255, 255, .06) 100%);
  mix-blend-mode: screen;
}
/* ── Rarity tiers — foil strength + an outer glow on the frame layer ───────── */
.cs-card[data-rarity="common"]    { --foil: .72; }
.cs-card[data-rarity="rare"]      { --foil: .95; }
.cs-card[data-rarity="legendary"] { --foil: 1.15; }
.cs-card[data-rarity="rare"] .cs-card__frame {
  box-shadow: 0 0 26px rgba(0, 229, 255, .32), 0 20px 44px rgba(0, 0, 0, .6);
}
.cs-card[data-rarity="legendary"] .cs-card__frame {
  box-shadow: 0 0 30px rgba(255, 224, 0, .4), 0 20px 44px rgba(0, 0, 0, .65);
}

/* focused pops forward; peeks dim + fan back */
.cs-card.is-focused { z-index: 30; }
.cs-card.is-peek { filter: brightness(.62) saturate(.82); z-index: 10; }
.cs-card.is-hidden { opacity: 0; pointer-events: none; }

/* ── No foil on touch (perf); flatten foil under reduced-motion ───────────── */
@media (hover: none), (pointer: coarse) {
  .cs-card__shine { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-card, .cs-card__rot, .cs-card__shine, .cs-card__glare { transition: none; }
  .cs-card.is-focused:not(.interacting) .cs-card__shine { animation: none; }
}