/* Additions layered on top of styles.css, which stays exactly as authored.
   Delete the two <link>/<script> lines in index.html to remove all of this. */

/* Athlete card text is sized in em off its own container, so one number on the
   container scales the kicker, name and bio together. fit-cards.js sets that
   number per card. Without this the sizes are rem and can't be scaled as a group. */
.profile-card > div:last-child {
  font-size: 16px;          /* starting point == the original rem sizes */
  overflow: hidden;         /* belt and braces: never spill if a fit is tight */
}
.profile-card > div:last-child .card-kicker { font-size: 0.68em; }
.profile-card > div:last-child h3           { font-size: 1.2em; }
.profile-card > div:last-child p            { font-size: 0.9em; }


/* Play badge on the two film cards.
   The films have `controls`, but Chrome only reveals the controls bar on hover,
   so with a poster frame set they read as still images. This overlays a play
   badge and removes it once the video starts. pointer-events are off, so every
   click still reaches the video itself. */
.film-stage { position: relative; }

.film-stage::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4.5rem;
  height: 4.5rem;
  transform: translate(-50%, -50%);
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2246%22%20fill%3D%22rgba%2817%2C17%2C17%2C.62%29%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2246%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.9%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M41%2032%20L72%2050%20L41%2068%20Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.4));
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.film-stage.is-playing::after { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .film-stage::after { transition: none; }
}