/* ===============================================================
   RACING NEXUS — DRIVER CARDS
   Team driver cards used by the leaderboard (built in cards.js).
   Replaces the one-file-per-team static/cards/*.html designs: the
   team colours now live in teams.js and are passed in as
   --team-bg / --team-spot on each card.

   Every card is its own size container and all internal sizes are
   in --u (1% of the card's width by default), so the design (drawn
   at 470×360) scales cleanly from a phone column to a 4K wall panel.
   1u = 4.7px at design size. Where the board stretches cards to fill
   their cell (leaderboard.css), --u also caps on the card's height so
   text never outgrows a wide, short card.

   Two variants:
     .rn-card               horizontal, P4..P15
     .rn-card--podium       same layout with medal trim, P1..P3
                            (+ .is-p1/.is-p2/.is-p3)
   =============================================================== */

.rn-card {
  --team-bg-0: color-mix(in srgb, var(--team-bg) 0%, transparent);
  position: relative;
  width: 100%;
  --u: 1cqw;
  aspect-ratio: 470 / 360;
  container-type: inline-size;
  overflow: hidden;
  border-radius: 12px;
  background: var(--team-bg);
  color: #fff;
  font-family: var(--font-body, Arial, sans-serif);
  box-sizing: border-box;
}

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

/* --- spot pattern: spot.svg used as a mask, tinted per team --- */
.rn-card .rn-spots {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.rn-card .rn-spots span {
  position: absolute;
  width: 187.2%;   /* 880px of 470 */
  height: 11.12%;  /* 40px of 360 */
  background: var(--team-spot);
  mask: url("/static/spot.svg") center / 100% 100% no-repeat;
  -webkit-mask: url("/static/spot.svg") center / 100% 100% no-repeat;
}

/* chevron: stripes step out to the middle and back */
.rn-card .rn-spots span:nth-child(1) { top: 0;      right: -100%; }
.rn-card .rn-spots span:nth-child(2) { top: 11.11%; right: -115%; }
.rn-card .rn-spots span:nth-child(3) { top: 22.22%; right: -130%; }
.rn-card .rn-spots span:nth-child(4) { top: 33.33%; right: -145%; }
.rn-card .rn-spots span:nth-child(5) { top: 44.44%; right: -160%; }
.rn-card .rn-spots span:nth-child(6) { top: 55.55%; right: -145%; }
.rn-card .rn-spots span:nth-child(7) { top: 66.66%; right: -130%; }
.rn-card .rn-spots span:nth-child(8) { top: 77.77%; right: -115%; }
.rn-card .rn-spots span:nth-child(9) { top: 88.88%; right: -100%; }

.rn-card .rn-fade {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  bottom: 0;
  width: 63.8%; /* 300px of 470 */
  background: linear-gradient(269.74deg, var(--team-bg-0) 20.12%, var(--team-bg) 89.81%);
}

/* --- portrait, pinned right and clipped --- */
.rn-card .rn-photo {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  width: 60%;
  height: 90%;
  overflow: hidden;
  pointer-events: none;
}

.rn-card .rn-photo > img,
.rn-card .rn-photo > svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--photo-pos, center top);
}

/* silhouette shown until the image pipeline has produced a portrait */
.rn-card .rn-photo > svg {
  fill: rgba(255, 255, 255, 0.14);
}

/* --- text --- */
.rn-card .rn-info {
  position: relative;
  z-index: 10;
  padding: calc(5.1 * var(--u)); /* 24px */
  max-width: 62%;
}

.rn-card .rn-first,
.rn-card .rn-last {
  font-size: calc(6.8 * var(--u)); /* 32px */
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rn-card .rn-first { font-weight: 400; }
.rn-card .rn-last { font-weight: 800; }

.rn-card .rn-team {
  padding-top: calc(0.85 * var(--u));
  padding-bottom: calc(2.6 * var(--u));
  min-height: 1.2em;
  font-size: calc(4 * var(--u)); /* 19px */
  font-weight: 700;
}

.rn-card .rn-rank {
  font-size: calc(10.2 * var(--u)); /* 48px */
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.rn-card .rn-rank small {
  margin-right: calc(0.4 * var(--u));
  font-size: calc(5.1 * var(--u));
  font-weight: 700;
}

.rn-card .rn-time {
  margin-top: calc(2.2 * var(--u));
  font-family: var(--font-numeric, monospace);
  font-size: calc(5.6 * var(--u));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.rn-card .rn-gap {
  margin-top: calc(0.6 * var(--u));
  font-family: var(--font-numeric, monospace);
  font-size: calc(3.4 * var(--u));
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.7);
}

.rn-card .rn-logo {
  position: absolute;
  z-index: 10;
  left: calc(5.1 * var(--u));
  bottom: calc(5.1 * var(--u));
  width: calc(21.3 * var(--u)); /* 100px */
}

.rn-card .rn-logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------
   PODIUM VARIANT — P1..P3
   Same layout as the horizontal card (tmp.html design); the podium
   only adds a gold/silver/bronze outline, medal-tinted rank and time,
   and a drop shadow so the cards read as standing above the board.
   --------------------------------------------------------------- */
.rn-card--podium {
  --medal: #c8cdd2;
  border-radius: 16px;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--medal) 45%, transparent),
    0 18px 40px -14px rgba(0, 0, 0, 0.8),
    0 10px 50px -18px color-mix(in srgb, var(--medal) 55%, transparent);
}

.rn-card--podium.is-p1 { --medal: #d4af37; }
.rn-card--podium.is-p2 { --medal: #c8cdd2; }
.rn-card--podium.is-p3 { --medal: #c97b3c; }

.rn-card--podium .rn-rank,
.rn-card--podium .rn-time {
  color: var(--medal);
}

/* ---------------------------------------------------------------
   TEAM / PHOTO REVEAL
   Played when admin step 3 sets a driver's team or portrait, on the
   board (index.js) and in the admin preview (admin.js).
   Registering the team colours lets them cross-fade instead of
   snapping; the portrait then wipes up out of a bright flash while
   the stripes slide in behind it.
   --------------------------------------------------------------- */
@property --team-bg {
  syntax: "<color>";
  inherits: true;
  initial-value: #1c1c26;
}

@property --team-spot {
  syntax: "<color>";
  inherits: true;
  initial-value: #4a4a5c;
}

.rn-card {
  transition: --team-bg 0.9s ease, --team-spot 0.9s ease;
}

.rn-card.is-revealed .rn-photo > * {
  animation: rn-photo-in 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

.rn-card.is-revealed .rn-spots span {
  animation: rn-spots-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.rn-card.is-revealed .rn-spots span:nth-child(2),
.rn-card.is-revealed .rn-spots span:nth-child(8) { animation-delay: 0.04s; }
.rn-card.is-revealed .rn-spots span:nth-child(3),
.rn-card.is-revealed .rn-spots span:nth-child(7) { animation-delay: 0.08s; }
.rn-card.is-revealed .rn-spots span:nth-child(4),
.rn-card.is-revealed .rn-spots span:nth-child(6) { animation-delay: 0.12s; }
.rn-card.is-revealed .rn-spots span:nth-child(5) { animation-delay: 0.16s; }

.rn-card.is-revealed .rn-team {
  animation: rn-team-in 0.7s ease-out 0.35s both;
}

/* the card itself carries the animationend the board waits for */
.rn-card.is-revealed {
  animation: rn-reveal-glow 1.6s ease-out;
}

@keyframes rn-photo-in {
  0% {
    clip-path: inset(100% 0 0 0);
    transform: translateY(6%) scale(1.06);
    filter: brightness(2.2) saturate(0);
  }
  60% {
    filter: brightness(1.15) saturate(1);
  }
  100% {
    clip-path: inset(0 0 0 0);
    transform: none;
    filter: none;
  }
}

@keyframes rn-spots-in {
  from { opacity: 0; translate: 35% 0; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes rn-team-in {
  from { opacity: 0; letter-spacing: 0.35em; }
  to { opacity: 1; letter-spacing: normal; }
}

@keyframes rn-reveal-glow {
  0% { outline: 2px solid var(--team-spot); outline-offset: 5px; }
  40% { outline: 2px solid var(--team-spot); outline-offset: 0; }
  100% { outline: 2px solid transparent; outline-offset: 0; }
}

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

  .rn-card.is-revealed,
  .rn-card.is-revealed .rn-photo > *,
  .rn-card.is-revealed .rn-spots span,
  .rn-card.is-revealed .rn-team {
    animation: none !important;
  }
}