/* THE CARD SYSTEM, settled with Kaʻo on 2026-07-31 and now shipping.
   ---------------------------------------------------------------------------
   This is the prototype from /music-cards/ and /poster-cards/ promoted onto the
   live site, so every poster card on every surface (the wall, a detail page's
   related shelves, an artist page, the nav preview) carries one treatment
   instead of each surface drifting.

   THE DECISIONS, in the order they were made:
     corners   languages top-left, flip top-right, light/dark bottom-left,
               play bottom-right. All four rotate with the card, so play sits
               on BOTH faces rather than on the card wrapper.
     play      REPLACES the music note on the card. The note stays in the nav.
               A large disc, pure white on a dark card and pure black on a
               lightened one, with the opposite glow, revealed on card hover.
     opacity   85% for the white disc, 75% for the black one. The black needs
               the lower value because it sits on a LIGHTENED card, where the
               same opacity reads heavier than white does on a dark one. Both
               go to a pure 100% when the button itself is hovered.
     hover     the disc GROWS rather than fading, the way Spotify's does.
     arrow     nudged 2px left, because a play triangle's visual mass sits left
               of its bounding box and looks off-centre when centred.
     url       pinned absolute on the back so it sits where it sits on the
               front; in flow it landed wherever the copy above it ended.
     hover     the lift belongs to the ART only, so hovering the title or the
               artist link underneath never moves the card. */

/* ---- the four controls ----
   THERE ARE TWO PLAY BUTTONS, and they are not interchangeable. Kaʻo,
   2026-07-31, on seeing the first pass ship the big disc onto poster cards:
   "The posters should use the smaller play button as seen at /poster-cards/."

     POSTER card  the poster's OWN 30px control, identical in size, colour and
                  reveal to the globe / flip / light-dark buttons beside it. It
                  is the fourth member of a set, so it must not out-shout the
                  other three.
     SONG card    the large pure disc from /music-play-85/. On a song card play
                  is the ONLY large control, so it can carry the whole tile.

   The small one is the default because the poster wall is by far the bigger
   surface; a song card opts in with .kc-cardplay--song. */
.kc-cardplay {
  position:absolute; z-index:7;
  width:30px; height:30px; border-radius:50%; border:0; padding:0;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:rgba(255,255,255,.22); color:#fff;
  opacity:0;
  transition:opacity .15s, background .15s, transform .12s;
}
.kc-cardplay svg { width:16px; height:16px; margin-left:1px; }
.kc-cardplay.is-playing svg { margin-left:0; }
.kc-cardplay:hover { background:rgba(255,255,255,.36); }
.kc-cardplay:active { transform:scale(.92); }
.kc-flip.kc-tone-dark .kc-cardplay { background:rgba(0,0,0,.16); color:#111; }
.kc-flip.kc-tone-dark .kc-cardplay:hover { background:rgba(0,0,0,.30); }
/* revealed with the card, exactly like the globe, tone and flip buttons */
.kc-flip:hover .kc-cardplay, .kc-cardplay:focus-visible { opacity:1; }
.kc-cardplay:focus-visible { outline:2px solid #2c5f4e; outline-offset:2px; }
@media (hover:none) { .kc-cardplay { opacity:.92; } }

/* ---- SONG CARD play: the large pure disc, settled at /music-play-85/ ----
   Pure #ffffff on a dark card, pure #000000 on a lightened one, never a colour
   shift on hover. 85% white / 75% black: the black disc needs the lower value
   because it sits on a LIGHTENED card, where the same opacity reads heavier
   than white does on a dark one. Hover goes to a pure 100% and GROWS (the way
   Spotify's does) rather than fading. The glow is the mockup's Photoshop Outer
   Glow read literally: 50%, 10px, Softer, so a centred box-shadow with no
   offset. The arrow sits 2px left of centre because a play triangle's visual
   mass is left of its bounding box and reads off-centre when truly centred. */
.kc-cardplay--song {
  width:60.75px; height:60.75px;
  background:#ffffff; color:#000000;
  box-shadow:0 0 10px rgba(0,0,0,.5);
  --kc-play-dim:0.85;
  transition:opacity .15s, transform .16s cubic-bezier(.2,.7,.3,1);
}
.kc-cardplay--song svg { width:38.4px; height:38.4px; margin-left:-2px; }
.kc-cardplay--song.is-playing svg { margin-left:0; }
.kc-cardplay--song:hover { background:#ffffff; }
.kc-cardplay--song:active { transform:none; }
.kc-flip.kc-tone-dark .kc-cardplay--song {
  background:#000000; color:#ffffff;
  box-shadow:0 0 10px rgba(255,255,255,.5);
  --kc-play-dim:0.75;
}
.kc-flip.kc-tone-dark .kc-cardplay--song:hover { background:#000000; }
.kc-flip:hover .kc-cardplay--song { opacity:var(--kc-play-dim); }
.kc-flip:hover .kc-cardplay--song:hover,
.kc-cardplay--song:focus-visible { opacity:1; transform:scale(1.07); }
@media (hover:none) { .kc-cardplay--song { opacity:var(--kc-play-dim); } }
@media (prefers-reduced-motion: reduce) {
  .kc-cardplay--song { transition:opacity .15s; }
  .kc-flip:hover .kc-cardplay--song:hover { transform:none; }
}

/* ---- the back ---- */
/* The url sits in the same place on both faces. On the back it was
   position:relative (in flow) so it could take a z-index over the video scrim,
   which left it landing wherever the copy above it ended. */
.kc-pcard .kc-flip__back .kc-fc__url { position:absolute; }

/* A sentence that cannot fit even at the smallest readable size is clamped
   rather than allowed to run under the url. Should never fire for English. */
.kc-bc__tip.kc-tip--clamped {
  display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden;
}

/* ---- hover belongs to the art ---- */
.kc-pcard__poster { transition:transform .18s ease; }
.kc-pcard__poster:hover { transform:translateY(-5px); }
@media (prefers-reduced-motion: reduce) {
  .kc-pcard__poster, .kc-pcard__poster:hover { transition:none; transform:none; }
}

/* ---- SONG CARDS ARE SQUARE, always ----
   "All song cards absolutely must be square 100% of the time, hard
   requirement." A poster card ships 3:4; a song card overrides that to 1:1 to
   match the 180x180 art on /music/. The back's copy starts higher on a square
   face than on a 3:4 one, whose 22% top padding leaves too little run for a
   sentence once the face is shorter. */
.kc-flip--square { aspect-ratio:1/1 !important; }
.kc-flip--square .kc-bc__content { padding-top:11%; padding-bottom:18%; }

/* ---- title + artist under a card ---- */
/* Typography measured off /music/: 14px/600 and 12.5px/400 Montserrat. */
.kc-pcard__meta { margin:.6rem 0 .5rem; display:flex; flex-direction:column; gap:2px; }
.kc-pcard__title { font:600 14px/1.3 "Montserrat", system-ui, sans-serif;
  color:var(--wt-ink, #26302b); text-decoration:none; align-self:flex-start; }
.kc-pcard__by { font:400 12.5px/1.3 "Montserrat", system-ui, sans-serif;
  color:var(--wt-ink-quiet, #5f6a60); text-decoration:none; align-self:flex-start; }
.kc-pcard__title:hover, .kc-pcard__by:hover { text-decoration:underline; }
.kc-pcard__title:focus-visible, .kc-pcard__by:focus-visible {
  outline:2px solid var(--wt-btn-bg, #2c5f4e); outline-offset:2px; border-radius:3px;
}