/* ==========================================================================
   Health Potion (051): the three cards, rebuilt from the prototypes in the
   vault (reference/hp-*.html), and the manual pages on light grey. Each
   card is a <figure class="media cs-card hpc"> filled by
   js/health-potion.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. Health Potion's own style: white, navy,
   Century Gothic.
   ========================================================================== */

/* URW Gothic (URW++, from the Ghostscript core fonts) stands in for Century
   Gothic, with the square dots on . : ; ! ? i j redrawn round, like Century
   Gothic's. Latin, this page only. Licence: fonts/urw-gothic/LICENSE
   (AGPL v3, see COPYING). */
@font-face {
  font-family: 'URW Gothic';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/urw-gothic/urw-gothic-book-round-dots.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'URW Gothic';
  font-style: italic;
  font-weight: 400;
  src: url('/fonts/urw-gothic/urw-gothic-bookoblique-round-dots.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'URW Gothic';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/urw-gothic/urw-gothic-demi-round-dots.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'URW Gothic';
  font-style: italic;
  font-weight: 700;
  src: url('/fonts/urw-gothic/urw-gothic-demioblique-round-dots.woff2') format('woff2');
  font-display: swap;
}

.hpc {
  --navy: #213655;
  --hp-ink: #1E1E1E;
  /* Small labels: the prototypes' #7A8496 is 3.8:1 on white, this is 4.7:1 */
  --label: #6B7487;
  --e: cubic-bezier(.65, 0, .35, 1);
  --bg: #FFFFFF;
  --fg: var(--hp-ink);
  --ctl-bg: var(--navy);
  --ctl-fg: #FFFFFF;
}

.hpc-card {
  font-family: 'Outfit', system-ui, sans-serif;
  line-height: normal;
}
.hpc-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(--label);
}

/* --------------------------------------------------------------------------
   The bottom of every card: progress dots, level and rule, source line
   (shared: css/cards.css). Health Potion's colours and type.
   -------------------------------------------------------------------------- */
.hpc-dots i {
  border-color: #9AA3B2;
}
.hpc-dots i.is-on {
  background: var(--navy);
  border-color: var(--navy);
}
.hpc-meta {
  border-top-color: #DCDFE5;
}
.hpc-lvl {
  font-family: 'URW Gothic', 'Outfit', sans-serif;
  font-weight: 700;
  font-size: max(18px, 5.6cqw);
  color: var(--navy);
}
.hpc-rule {
  font-family: 'URW Gothic', 'Outfit', sans-serif;
  font-weight: 400;
  color: #4A5468;
}
.hpc-src {
  color: var(--label);
}

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

/* --------------------------------------------------------------------------
   Logo grid: guides, outlines, hatching, ink
   -------------------------------------------------------------------------- */
.hpc-stage {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 14%;
  height: 54%;
  display: grid;
  place-items: center;
}
.hpc-stage svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.hpc-sv {
  transition: opacity .7s;
}
.hpc-sv.is-off {
  opacity: 0;
}
/* Pencil guides */
.hpc-gd {
  transition: opacity .8s;
}
.hpc-gd line,
.hpc-gd rect,
.hpc-gd path,
.hpc-gd circle {
  fill: none;
  stroke: #8CACC4;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s var(--e);
}
.hpc-gd .hpc-dash {
  stroke-dasharray: 4 4;
  stroke-dashoffset: 0;
  opacity: 0;
  transition: opacity .8s;
}
.hpc-gd text {
  font-family: 'URW Gothic', 'Outfit', sans-serif;
  font-weight: 400;
  font-size: 13px;
  fill: var(--label);
  paint-order: stroke;
  stroke: #FFFFFF;
  stroke-width: 5px;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity .6s .5s;
}
.is-on .hpc-gd line,
.is-on .hpc-gd rect,
.is-on .hpc-gd path,
.is-on .hpc-gd circle {
  stroke-dashoffset: 0;
}
.is-on .hpc-gd .hpc-dash,
.is-on .hpc-gd text {
  opacity: 1;
}
.is-settled .hpc-gd {
  opacity: .45;
}
/* The letters: outline, then ink */
.hpc-gl {
  fill: transparent;
  stroke: currentColor;
  stroke-width: .9;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.4s var(--e) .5s, fill .8s;
}
.is-on .hpc-gl {
  stroke-dashoffset: 0;
}
.is-settled .hpc-gl {
  fill: currentColor;
  transition-delay: 0s;
}
/* Hand hatching (the strokes: js/cards.js) */
.hpc-sc {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .45s ease-out;
  transition-delay: var(--d);
}
.is-hatched .hpc-sc {
  stroke-dashoffset: 0;
}
.hpc-scribble {
  transition: opacity .9s;
}
.is-settled .hpc-scribble {
  opacity: 0;
  transition-delay: .4s;
}
/* The flask: an outer stroke, a white inner stroke that holds the
   hatching, then the inner stroke fades and the lines are solid */
.hpc-ol * {
  fill: none;
  stroke: var(--hp-ink);
  stroke-width: 2.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.4s var(--e) .5s, fill .8s;
}
.hpc-ol .hpc-ring {
  stroke-width: 2.3;
}
.hpc-oli * {
  stroke: #FFFFFF;
  stroke-width: 1.75;
}
.hpc-oli .hpc-ring {
  stroke-width: 1.45;
}
.hpc-oli {
  transition: opacity .8s;
}
.is-settled .hpc-oli {
  opacity: 0;
}
.is-on .hpc-ol * {
  stroke-dashoffset: 0;
}
.is-settled .hpc-olo .hpc-bub {
  fill: #FFFFFF;
}
.hpc-mfl * {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 1.75;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.hpc-mfl .hpc-ring {
  stroke-width: 1.45;
}
/* The potion inks red */
.hpc-liq {
  fill: transparent;
  transition: fill .8s;
}
.is-settled .hpc-liq {
  fill: #A31C19;
}
@container (max-width: 440px) {
  .hpc-gd text {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Colour: one red, then three colours and their tints
   -------------------------------------------------------------------------- */
.hpc-sw {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 15%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 0;
  transition: column-gap 1.1s var(--e);
}
.is-split .hpc-sw {
  column-gap: 4cqw;
}
.hpc-col {
  display: flex;
  flex-direction: column;
  gap: 1.4cqw;
}
.hpc-main {
  position: relative;
  height: 28cqw;
  /* Reach 1px under the next block: no light seam between the three
     while they're one red */
  margin-right: -1px;
  background: #A31C19;
  transition: background 1s var(--e);
}
.hpc-main span {
  position: absolute;
  left: 2cqw;
  bottom: 1.8cqw;
  font-family: 'URW Gothic', sans-serif;
  font-weight: 700;
  font-size: max(10px, 2.3cqw);
  letter-spacing: .06em;
  color: #FFFFFF;
  opacity: 0;
  transition: opacity .5s;
}
.is-red .hpc-col:first-child .hpc-r,
.is-split .hpc-h {
  opacity: 1;
}
.is-split .hpc-main {
  background: var(--c);
}
.is-split .hpc-col:nth-child(2) .hpc-main {
  transition-delay: .15s;
}
.is-split .hpc-col:nth-child(3) .hpc-main {
  transition-delay: .3s;
}
.hpc-tint {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 5.6cqw;
  padding-right: 1.6cqw;
  font-family: 'URW Gothic', sans-serif;
  font-size: max(9px, 1.9cqw);
  opacity: 0;
  transform: translateY(-3cqw);
  transition: opacity .5s, transform .7s var(--e);
}
.is-tints .hpc-tint {
  opacity: 1;
  transform: none;
}
.is-tints .hpc-tint:nth-child(3) {
  transition-delay: .12s;
}
.is-tints .hpc-tint:nth-child(4) {
  transition-delay: .24s;
}
@container (max-width: 440px) {
  .hpc-tint {
    font-size: 0;
  }
}

/* --------------------------------------------------------------------------
   Century Gothic: Aa and the four styles, the characters, the hierarchy
   -------------------------------------------------------------------------- */
.hpc--type .hpc-card {
  color: var(--navy);
}
.hpc-ts {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 14%;
  height: 52%;
  font-family: 'URW Gothic', sans-serif;
}
.hpc-ts > div {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .7s;
}
.hpc-ts > div.is-on {
  opacity: 1;
}
/* 1: Aa and the four styles */
.hpc-aa {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  font-size: 30cqw;
  line-height: 1;
  letter-spacing: -.01em;
}
.hpc-sty {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 2.4cqw;
  width: 40%;
}
.hpc-sty span {
  font-size: 5.2cqw;
  line-height: 1.1;
  opacity: 0;
  transform: translateX(3cqw);
  transition: opacity .5s, transform .7s var(--e);
}
.hpc-sty small {
  display: block;
  margin-bottom: .4cqw;
  font-family: 'Outfit', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: max(9px, 1.8cqw);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--label);
}
.hpc-sc1.is-on .hpc-sty span {
  opacity: 1;
  transform: none;
}
.hpc-sc1.is-on .hpc-sty span:nth-child(2) { transition-delay: .35s; }
.hpc-sc1.is-on .hpc-sty span:nth-child(3) { transition-delay: .7s; }
.hpc-sc1.is-on .hpc-sty span:nth-child(4) { transition-delay: 1.05s; }
/* 2: the characters, typing in */
.hpc-chars {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2cqw;
  font-size: 6cqw;
  line-height: 1.1;
  letter-spacing: .06em;
  word-break: break-all;
}
.hpc-chars .hpc-b { font-weight: 700; }
.hpc-chars .hpc-n { font-weight: 400; }
.hpc-chars i {
  font-style: normal;
  opacity: 0;
  transition: opacity .15s;
}
.hpc-chars i.is-on {
  opacity: 1;
}
/* 3: hierarchy, as in the 2024 manual */
.hpc-hier {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 2cqw;
}
.hpc-hier > * {
  opacity: 0;
  transform: translateY(2cqw);
  transition: opacity .6s, transform .8s var(--e);
}
.hpc-sc3.is-on .hpc-hier > * {
  opacity: 1;
  transform: none;
}
.hpc-sc3.is-on .hpc-hier > :nth-child(2) { transition-delay: .5s; }
.hpc-sc3.is-on .hpc-hier > :nth-child(3) { transition-delay: 1s; }
.hpc-h1 {
  font-weight: 700;
  font-size: 7.6cqw;
  line-height: 1.02;
  letter-spacing: .02em;
}
.hpc-h1 span {
  display: block;
  color: #4378A2;
}
.hpc-h2 {
  font-weight: 700;
  font-size: 2.6cqw;
  letter-spacing: .06em;
}
.hpc-bd {
  max-width: 80%;
  font-weight: 400;
  font-size: 2.9cqw;
  line-height: 1.5;
  color: #4A5468;
}
@container (max-width: 440px) {
  .hpc-sty small,
  .hpc-bd {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Manual pages: shown whole on light grey with a soft shadow, page at the
   top, a version label in the strip under it (never over it)
   -------------------------------------------------------------------------- */
.hp-pages {
  background: #E6E7EB;
}
.media > img.hp-page {
  inset: 6% auto auto 7%;
  width: 86%;
  height: 76%;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(20, 25, 40, .25));
}
/* The letterhead file is only 782px wide: never show it wider than 390px
   (552px tall), so it stays sharp, a sheet on the table */
.media > img.hp-letter {
  max-height: 552px;
}
.hp-tag {
  position: absolute;
  bottom: 5%;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  padding: 6px 10px;
  background: var(--ink);
  color: var(--bone);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Two pages side by side, each with its label (16:9, square on phones) */
.media > img.hp-page--l,
.media > img.hp-page--r {
  left: 30%;
  width: auto;
  transform: translateX(-50%);
}
.media > img.hp-page--r,
.hp-tag--r {
  left: 70%;
}
.hp-tag--l {
  left: 30%;
}
/* Phones: the label is a tag in the top left corner, and the two versions
   stack, one above the other, so each page is big enough to read */
@media (max-width: 759.98px) {
  .hp-tag {
    top: 4%;
    bottom: auto;
    left: 5%;
    transform: none;
  }
  .media > img.hp-page {
    top: 14%;
    height: 78%;
  }
  .hp-pages.ar-wide {
    aspect-ratio: 1 / 2.4;
  }
  .media > img.hp-page--l,
  .media > img.hp-page--r {
    left: 50%;
    height: 40%;
  }
  .media > img.hp-page--l {
    top: 7%;
  }
  .media > img.hp-page--r {
    top: 57%;
  }
  .hp-tag--l,
  .hp-tag--r {
    left: 5%;
  }
  .hp-tag--l {
    top: 2%;
  }
  .hp-tag--r {
    top: 52%;
  }
}