/* One-sentence stories: a story viewer in a phone's proportions on a black page, made of type alone. Thin bars at the
   top, the museum's name, one big sentence in Roboto Flex (a variable sans: width 25 to 151, weight 100 to 1000,
   grade and slant) and a hairline over a small label. The script sets the sentence's words one by one; the sizes
   inside the viewer are in cqw, so they follow it when a short screen makes it smaller. */
:root {
  --page: #000000;                    /* the page */
  --screen: #0d0d0c;                  /* the viewer */
  --edge: rgba(243, 240, 232, 0.13);  /* the hairline round the viewer */
  --ink: #f3f0e8;                     /* the sentence, the name and the bars */
  --muted: rgba(243, 240, 232, 0.52); /* the time, the label's second half */
  --track: rgba(243, 240, 232, 0.22); /* the bars before they fill, and the rule over the label */
  --accent: #ff5a36;                  /* the word between asterisks, once it is read */
}

* {
  box-sizing: border-box;
}

/* a tap is a click at once: no wait for a double tap */
html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Roboto Flex Variable', 'Roboto Flex', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* the viewer stands in the middle of the page; in a real page it opens over everything, full screen on a phone:
   .stage { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.92); } */
.stage {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 24px 16px;
}

.stories {
  position: relative;
  width: min(320px, 100%, calc((100svh - 48px) * 0.5634));
}

button {
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

button:focus {
  outline: none;
}

/* ---------------------------------------------------------------- the viewer */
.viewer {
  position: relative;
  width: 100%;
  aspect-ratio: 320 / 568;
  border-radius: 22px;
  overflow: hidden;
  background: var(--screen);
  container-type: inline-size;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  isolation: isolate;
}

.viewer::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--edge);
  pointer-events: none;
  z-index: 5;
}

/* ---------------------------------------------------------------- the bars */
.bars {
  position: absolute;
  top: 4cqw;
  left: 4.4cqw;
  right: 4.4cqw;
  display: flex;
  gap: 1.25cqw;
  z-index: 3;
  pointer-events: none;
}

.bar {
  flex: 1;
  height: 1.5px;
  overflow: hidden;
}

.bar__track {
  display: block;
  height: 100%;
  background: var(--track);
  transform-origin: 0 50%;
}

.bar__fill {
  display: block;
  position: relative;
  top: -100%;
  height: 100%;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ---------------------------------------------------------------- the head */
.head {
  position: absolute;
  top: 7.8cqw;
  left: 6.9cqw;
  right: 3.2cqw;
  height: 11.25cqw;
  display: flex;
  align-items: center;
  gap: 2.5cqw;
  z-index: 3;
  pointer-events: none;
}

.head__name {
  font-size: 4.5cqw;
  line-height: 1;
  font-variation-settings: 'wdth' 100, 'wght' 680;
  letter-spacing: 0.005em;
}

.head__when {
  display: grid;
  overflow: hidden;
  padding: 0.12em 0;
  font-size: 4.1cqw;
  line-height: 1;
  color: var(--muted);
  font-variation-settings: 'wdth' 100, 'wght' 440;
}

.head__ago,
.head__paused {
  grid-area: 1 / 1;
  white-space: nowrap;
}

.head__paused {
  opacity: 0;
  color: var(--ink);
}

.head__pause {
  display: grid;
  place-items: center;
  width: 11.25cqw;
  height: 11.25cqw;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.16s ease-out;
}

.head__pause svg {
  grid-area: 1 / 1;
  width: 6.25cqw;
  height: 6.25cqw;
  transition: opacity 0.18s ease, transform 0.32s cubic-bezier(0.23, 1, 0.32, 1);
}

.i-pause path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.i-play path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.head__pause .i-play {
  opacity: 0;
  transform: scale(0.7);
}

.head__pause[data-paused] .i-pause {
  opacity: 0;
  transform: scale(0.7);
}

.head__pause[data-paused] .i-play {
  opacity: 1;
  transform: none;
}

.head__pause:active {
  transform: scale(0.9);
}

.head__pause:focus-visible {
  box-shadow: inset 0 0 0 1px var(--ink);
}

/* ---------------------------------------------------------------- the sentence */
.text {
  position: absolute;
  top: 26cqw;
  left: 6.9cqw;
  right: 6.9cqw;
  bottom: 27cqw;
  z-index: 1;
  pointer-events: none;
  --wd: 60;
  --wg: 540;
  --wa: 690;
}

/* one sentence: its words stand where the browser would set them, then each one moves on its own */
.set {
  position: absolute;
  left: 0;
  right: 0;
  line-height: 1;
}

.measure,
.set {
  font-family: 'Roboto Flex Variable', 'Roboto Flex', 'Helvetica Neue', Arial, sans-serif;
  font-kerning: none;
  font-variant-ligatures: none;
  letter-spacing: -0.012em;
}

.measure {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  line-height: 1.02;
  text-wrap: balance;
  visibility: hidden;
  pointer-events: none;
}

.w {
  display: inline-block;
  white-space: nowrap;
  line-height: 1;
}

.set .w {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform, opacity;
}

.w i {
  font-style: normal;
  font-variation-settings: 'wdth' var(--wd), 'wght' var(--wg), 'GRAD' var(--gr, 0), 'slnt' 0;
}

/* the word in the accent colour is a little heavier; its colour and its slant come when the story reads it */
.w i.a {
  font-variation-settings: 'wdth' var(--wd), 'wght' var(--wa), 'GRAD' var(--gr, 0), 'slnt' var(--sl, 0);
}

.w i.l {
  font-variation-settings: 'wdth' var(--wd), 'wght' var(--wg), 'GRAD' var(--gr, 0), 'slnt' var(--sl, 0);
}

.measure i.a,
.measure i.l {
  --sl: -10;
}

/* ---------------------------------------------------------------- tapping: back on the left, on everywhere else */
.tap {
  position: absolute;
  top: 20cqw;
  bottom: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  z-index: 2;
  touch-action: manipulation;
  -webkit-touch-callout: none;
}

.tap--back {
  left: 0;
  width: 30%;
}

.tap--next {
  left: 30%;
  right: 0;
}

/* a thin chevron at the edge, for the mouse and the keys */
.tap__sign {
  position: absolute;
  top: calc(50% - 4cqw);
  width: 6cqw;
  height: 6cqw;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.32s cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none;
}

.tap--back .tap__sign {
  left: 1.6cqw;
  transform: translateX(1.5cqw);
}

.tap--next .tap__sign {
  right: 1.6cqw;
  transform: translateX(-1.5cqw);
}

@media (hover: hover) and (pointer: fine) {
  .tap:hover .tap__sign {
    opacity: 0.7;
    transform: none;
  }
}

/* for the keys the chevron shows in full, a little heavier, with a hairline under it */
.tap:focus-visible .tap__sign {
  opacity: 1;
  stroke-width: 2;
  transform: none;
}

.tap::after {
  content: '';
  position: absolute;
  top: calc(50% + 3cqw);
  width: 6cqw;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.tap--back::after {
  left: 1.6cqw;
  transform-origin: 0 50%;
}

.tap--next::after {
  right: 1.6cqw;
  transform-origin: 100% 50%;
}

.tap:focus-visible::after {
  transform: scaleX(1);
}

.viewer[data-held] .tap__sign {
  opacity: 0;
}

/* ---------------------------------------------------------------- the label under the hairline */
.foot {
  position: absolute;
  left: 6.9cqw;
  right: 6.9cqw;
  bottom: 6.9cqw;
  height: 13.75cqw;
  z-index: 3;
  pointer-events: none;
}

.foot__rule {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--track);
  transform-origin: 0 50%;
}

.label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 9.4cqw;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4cqw;
  font-size: 3.9cqw;
  line-height: 1;
}

.label__what,
.label__when {
  display: block;
  white-space: nowrap;
}

.label__what {
  font-variation-settings: 'wdth' 100, 'wght' 600;
  letter-spacing: 0.01em;
}

.label__when {
  color: var(--muted);
  font-variation-settings: 'wdth' 100, 'wght' 440;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* at the end of the stories: watch them again */
.again {
  position: absolute;
  left: -1px;
  bottom: -0.3cqw;
  display: inline-flex;
  align-items: center;
  gap: 2.2cqw;
  height: 10cqw;
  margin: 0;
  padding: 0 4.4cqw 0 4.7cqw;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(243, 240, 232, 0.42);
  cursor: pointer;
  pointer-events: auto;
  font-size: 4cqw;
  line-height: 1;
  transition: box-shadow 0.25s ease, transform 0.16s ease-out;
}

.again[hidden] {
  display: none;
}

.again__word {
  display: block;
  font-variation-settings: 'wdth' 100, 'wght' 600;
  transition: font-variation-settings 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}

.again__sign {
  display: block;
  width: 4.6cqw;
  height: 4.6cqw;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.6s cubic-bezier(0.34, 1.3, 0.64, 1);
}

@media (hover: hover) and (pointer: fine) {
  .again:hover {
    box-shadow: inset 0 0 0 1px var(--ink);
  }

  .again:hover .again__word {
    font-variation-settings: 'wdth' 118, 'wght' 640;
  }

  .again:hover .again__sign {
    transform: rotate(-200deg);
  }
}

.again:focus-visible {
  box-shadow: inset 0 0 0 1px var(--ink), 0 0 0 3px rgba(243, 240, 232, 0.25);
}

.again:active {
  transform: scale(0.97);
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}