/* CHAPTER 05 · VISION — red, black and white. Words cut from paper and thrown
   forward; rings like a target, bolts and heaps of stars; one scene at a
   time, cut in by a slash. */

@font-face {
  font-family: "V5 Sans";
  src: url("./assets/vision/v5-sans.woff?v=2") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "V5 Serif";
  src: url("./assets/vision/v5-serif.woff?v=2") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "V5 Mono";
  src: url("./assets/vision/v5-mono.woff?v=2") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "V5 Semi";
  src: url("./assets/vision/v5-semi.woff?v=2") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: block;
}

.theme-space[data-theme="vision"] {
  --v5-red: #e5121e;
  --v5-black: #0b0b0c;
  --v5-white: #f6f3ee;
  --v5-gray: #9a9895;
  --v5-sans: "V5 Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --v5-serif: "V5 Serif", "Songti SC", "STSong", "Noto Serif CJK SC", serif;
  --v5-mono: "V5 Mono", "SFMono-Regular", Menlo, Consolas, "Noto Sans Mono CJK SC", monospace;
  --v5-semi: "V5 Semi", "Songti SC", "STSong", "Noto Serif CJK SC", serif;
  --v5-snap: cubic-bezier(0.2, 1.5, 0.4, 1);
  --v5-quick: cubic-bezier(0.16, 1, 0.3, 1);
  background: var(--v5-black);
}

.theme-space[data-theme="vision"] .theme-space__backdrop,
.theme-space[data-theme="vision"] .theme-heading {
  display: none;
}

.theme-space[data-theme="vision"] .theme-content {
  overflow: hidden;
}

/* ---------- floating menu: a red disc on a white ring ---------- */

.theme-space[data-theme="vision"] .fab__trigger {
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  background: var(--v5-red);
  box-shadow:
    0 0 0 3px var(--v5-black),
    0 0 0 6px var(--v5-white),
    6px 7px 0 6px var(--v5-black);
  transition: transform 360ms var(--v5-snap);
}

.theme-space[data-theme="vision"] .fab__trigger::after {
  display: none;
}

.theme-space[data-theme="vision"] .fab__trigger span {
  width: 20px;
  height: 4px;
  background: var(--v5-black);
}

.theme-space[data-theme="vision"] .fab__trigger:hover {
  transform: rotate(-14deg) scale(1.06);
}

.theme-space[data-theme="vision"] .fab :focus-visible {
  outline: 2px dashed var(--v5-white);
  outline-offset: 8px;
}

.theme-space[data-theme="vision"] .fab.is-open .fab__trigger {
  transform: rotate(135deg) scale(0.94);
  box-shadow:
    0 0 0 3px var(--v5-black),
    0 0 0 6px var(--v5-white),
    6px 7px 0 6px var(--v5-black);
}

.theme-space[data-theme="vision"] .fab__actions button {
  gap: 8px;
  color: var(--v5-white);
  box-shadow: none;
}

.theme-space[data-theme="vision"] .fab__actions i {
  width: 42px;
  height: 42px;
  border: 2px solid var(--v5-white);
  border-radius: 50%;
  color: var(--v5-white);
  background: var(--v5-black);
  box-shadow: 3px 4px 0 var(--v5-red);
}

.theme-space[data-theme="vision"] .fab__actions button:hover i,
.theme-space[data-theme="vision"] .fab__actions button:focus-visible i {
  color: var(--v5-white);
  background: var(--v5-red);
  border-color: var(--v5-white);
}

.theme-space[data-theme="vision"] .fab__label {
  padding: 7px 13px 6px 15px;
  color: var(--v5-black);
  background: var(--v5-white);
  font-family: var(--v5-sans);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.04em;
  clip-path: polygon(6% 0, 100% 8%, 95% 100%, 0 90%);
}

/* ---------- the stage ---------- */

.v5 {
  --v5-speed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600'%3E%3Cpath d='M986 20.5L1022 19.7L1210 20.5L1022 21.3ZM-214 20.5L-161 19.7L10 20.5L-161 21.3ZM84 45.0L98 43.4L168 45.0L98 46.5ZM753 61.2L787 60.1L871 61.2L787 62.3ZM1172 61.2L1218 59.7L1467 61.2L1218 62.6ZM-28 61.2L54 59.7L267 61.2L54 62.6ZM672 75.1L743 73.3L953 75.1L743 76.9ZM657 85.9L708 84.5L976 85.9L708 87.3ZM816 85.9L836 84.8L910 85.9L836 87.0ZM298 100.2L374 98.8L728 100.2L374 101.6ZM360 100.2L444 99.3L734 100.2L444 101.1ZM142 115.0L180 112.5L324 115.0L180 117.6ZM1154 136.9L1225 135.4L1588 136.9L1225 138.4ZM-46 136.9L56 135.4L388 136.9L56 138.4ZM596 159.3L651 158.0L799 159.3L651 160.7ZM797 169.5L867 167.9L1235 169.5L867 171.1ZM-403 169.5L-291 167.9L35 169.5L-291 171.1ZM463 189.5L561 188.3L854 189.5L561 190.7ZM202 189.5L215 187.9L280 189.5L215 191.1ZM469 199.5L503 198.3L590 199.5L503 200.7ZM164 209.9L213 208.6L391 209.9L213 211.1ZM1061 228.2L1129 226.8L1293 228.2L1129 229.6ZM-139 228.2L-99 226.8L93 228.2L-99 229.6ZM280 228.2L311 227.1L419 228.2L311 229.4ZM642 247.2L685 246.3L821 247.2L685 248.2ZM741 261.7L826 260.0L1080 261.7L826 263.3ZM479 271.6L542 270.1L860 271.6L542 273.0ZM81 271.6L138 270.8L398 271.6L138 272.4ZM680 283.3L750 282.4L984 283.3L750 284.2ZM737 308.5L751 306.1L817 308.5L751 310.8ZM437 308.5L465 307.1L605 308.5L465 309.8ZM173 331.9L240 330.6L430 331.9L240 333.2ZM28 353.5L143 352.5L421 353.5L143 354.5ZM910 371.5L976 369.0L1249 371.5L976 373.9ZM-290 371.5L-207 369.0L49 371.5L-207 373.9ZM427 382.0L477 379.6L699 382.0L477 384.4ZM974 400.2L1033 399.1L1172 400.2L1033 401.3ZM982 400.2L1087 398.0L1385 400.2L1087 402.4ZM-218 400.2L-144 398.0L185 400.2L-144 402.4ZM948 418.0L1027 415.4L1303 418.0L1027 420.6ZM-252 418.0L-188 415.4L103 418.0L-188 420.6ZM1186 437.3L1257 434.8L1430 437.3L1257 439.8ZM-14 437.3L36 434.8L230 437.3L36 439.8ZM579 450.1L655 448.7L833 450.1L655 451.4ZM960 469.4L1001 467.5L1217 469.4L1001 471.4ZM-240 469.4L-176 467.5L17 469.4L-176 471.4ZM214 493.9L312 492.3L577 493.9L312 495.5ZM1166 493.9L1208 491.7L1366 493.9L1208 496.1ZM-34 493.9L8 491.7L166 493.9L8 496.1ZM33 519.0L65 516.4L165 519.0L65 521.6ZM734 519.0L794 517.0L985 519.0L794 520.9ZM26 536.1L61 534.3L156 536.1L61 537.8ZM521 557.4L598 554.9L796 557.4L598 559.9ZM601 580.4L623 579.3L682 580.4L623 581.5Z'/%3E%3C/svg%3E");
  --ix: var(--v5-white);
  --ix-hot-bg: var(--v5-black);
  --ix-hot-fg: var(--v5-white);
  --ix-no: var(--v5-red);
  position: relative;
  height: var(--v5-vh, 100vh);
  overflow: hidden;
  container: v5 / size;
  color: var(--v5-white);
  background: var(--v5-black);
  font-family: var(--v5-sans);
  font-weight: 900;
  touch-action: pinch-zoom;
  -webkit-tap-highlight-color: transparent;
}

:where(.v5) button {
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  background: none;
  font: inherit;
  cursor: pointer;
}

:where(.v5) ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(.v5) :is(h2, h3, p, figure) {
  margin: 0;
  font: inherit;
}

:where(.v5) [tabindex="-1"]:focus {
  outline: none;
}

:where(.v5) button:focus-visible {
  outline: 2px dashed currentColor;
  outline-offset: 5px;
}

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

.v5-scene {
  position: absolute;
  inset: 0;
  display: none;
  overflow: hidden;
}

.v5-scene.is-current {
  display: block;
}

.v5-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.v5-deco > i {
  position: absolute;
  display: block;
}

/* ---------- letters cut from paper ---------- */

.v5-cut {
  -webkit-user-select: none;
  user-select: none;
}

.v5-gap {
  display: inline-block;
  width: 0.3em;
}

.v5-l {
  --paper: var(--v5-white);
  --ink: var(--v5-black);
  --edge: transparent;
  position: relative;
  display: inline-block;
  margin: 0 -0.012em;
  line-height: 1;
  vertical-align: middle;
  translate: 0 var(--y, 0);
  rotate: var(--r, 0deg);
  scale: var(--s, 1);
}

.v5-l > span {
  display: block;
  padding: 0.13em 0.12em 0.1em;
  color: var(--ink);
  background: var(--paper);
  clip-path: var(--q, none);
}

.v5-l::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -0.055em;
  background: var(--edge);
  clip-path: var(--q, none);
}

.v5-l.f0 {
  font-family: var(--v5-sans);
  font-weight: 900;
}

.v5-l.f1 {
  font-family: var(--v5-serif);
  font-weight: 900;
}

.v5-l.f2 {
  font-family: var(--v5-mono);
  font-weight: 700;
}

.v5-l.f3 {
  font-family: var(--v5-semi);
  font-weight: 600;
}

.v5-l.sk > span {
  transform: skewX(-10deg);
}

.v5-l.p-w {
  --paper: var(--v5-white);
  --ink: var(--v5-black);
}

.v5-l.p-k {
  --paper: var(--v5-black);
  --ink: var(--v5-white);
}

.v5-l.p-r {
  --paper: var(--v5-red);
  --ink: var(--v5-white);
}

.v5-l.p-wr {
  --paper: var(--v5-white);
  --ink: var(--v5-red);
}

.v5-l.p-rk {
  --paper: var(--v5-red);
  --ink: var(--v5-black);
}

.v5-l.p-o {
  --paper: transparent;
  --ink: var(--v5-white);
}

.v5-l.p-o[data-tone="light"] {
  --ink: var(--v5-black);
}

/* paper the same colour as the ground gets a thin cut edge */
.v5-l.p-k[data-tone="dark"] {
  --edge: var(--v5-white);
}

.v5-l.p-w[data-tone="light"],
.v5-l.p-wr[data-tone="light"] {
  --edge: var(--v5-black);
}

.v5-l.is-hot {
  z-index: 1;
}

/* every letter is thrown in on arrival, one after another */
.v5-scene .v5-l {
  opacity: 0;
}

.v5-scene.is-in .v5-l {
  opacity: 1;
  animation: v5-slam 460ms var(--v5-snap) both;
  animation-delay: calc(var(--v5-d0, 150ms) + var(--k, 0) * 34ms);
}

.v5-scene.is-in :is(.v5-head, .v5-open__lead, .v5-creed, .v5-wedge, .v5-disc__name) .v5-l {
  animation-name: v5-flip;
  animation-duration: 340ms;
}

.v5-scene.is-in .v5-creed .v5-l.is-hot {
  animation-name: v5-slam;
  animation-duration: 520ms;
}

@keyframes v5-slam {
  0% {
    opacity: 0;
    transform: translate(0.3em, -0.45em) scale(2.3) rotate(-18deg);
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes v5-flip {
  0% {
    opacity: 0;
    transform: scaleY(0.1) rotate(12deg);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

.v5-go {
  display: inline-block;
  flex: none;
  width: 0.46em;
  height: 0.56em;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* ---------- scene heads ---------- */

.v5-head {
  position: absolute;
  z-index: 3;
  top: max(6cqh, 22px);
  left: max(4.4cqw, 16px);
  display: flex;
  align-items: center;
  gap: 0.28em;
  font-size: min(5.4cqh, 4.4cqw);
  line-height: 1;
  white-space: nowrap;
}

.v5-head__no {
  padding: 0.34em 0.5em 0.28em;
  color: var(--v5-black);
  background: var(--v5-red);
  font: 700 0.44em/1 var(--v5-mono);
  letter-spacing: 0.04em;
  clip-path: polygon(8% 0, 100% 10%, 93% 100%, 0 88%);
  rotate: -9deg;
  translate: 0 -0.45em;
}

.v5-scene--path .v5-head__no,
.v5-scene--self .v5-head__no,
.v5-scene--creed .v5-head__no,
.v5-scene--hire .v5-head__no {
  color: var(--v5-white);
  background: var(--v5-black);
}

.v5-scene.is-in .v5-head__no {
  animation: v5-tag 380ms var(--v5-snap) 80ms both;
}

@keyframes v5-tag {
  from {
    opacity: 0;
    transform: translateX(-1.4em) rotate(-30deg);
  }
}

/* ---------- shared motion ---------- */

@keyframes v5-wipe {
  from {
    clip-path: inset(0 100% 0 0);
  }

  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes v5-fade {
  from {
    opacity: 0;
  }
}

@keyframes v5-in-left {
  from {
    transform: translateX(-110cqw) skewX(-20deg);
  }
}

@keyframes v5-in-right {
  from {
    opacity: 0;
    transform: translateX(40cqw) skewX(-24deg);
  }
}

@keyframes v5-jitter {
  50% {
    clip-path: polygon(0 50%, 1.1em 10%, 100% 6%, 98% 92%, 1.1em 88%);
  }
}

/* ---------- ink: stars, rings and bolts ---------- */

.v5-ink-w {
  fill: var(--v5-white);
}

.v5-ink-k {
  fill: var(--v5-black);
}

.v5-ink-r {
  fill: var(--v5-red);
}

.v5-ink-g {
  fill: var(--v5-gray);
}

.v5-ring {
  fill: none;
  stroke-linejoin: miter;
  stroke-miterlimit: 6;
}

.v5-ring-w {
  stroke: var(--v5-white);
}

.v5-ring-k {
  stroke: var(--v5-black);
}

.v5-ring-r {
  stroke: var(--v5-red);
}

.v5-line-k,
.v5-line-w {
  stroke-width: 8;
  stroke-linejoin: miter;
  stroke-miterlimit: 6;
  paint-order: stroke;
}

.v5-line-k {
  stroke: var(--v5-black);
}

.v5-line-w {
  stroke: var(--v5-white);
}

.v5-star,
.v5-spark,
.v5-heap {
  aspect-ratio: 1;
}

.v5-star > svg,
.v5-spark > svg,
.v5-heap > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

@keyframes v5-spin {
  to {
    transform: rotate(360deg);
  }
}

.v5-scene.is-in :is(.v5-star, .v5-spark) {
  animation: v5-pop 560ms var(--v5-snap) both;
  animation-delay: var(--pd, 260ms);
}

@keyframes v5-pop {
  from {
    transform: scale(0) rotate(-140deg);
  }
}

/* heaps of stars in the corners, the big ones first, then the trail */
.v5-heap {
  width: min(66cqh, 46cqw);
}

.v5-heap--tr {
  top: -6cqh;
  right: -5cqh;
}

.v5-heap--bl {
  bottom: -6cqh;
  left: -5cqh;
}

.v5-heap__star {
  transform-box: fill-box;
  transform-origin: center;
}

.v5-scene.is-in .v5-heap__star {
  animation: v5-pop 520ms var(--v5-snap) both;
  animation-delay: calc(var(--pd, 220ms) + var(--h) * 55ms);
}

/* once they have landed, some stars keep turning (the rotate property, so
   the turn adds to the landing) */
.v5-scene.is-in .v5-heap__star--spin {
  animation:
    v5-pop 520ms var(--v5-snap) calc(var(--pd, 220ms) + var(--h) * 55ms) both,
    v5-turn var(--spin, 20s) linear calc(var(--pd, 220ms) + var(--h) * 55ms + 520ms) infinite var(--spin-dir, normal);
}

.v5-scene.is-in .v5-spark > svg,
.v5-scene.is-in .v5-dream__star > svg {
  animation: v5-turn 11s linear 900ms infinite;
}

.v5-scene.is-in .v5-spark:nth-of-type(2n) > svg,
.v5-scene.is-in .v5-dream__star:nth-of-type(2n) > svg {
  animation-duration: 15s;
  animation-direction: reverse;
}

@keyframes v5-turn {
  to {
    rotate: 1turn;
  }
}

/* rings like a target, red and black; they drift outward without end */
@property --v5-shift {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

.v5-rings {
  --rw: max(5cqmin, 18px);
  inset: 0;
  background: repeating-radial-gradient(
    circle at var(--rx, 50%) var(--ry, 50%),
    var(--v5-red) var(--v5-shift) calc(var(--v5-shift) + var(--rw) - 1px),
    var(--v5-black) calc(var(--v5-shift) + var(--rw)) calc(var(--v5-shift) + var(--rw) * 2 - 1px),
    var(--v5-red) calc(var(--v5-shift) + var(--rw) * 2)
  );
}

@keyframes v5-drift {
  to {
    --v5-shift: calc(var(--rw) * 2);
  }
}

/* red bolts, struck in from where they start */
.v5-bolts {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.v5-bolt {
  transform-box: fill-box;
  transform-origin: 100% 0;
}

.v5-bolt:nth-child(2) {
  transform-origin: 0 0;
}

.v5-bolt:nth-child(3) {
  transform-origin: 100% 100%;
}

.v5-scene.is-in .v5-bolt {
  animation: v5-strike 480ms cubic-bezier(0.2, 0.8, 0.3, 1) both;
  animation-delay: calc(80ms + var(--b) * 130ms);
}

.v5-scene.is-in .v5-bolt:nth-child(1) {
  animation:
    v5-strike 480ms cubic-bezier(0.2, 0.8, 0.3, 1) 80ms both,
    v5-zap 3.6s steps(1) 1.6s infinite;
}

@keyframes v5-strike {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }

  30% {
    opacity: 1;
    transform: scale(1.04);
  }

  40% {
    opacity: 0.2;
  }

  54%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes v5-zap {
  0%,
  90%,
  100% {
    opacity: 1;
  }

  92% {
    opacity: 0.3;
  }

  95% {
    opacity: 0.85;
  }

  97% {
    opacity: 0.45;
  }
}

/* ---------- 00 · 未来 ---------- */

.v5-scene--open {
  background: var(--v5-black);
}

.v5-open__rings {
  --rx: 38%;
  --ry: 46%;
  transform-origin: var(--rx) var(--ry);
}

/* the rings open out on arrival, then keep spreading outward */
.v5-scene--open.is-in .v5-open__rings {
  animation:
    v5-rings-in 640ms var(--v5-quick) both,
    v5-drift 2.8s linear 120ms infinite;
}

@keyframes v5-rings-in {
  from {
    opacity: 0;
    transform: scale(0.12);
  }
}

.v5-open__heap {
  --pd: 360ms;
}

.v5-open__heap--bl {
  --pd: 480ms;
}

/* the words sit in the middle of the target */
.v5-open__words {
  position: absolute;
  z-index: 2;
  top: 46%;
  left: 38%;
  display: grid;
  justify-items: center;
  gap: 2.8cqh;
  translate: -50% -50%;
  rotate: -6deg;
}

.v5-open__title {
  display: block;
  font-size: min(30cqh, 26cqw);
  line-height: 1;
  white-space: nowrap;
}

.v5-open__title .v5-l {
  margin-right: -0.04em;
  filter: drop-shadow(0.04em 0.05em 0 var(--v5-black));
}

.v5-open__lead {
  position: relative;
  padding: 0.42em 0.9em 0.38em;
  font-size: min(5.2cqh, 4.2cqw);
  line-height: 1;
  white-space: nowrap;
  isolation: isolate;
}

.v5-open__lead::before,
.v5-open__lead::after {
  content: "";
  position: absolute;
  clip-path: polygon(2% 8%, 100% 0, 98% 100%, 0 90%);
  transform-origin: 0 50%;
}

.v5-open__lead::before {
  z-index: -2;
  inset: -0.16em;
  background: var(--v5-white);
}

.v5-open__lead::after {
  z-index: -1;
  inset: 0;
  background: var(--v5-black);
}

.v5-scene--open.is-in .v5-open__lead::before,
.v5-scene--open.is-in .v5-open__lead::after {
  animation: v5-grow 360ms var(--v5-quick) 300ms backwards;
}

/* the way on: an arrow that aims, then shoots off */
.v5-forward {
  position: absolute;
  z-index: 3;
  right: max(7cqw, 32px);
  bottom: max(13cqh, 64px);
  width: min(26cqh, 20cqw);
  aspect-ratio: 136 / 82;
}

.v5-forward__arrow {
  position: absolute;
  inset: 0;
  transition: transform 220ms var(--v5-snap);
}

.v5-forward__arrow > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.v5-scene--open.is-in .v5-forward {
  animation: v5-in-right 460ms var(--v5-snap) 560ms both;
}

.v5-scene--open.is-in .v5-forward__arrow {
  animation: v5-aim 1.9s ease-in-out 1.7s infinite;
}

@keyframes v5-aim {
  0%,
  55%,
  100% {
    transform: none;
  }

  68% {
    transform: translateX(-7%);
  }

  80% {
    transform: translateX(5%);
  }
}

.v5-scene--open.is-in .v5-forward:is(:hover, :focus-visible) .v5-forward__arrow {
  animation: none;
  transform: translateX(-8%) scale(1.06);
}

.v5-forward:focus-visible {
  outline: 2px dashed var(--v5-white);
  outline-offset: 8px;
}

.v5-scene--open.is-in .v5-forward.is-thrown .v5-forward__arrow {
  animation: v5-throw 300ms cubic-bezier(0.55, 0, 0.9, 0.4) forwards;
}

@keyframes v5-throw {
  0% {
    transform: translateX(-8%);
  }

  100% {
    transform: translateX(320%);
  }
}

/* ---------- 01 · 未来路径 ---------- */

.v5-scene--path {
  background: var(--v5-red);
}

.v5-path__shard {
  left: -10cqw;
  right: -10cqw;
  top: calc(66% - 0.5cqh);
  height: max(0.9cqh, 4px);
  background: var(--v5-white);
  transform: rotate(-21deg);
}

.v5-scene--path.is-in .v5-path__shard {
  animation: v5-wipe 420ms cubic-bezier(0.7, 0, 0.2, 1) 80ms both;
}

.v5-rays {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* lightning from the record to each word, cut like the red bolts on the
   dream scene: black with a white edge, struck out from the record one by one */
.v5-ray {
  transform-box: view-box;
  fill: var(--v5-black);
  stroke: var(--v5-white);
  stroke-width: max(0.36cqh, 2px);
  stroke-linejoin: miter;
  stroke-miterlimit: 12;
  paint-order: stroke;
  animation: v5-ray-strike 460ms cubic-bezier(0.2, 0.8, 0.3, 1) both;
  animation-delay: calc(140ms + var(--i, 0) * 120ms);
}

.v5-rays[data-still] .v5-ray {
  animation: none;
}

@keyframes v5-ray-strike {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }

  30% {
    opacity: 1;
    transform: scale(1.03);
  }

  40% {
    opacity: 0.25;
  }

  56%,
  100% {
    opacity: 1;
    transform: none;
  }
}

.v5-disc {
  position: absolute;
  z-index: 2;
  left: max(7cqw, 20px);
  top: 18cqh;
  display: grid;
  justify-items: start;
  gap: 3cqh;
  width: min(44cqh, 30cqw);
  rotate: -7deg;
}

.v5-disc__cover {
  --cut: polygon(3% 7%, 36% 0, 62% 5%, 100% 1%, 95% 38%, 100% 68%, 93% 100%, 56% 94%, 21% 100%, 0 92%, 5% 58%, 0 30%);
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  filter: drop-shadow(0.9cqh 1.1cqh 0 var(--v5-black));
  transition: rotate 260ms var(--v5-snap);
}

.v5-disc__cover::before {
  content: "";
  position: absolute;
  inset: -1.2cqh;
  background: var(--v5-white);
  clip-path: var(--cut);
}

.v5-disc__cover img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: var(--cut);
  pointer-events: none;
}

.v5-disc__cover .v5-go {
  position: absolute;
  z-index: 1;
  right: -7%;
  bottom: 3%;
  width: 28%;
  height: auto;
  aspect-ratio: 1;
  background: var(--v5-black);
  clip-path: polygon(50% 0, 63% 14%, 85% 9%, 84% 33%, 100% 48%, 85% 62%, 91% 86%, 66% 84%, 51% 100%, 37% 85%, 13% 91%, 17% 64%, 0 50%, 15% 37%, 9% 13%, 33% 17%);
  transition: rotate 300ms var(--v5-snap);
}

.v5-disc__cover .v5-go::after {
  content: "";
  position: absolute;
  inset: 33% 28% 33% 38%;
  background: var(--v5-white);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.v5-disc__cover:hover,
.v5-disc__cover:focus-visible {
  rotate: 3deg;
}

.v5-disc__cover:hover .v5-go,
.v5-disc__cover:focus-visible .v5-go {
  rotate: 24deg;
}

.v5-disc__cover:focus-visible {
  outline-color: var(--v5-white);
}

.v5-scene--path.is-playing .v5-disc__cover .v5-go::after {
  inset: 34% 34% 34% 34%;
  clip-path: polygon(0 0, 36% 0, 36% 100%, 64% 100%, 64% 0, 100% 0, 100% 100%, 0 100%);
}

.v5-scene--path.is-playing .v5-disc__cover {
  animation: v5-wobble 0.62s ease-in-out infinite alternate;
}

.v5-scene--path.is-playing .v5-ray {
  animation: v5-ray-flicker 0.26s steps(1) infinite;
}

@keyframes v5-ray-flicker {
  50% {
    stroke: var(--v5-red);
  }
}

.v5-scene--path.is-playing .v5-genre {
  animation: v5-bob 0.62s ease-in-out infinite alternate;
  animation-delay: calc(var(--gi) * -0.12s);
}

@keyframes v5-wobble {
  from {
    transform: rotate(-2.5deg) scale(1.01);
  }

  to {
    transform: rotate(2deg) scale(0.99);
  }
}

@keyframes v5-bob {
  from {
    transform: translateY(-0.06em);
  }

  to {
    transform: translateY(0.06em) rotate(-2deg);
  }
}

.v5-scene--path.is-in .v5-disc__cover {
  animation: v5-stick 420ms var(--v5-snap) 60ms both;
}

.v5-scene--path.is-in.is-playing .v5-disc__cover {
  animation: v5-wobble 0.62s ease-in-out infinite alternate;
}

@keyframes v5-stick {
  from {
    opacity: 0;
    transform: scale(1.6) rotate(-20deg);
  }
}

.v5-disc__name {
  margin-left: 1cqh;
  font-size: min(4.6cqh, 3.3cqw);
  line-height: 1;
  white-space: nowrap;
  rotate: 4deg;
}

.v5-genres {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}

.v5-genre {
  --v5-d0: calc(470ms + var(--gi) * 42ms);
  position: absolute;
  left: var(--gx);
  top: var(--gy);
  font-size: var(--gs);
  line-height: 1;
  white-space: nowrap;
  translate: -50% -50%;
  rotate: var(--gr);
  pointer-events: auto;
}

.v5-genre--0 {
  --gi: 0;
  --gx: 41%;
  --gy: 80%;
  --gs: min(5.2cqh, 3.6cqw);
  --gr: -4deg;
}

.v5-genre--1 {
  --gi: 1;
  --gx: 47%;
  --gy: 44%;
  --gs: min(7cqh, 4.8cqw);
  --gr: 5deg;
}

.v5-genre--2 {
  --gi: 2;
  --gx: 60%;
  --gy: 71%;
  --gs: min(8.2cqh, 5.6cqw);
  --gr: -6deg;
}

.v5-genre--3 {
  --gi: 3;
  --gx: 68%;
  --gy: 29%;
  --gs: min(9.4cqh, 6.4cqw);
  --gr: 4deg;
}

.v5-genre--4 {
  --gi: 4;
  --gx: 84%;
  --gy: 57%;
  --gs: min(11cqh, 7.4cqw);
  --gr: -5deg;
}

/* ---------- 02 · 梦的项目 ---------- */

.v5-scene--dream {
  background: var(--v5-black);
}

.v5-dream__star--0 {
  top: 11cqh;
  left: 34cqw;
  width: 4.6cqh;
  --pd: 560ms;
}

.v5-dream__star--1 {
  top: 24cqh;
  left: 88cqw;
  width: 3.8cqh;
  rotate: 18deg;
  --pd: 620ms;
}

.v5-dream__star--2 {
  top: 63cqh;
  left: 7cqw;
  width: 4.2cqh;
  rotate: -14deg;
  --pd: 680ms;
}

.v5-dream__star--3 {
  top: 44cqh;
  left: 60cqw;
  width: 3.2cqh;
  rotate: 10deg;
  --pd: 740ms;
}

.v5-dream__star--4 {
  top: 84cqh;
  left: 40cqw;
  width: 4cqh;
  rotate: -20deg;
  --pd: 800ms;
}

/* the two dreams, cut out big between the bolts */
.v5-wishes {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}

.v5-wish {
  position: absolute;
  font-size: min(9.4cqh, 6.4cqw);
  line-height: 1;
  white-space: nowrap;
  pointer-events: auto;
}

.v5-wish--0 {
  top: 23cqh;
  left: max(6cqw, 18px);
  rotate: -7deg;
}

.v5-wish--1 {
  top: 61cqh;
  right: max(5cqw, 18px);
  rotate: -4deg;
}

.v5-wish--1 .v5-l {
  --v5-d0: 380ms;
}

/* ---------- 03 · 长期理念 ---------- */

.v5-scene--creed {
  color: var(--v5-black);
  background: var(--v5-white);
}

.v5-speed {
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(100% + 1200px);
  background: var(--v5-speed) 0 0 / 1200px 600px repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 0 20%, rgba(0, 0, 0, 0.16) 36% 70%, #000 86%);
  mask-image: linear-gradient(180deg, #000 0 20%, rgba(0, 0, 0, 0.16) 36% 70%, #000 86%);
  will-change: transform;
}

.v5-scene--creed.is-in .v5-speed {
  animation: v5-speed 0.7s linear infinite;
}

@keyframes v5-speed {
  to {
    transform: translateX(-1200px);
  }
}

.v5-creed__slash {
  left: -6cqw;
  right: -6cqw;
  top: 44cqh;
  height: 26cqh;
  background: var(--v5-red);
  clip-path: polygon(0 62%, 100% 0, 100% 34%, 0 100%);
}

.v5-scene--creed.is-in .v5-creed__slash {
  transform-origin: 0 50%;
  animation: v5-grow 460ms cubic-bezier(0.7, 0, 0.2, 1) 200ms both;
}

@keyframes v5-grow {
  from {
    transform: scaleX(0);
  }
}

.v5-creed {
  position: absolute;
  z-index: 2;
  left: max(7cqw, 18px);
  right: max(5cqw, 16px);
  top: 54%;
  display: grid;
  justify-items: start;
  gap: 4.4cqh;
  translate: 0 -50%;
}

.v5-creed__line {
  display: block;
  line-height: 1;
  white-space: nowrap;
}

.v5-creed__line--0 {
  font-size: min(6cqh, 4cqw);
  rotate: -2.5deg;
}

.v5-creed__line--1 {
  margin-left: 6cqw;
  font-size: min(10cqh, 5.6cqw);
  rotate: -4deg;
}

/* ---------- 04 · 未来的自己 ---------- */

.v5-scene--self {
  background: var(--v5-red);
}

.v5-burst {
  inset: -30%;
  background:
    repeating-conic-gradient(from 2deg at 50% 52%, var(--v5-black) 0 0.9deg, transparent 0.9deg 5.3deg),
    repeating-conic-gradient(from 0deg at 50% 52%, var(--v5-black) 0 0.32deg, transparent 0.32deg 3.1deg);
  -webkit-mask-image: radial-gradient(ellipse 33% 25% at 50% 52%, transparent 62%, #000 118%);
  mask-image: radial-gradient(ellipse 33% 25% at 50% 52%, transparent 62%, #000 118%);
}

.v5-self__shard {
  top: 0;
  right: 3cqw;
  width: 64cqw;
  height: 100%;
  background: var(--v5-white);
  clip-path: polygon(98% 0, 100% 0, 1% 100%, 0 100%);
}

.v5-scene--self.is-in .v5-burst {
  animation:
    v5-zoom 520ms var(--v5-quick) 200ms both,
    v5-twitch 0.5s steps(1) 900ms infinite;
}

.v5-scene--self.is-in .v5-self__shard {
  animation: v5-shard-down 260ms cubic-bezier(0.7, 0, 0.2, 1) 420ms both;
}

@keyframes v5-zoom {
  from {
    opacity: 0;
    transform: scale(1.7) rotate(-10deg);
  }
}

@keyframes v5-twitch {
  50% {
    transform: rotate(0.8deg) scale(1.01);
  }
}

@keyframes v5-shard-down {
  from {
    clip-path: polygon(98% 0, 100% 0, 100% 0, 98% 0);
  }
}

.v5-self {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 53%;
  display: grid;
  justify-items: start;
  gap: 1cqh;
  translate: -50% -50%;
}

.v5-self__line {
  display: block;
  line-height: 1;
  white-space: nowrap;
}

.v5-self__line--0 {
  margin-left: -1cqw;
  font-size: min(7.4cqh, 5cqw);
  rotate: -6deg;
}

.v5-self__line--1 {
  font-size: min(17cqh, 11.2cqw);
  rotate: -3deg;
}

.v5-self__line--1 .v5-l {
  --v5-d0: 260ms;
  filter: drop-shadow(0.035em 0.045em 0 var(--v5-black));
}

.v5-scene.is-in .v5-self__line--1 .v5-l {
  animation-name: v5-slam-hard;
  animation-duration: 420ms;
}

@keyframes v5-slam-hard {
  0% {
    opacity: 0;
    transform: translate(0.2em, -0.3em) scale(3.4) rotate(-24deg);
  }

  24% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 05 · 可以找我做什么 ---------- */

.v5-scene--hire {
  background: var(--v5-red);
}

/* arcs rising from the far corner */
.v5-hire__rings {
  --rx: 106%;
  --ry: 122%;
  --rw: max(4cqmin, 16px);
  clip-path: circle(calc(var(--rw) * 16) at var(--rx) var(--ry));
}

.v5-scene--hire.is-in .v5-hire__rings {
  animation:
    v5-fade 520ms ease 160ms both,
    v5-drift 2.8s linear 160ms infinite;
}

.v5-hire__heap {
  --pd: 300ms;
}

/* on a tall screen the corner sits higher, so the spreading arcs stay in view */
@container v5 (max-aspect-ratio: 1/1) {
  .v5-hire__rings {
    --ry: 104%;
  }
}

.v5-hire__spark--0 {
  top: 15cqh;
  left: 47cqw;
  width: 6cqh;
  rotate: 12deg;
  --pd: 640ms;
}

.v5-hire__spark--1 {
  right: 24cqw;
  bottom: 12cqh;
  width: 4.6cqh;
  rotate: -16deg;
  --pd: 720ms;
}

/* a fan of blades from a star; a small star marks the one in hand */
.v5-fan {
  position: absolute;
  z-index: 2;
  top: 57cqh;
  left: max(8cqw, 44px);
  width: 0;
  height: 0;
}

.v5-fan__hub {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  width: 21cqh;
  aspect-ratio: 1;
  translate: -50% -50%;
  pointer-events: none;
}

.v5-fan__hub > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: v5-spin 40s linear infinite;
}

/* EIL's own mark sits at the root of the fan: what you can come to me for
   all starts from here. It holds still while the star turns behind it. */
.v5-fan__me {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64%;
  height: auto;
  border-radius: 50%;
  translate: -50% -50%;
  box-shadow:
    0 0 0 0.24cqh var(--v5-black),
    0 0 0 0.62cqh var(--v5-white),
    0.5cqh 0.7cqh 0 0.62cqh var(--v5-black);
  user-select: none;
}

.v5-scene--hire.is-in .v5-fan__hub {
  animation: v5-pop 560ms var(--v5-snap) 60ms both;
}

.v5-wedge {
  --slab: var(--v5-black);
  --shade: var(--v5-white);
  --rib: var(--v5-black);
  position: absolute;
  top: 0;
  left: 0;
  font-size: min(5.2cqh, 3.7cqw);
  line-height: 1;
  white-space: nowrap;
  transform-origin: 0 0;
  transform: rotate(var(--fa)) translate(var(--fd), -50%);
  isolation: isolate;
  transition: transform 260ms var(--v5-snap);
}

.v5-wedge--0 {
  --fa: -25deg;
  --fd: 13cqw;
}

.v5-wedge--1 {
  --fa: -6deg;
  --fd: 16cqw;
}

.v5-wedge--main {
  z-index: 3;
  --fa: 15deg;
  --fd: 13cqw;
  --slab: var(--v5-white);
  --shade: var(--v5-black);
  font-size: min(9.6cqh, 6.8cqw);
}

/* the rib from the hub, the shade, the slab */
.v5-wedge::after {
  content: "";
  position: absolute;
  z-index: -3;
  top: 34%;
  bottom: 34%;
  left: calc(-1 * var(--fd));
  width: calc(var(--fd) + 0.5em);
  background: var(--rib);
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  pointer-events: none;
}

.v5-wedge::before,
.v5-wedge__words::before {
  content: "";
  position: absolute;
  inset: -0.22em -0.8em -0.2em -1.25em;
  clip-path: polygon(0 50%, 1.1em 4%, 100% 0, 97% 100%, 1.1em 96%);
  pointer-events: none;
}

.v5-wedge::before {
  z-index: -1;
  background: var(--slab);
}

.v5-wedge__words {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.24em;
}

.v5-wedge__words::before {
  z-index: -2;
  background: var(--shade);
  translate: 0.14em 0.17em;
  transition: translate 220ms var(--v5-snap);
}

.v5-wedge .v5-go {
  margin-left: 0.12em;
  color: var(--v5-red);
  transition: transform 240ms var(--v5-snap);
}

.v5-wedge:is(:hover, :focus-visible) {
  z-index: 4;
  transform: rotate(var(--fa)) translate(calc(var(--fd) + 1.4cqw), -50%);
  outline: none;
}

.v5-wedge:is(:hover, :focus-visible)::before {
  animation: v5-jitter 0.42s steps(1) infinite;
}

.v5-wedge:is(:hover, :focus-visible) .v5-wedge__words::before {
  translate: 0.24em 0.28em;
}

.v5-wedge:is(:hover, :focus-visible) .v5-go {
  transform: translateX(0.25em) scale(1.25);
}

.v5-scene--hire.is-in .v5-wedge {
  animation: v5-blade-in 460ms var(--v5-quick) backwards;
  animation-delay: calc(160ms + var(--i) * 110ms);
}

@keyframes v5-blade-in {
  from {
    opacity: 0;
    transform: rotate(calc(var(--fa) - 60deg)) translate(var(--fd), -50%);
  }
}

.v5-wedge__mark {
  position: absolute;
  top: 50%;
  left: calc(100% + 0.95em);
  width: max(1.1em, 7cqh);
  aspect-ratio: 1;
  translate: -50% -50%;
  opacity: 0;
  transform: scale(0) rotate(-120deg);
  transition:
    opacity 120ms ease,
    transform 280ms var(--v5-snap);
  pointer-events: none;
}

.v5-wedge__mark > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.v5-wedge:is(:hover, :focus-visible) .v5-wedge__mark,
.v5-fan:not(:has(.v5-wedge:hover, .v5-wedge:focus-visible)) .v5-wedge--main .v5-wedge__mark {
  opacity: 1;
  transform: none;
}

/* ---------- stars in the other scenes ---------- */

/* the record's rings end hard, on a black one */
.v5-path__rings {
  --rw: max(3cqmin, 12px);
  clip-path: circle(calc(var(--rw) * 12) at var(--rx, 20%) var(--ry, 40%));
}

.v5-scene--path.is-in .v5-path__rings {
  animation:
    v5-fade 500ms ease 120ms both,
    v5-drift 3.6s linear 120ms infinite;
}

/* while the song plays, its rings spread faster */
.v5-scene--path.is-in.is-playing .v5-path__rings {
  animation: v5-drift 1.4s linear infinite;
}

.v5-path__spark--0 {
  top: 9cqh;
  right: 5cqw;
  width: 7cqh;
  rotate: 12deg;
  --pd: 720ms;
}

.v5-path__spark--1 {
  top: 15cqh;
  left: 31cqw;
  width: 4.6cqh;
  rotate: -20deg;
  --pd: 820ms;
}

.v5-creed__star {
  right: -10cqh;
  bottom: -15cqh;
  width: 50cqh;
  rotate: 18deg;
  --pd: 420ms;
}

.v5-creed__spark {
  top: 13cqh;
  right: 16cqw;
  width: 6cqh;
  rotate: -12deg;
  --pd: 640ms;
}

.v5-self__heap {
  --pd: 520ms;
}

.v5-self__heap--bl {
  --pd: 620ms;
}

/* ---------- moving between scenes ---------- */

.v5-index {
  position: absolute;
  z-index: 20;
  bottom: max(2.4cqh, 10px);
  left: 50%;
  display: flex;
  align-items: center;
  gap: 2px;
  translate: -50% 0;
}

.v5-index__tab {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  padding: 0.52em 0.62em 0.44em;
  color: var(--ix);
  font-size: clamp(11px, 1.6cqh, 15px);
  line-height: 1;
  white-space: nowrap;
  isolation: isolate;
  transition: color 160ms ease;
}

.v5-index__tab b {
  font: 700 1em/1 var(--v5-mono);
  letter-spacing: 0.04em;
  transition: transform 220ms var(--v5-snap);
}

.v5-index__tab span {
  display: none;
  font: 900 1.08em/1 var(--v5-sans);
}

.v5-index__tab::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--ix-hot-bg);
  clip-path: polygon(5% 10%, 100% 0, 96% 92%, 0 100%);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 220ms var(--v5-snap);
}

.v5-index__tab[aria-current="true"] {
  padding-inline: 0.9em 1em;
  color: var(--ix-hot-fg);
  rotate: -3deg;
}

.v5-index__tab[aria-current="true"] b {
  color: var(--ix-no);
}

.v5-index__tab[aria-current="true"] span {
  display: inline;
}

.v5-index__tab[aria-current="true"]::before {
  transform: none;
}

.v5-index__tab:not([aria-current="true"]):is(:hover, :focus-visible) b {
  color: var(--v5-black);
  transform: translateY(-0.2em) scale(1.25);
}

.v5[data-scene="creed"] {
  --ix: var(--v5-black);
}

.v5[data-scene="creed"] .v5-index__tab:not([aria-current="true"]):is(:hover, :focus-visible) b {
  color: var(--v5-red);
}

/* the slash that cuts one scene into the next */
.v5-slash {
  position: absolute;
  z-index: 40;
  inset: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

.v5-slash.is-on {
  visibility: visible;
}

.v5-slash > i {
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: -45%;
  width: 190%;
  transform: translateX(-200%) skewX(-18deg);
}

.v5-slash__k {
  box-sizing: border-box;
  border-inline: 12px solid var(--v5-white);
  background: var(--v5-black);
}

.v5-slash__r {
  background: var(--v5-red);
}

/* ---------- tall frames ---------- */

@container v5 (max-aspect-ratio: 1/1) {
  .v5-head {
    font-size: min(4.4cqh, 6.6cqw);
  }

  .v5-open__rings {
    --rx: 50%;
    --ry: 44%;
  }

  .v5-open__words {
    top: 44%;
    left: 50%;
  }

  .v5-open__title {
    font-size: min(24cqh, 34cqw);
  }

  .v5-open__lead {
    font-size: min(4.4cqh, 6cqw);
  }

  .v5-forward {
    width: min(18cqh, 34cqw);
  }

  .v5-heap {
    width: min(46cqh, 70cqw);
  }

  .v5-disc {
    top: 16cqh;
    width: min(30cqh, 44cqw);
  }

  /* tall frames: the words step down the right of the record and then
     zigzag below it, clear of the record and of the white slash */
  .v5-genre--0 {
    --gx: 66%;
    --gy: 45%;
    --gs: min(4.2cqh, 6cqw);
  }

  .v5-genre--1 {
    --gx: 27%;
    --gy: 54%;
    --gs: min(5cqh, 7.4cqw);
  }

  .v5-genre--2 {
    --gx: 77%;
    --gy: 54%;
    --gs: min(5.6cqh, 8.4cqw);
  }

  .v5-genre--3 {
    --gx: 36%;
    --gy: 79%;
    --gs: min(6.2cqh, 9.4cqw);
  }

  .v5-genre--4 {
    --gx: 70%;
    --gy: 87%;
    --gs: min(6.8cqh, 10.4cqw);
  }

  .v5-wish {
    font-size: min(6.6cqh, 9cqw);
  }

  .v5-wish--0 {
    top: 25cqh;
  }

  .v5-wish--1 {
    top: 60cqh;
  }

  .v5-creed__line {
    white-space: normal;
  }

  .v5-creed__line--0 {
    font-size: min(4.6cqh, 7cqw);
  }

  .v5-creed__line--1 {
    margin-left: 0;
    font-size: min(6.6cqh, 10cqw);
  }

  .v5-creed__star {
    width: 32cqh;
  }

  .v5-fan {
    top: 50cqh;
    left: 9cqw;
  }

  .v5-fan__hub {
    width: 14cqh;
  }

  .v5-wedge {
    font-size: min(3.4cqh, 5cqw);
  }

  .v5-wedge--0 {
    --fa: -40deg;
    --fd: 17cqw;
  }

  .v5-wedge--1 {
    --fa: -9deg;
    --fd: 19cqw;
  }

  .v5-wedge--main {
    --fa: 25deg;
    --fd: 16cqw;
    font-size: min(6.2cqh, 9cqw);
  }
}

/* ---------- short frames: phones held sideways ---------- */

@container v5 (max-height: 520px) and (min-aspect-ratio: 3/2) {
  .v5-forward {
    right: 13cqw;
    bottom: max(15cqh, 54px);
  }

  .v5-fan {
    top: 60cqh;
  }
}

/* ---------- still ---------- */

@media (prefers-reduced-motion: reduce) {
  .v5-scene .v5-l,
  .v5-scene.is-in .v5-l {
    opacity: 1;
    animation: none;
  }

  .v5-scene.is-in *,
  .v5-scene.is-in *::before,
  .v5-scene.is-in *::after,
  .v5-fan__hub > svg {
    animation: none !important;
  }

  .v5-ray {
    animation: none;
  }

  .v5-wedge,
  .v5-wedge__mark,
  .v5-wedge__words::before,
  .v5-forward__arrow,
  .v5-disc__cover,
  .v5-index__tab::before {
    transition: none;
  }
}