/* ==========================================================================
   Kokoro (052): the three cards, rebuilt from the prototypes in the vault
   (reference/ko-*.html), and the full poster on light grey. Each card is a
   <figure class="media cs-card koc"> filled by js/kokoro.js; the frame,
   tape, header and pause button are shared (css/cards.css). Motion, timing,
   layout and text follow the prototypes; sizes are in cqw of the card.
   Kokoro's own style: dark #111 with cream, like the poster.
   ========================================================================== */

.koc {
  --cream: #F0E4AC;
  --e: cubic-bezier(.65, 0, .35, 1);
  --bg: #111111;
  --fg: var(--bone);
  --ctl-bg: var(--bone);
  --ctl-fg: var(--ink);
}

.koc-card {
  font-family: 'Outfit', system-ui, sans-serif;
  line-height: normal;
}
.koc-card .cs-card-hd {
  right: calc(7% + 40px); /* room for the pause button */
  font-size: max(10px, 2.2cqw);
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   The bottom of every card: progress dots, level and rule, source line
   (shared: css/cards.css). Kokoro's colours and level type.
   -------------------------------------------------------------------------- */
.koc-dots i.is-on {
  background: var(--cream);
  border-color: var(--cream);
}
.koc-meta {
  border-top-color: #333333;
}
.koc-lvl {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-stretch: 70%;
  font-size: max(18px, 7cqw);
  text-transform: uppercase;
}
.koc-rule {
  color: var(--bone-muted);
}

/* Small cards (phones, under 440px): one label in the header, as on the
   source line */
@container (max-width: 440px) {
  .koc-card .cs-card-hd span:last-child {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Logo: four brush strokes, each revealed by a wide stroked path in a mask
   -------------------------------------------------------------------------- */
.koc-lstage {
  position: absolute;
  left: 17%;
  right: 17%;
  top: 17%;
  height: 52%;
  display: grid;
  place-items: center;
}
.koc-logo {
  position: relative;
  width: 100%;
  max-height: 100%;
  aspect-ratio: 1872 / 1109;
}
.koc-logo svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.koc-brush {
  fill: none;
  stroke: #FFFFFF;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
}
.koc-brush.is-on {
  stroke-dashoffset: 0;
}
.koc-whole {
  transition: opacity .8s;
}
.koc-num {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 54px;
  fill: var(--muted);
  opacity: 0;
  transition: opacity .4s;
}
.koc-num.is-on {
  opacity: 1;
}
@container (max-width: 440px) {
  .koc-num {
    font-size: 80px;
  }
  .koc-lstage {
    left: 10%;
    right: 10%;
  }
}

/* --------------------------------------------------------------------------
   Koko redrawn: both drawings in the same place, a soft crossfade
   -------------------------------------------------------------------------- */
.koc-kstage {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 13%;
  height: 57%;
  display: grid;
  place-items: center;
}
.koc-cat {
  position: relative;
  height: 100%;
  aspect-ratio: 485 / 609;
}
.koc-cat img {
  position: absolute;
  left: 50%;
  bottom: 0;
  display: block;
  width: auto;
  height: 100%;
  transform: translateX(-50%);
  transition: opacity 1.6s cubic-bezier(.45, 0, .55, 1), filter 1.6s cubic-bezier(.45, 0, .55, 1);
}
.koc-new {
  opacity: 0;
  filter: blur(6px);
}
.is-after .koc-new {
  opacity: 1;
  filter: blur(0);
}
.is-after .koc-old {
  opacity: 0;
  filter: blur(6px);
}

/* --------------------------------------------------------------------------
   Rockaholics: the poster in three inks, then Koko's usual colours. The
   ink list starts 20px under the pause button.
   -------------------------------------------------------------------------- */
.koc-pstage {
  position: absolute;
  left: 7%;
  top: 18%;
  height: 48%;
  aspect-ratio: 3 / 4;
  background: #F7F4EE;
  box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .5);
}
.koc-pl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translate(2.4cqw, -3cqw);
  transition: opacity .5s, transform 1.1s var(--e);
}
.koc-pl.is-on {
  opacity: 1;
  transform: none;
}
.koc-h {
  margin: 0;
  font-size: max(10px, 2cqw);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.koc-inks {
  position: absolute;
  left: 62%;
  right: 6%;
  top: max(18%, calc(4.5% + 32px + 20px));
  display: flex;
  flex-direction: column;
  gap: 2.2cqw;
}
.koc-ink {
  display: flex;
  align-items: center;
  gap: 2cqw;
  opacity: 0;
  transform: translateX(2cqw);
  transition: opacity .5s, transform .6s var(--e);
}
.koc-ink.is-on {
  opacity: 1;
  transform: none;
}
.koc-ink i {
  width: 6cqw;
  height: 6cqw;
  min-width: 22px;
  min-height: 22px;
  border: 1px solid #333333;
}
.koc-ink b {
  display: block;
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-stretch: 70%;
  font-size: max(14px, 4.4cqw);
  line-height: .95;
  text-transform: uppercase;
}
.koc-ink small {
  font-size: max(10px, 1.9cqw);
  color: var(--muted);
}
.koc-usual {
  position: absolute;
  left: 62%;
  right: 6%;
  top: 58%;
  display: flex;
  flex-direction: column;
  gap: 1.6cqw;
  opacity: 0;
  transition: opacity .7s;
}
.koc-usual.is-on {
  opacity: 1;
}
.koc-usual div {
  display: flex;
  gap: 1.2cqw;
}
.koc-usual i {
  width: 4.4cqw;
  height: 4.4cqw;
  min-width: 16px;
  min-height: 16px;
  border-radius: 50%;
}
@container (max-width: 440px) {
  .koc-ink small {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   The full poster, whole on light grey with a soft shadow
   -------------------------------------------------------------------------- */
.ko-sheet {
  background: #E6E7EB;
}
.media > img.ko-poster {
  inset: 6% auto auto 7%;
  width: 86%;
  height: 88%;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(20, 25, 40, .25));
}