/* CHAPTER 04 · INSPIRATION — one screen, one row of strips on a field of
   shapes. Black, white marks; colour only where a work develops. */

@font-face {
  font-family: "INS Hei";
  src: url("./assets/inspiration/ins-hei.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

.theme-space[data-theme="inspiration"] {
  --ins-black: #040404;
  --ins-white: #f2f2ee;
  --ins-grey: #8d8d89;
  --ins-hair: rgba(242, 242, 238, 0.18);
  --ins-mono: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;
  --ins-hei: "INS Hei", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --ins-sans: "Helvetica Neue", Helvetica, Arial, "INS Hei", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --ins-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ins-fold: cubic-bezier(0.22, 1, 0.36, 1);
  background: var(--ins-black);
}

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

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

/* ---------- floating menu: a disc of dots ---------- */

.theme-space[data-theme="inspiration"] .fab__trigger {
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--ins-white) 0 11px, transparent 11.5px),
    radial-gradient(circle, var(--ins-white) 1.1px, transparent 1.6px) 0 0 / 6px 6px,
    var(--ins-black);
  box-shadow: 0 0 0 1px rgba(242, 242, 238, 0.55);
  transition: transform 420ms var(--ins-ease);
}

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

.theme-space[data-theme="inspiration"] .fab__trigger span {
  width: 12px;
  height: 2px;
  background: var(--ins-black);
}

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

.theme-space[data-theme="inspiration"] .fab.is-open .fab__trigger {
  transform: rotate(135deg) scale(0.94);
}

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

.theme-space[data-theme="inspiration"] .fab__actions i {
  width: 42px;
  height: 42px;
  border: 1px solid var(--ins-white);
  border-radius: 50%;
  color: var(--ins-white);
  background: var(--ins-black);
  box-shadow: none;
}

.theme-space[data-theme="inspiration"] .fab__actions button:hover i,
.theme-space[data-theme="inspiration"] .fab__actions button:focus-visible i {
  color: var(--ins-black);
  background: var(--ins-white);
}

/* the labels are black plates whose dot screen thickens toward the disc,
   the way the halftones on this page fade; they turn white under the finger */
.theme-space[data-theme="inspiration"] .fab__label {
  padding: 8px 36px 7px 12px;
  border-radius: 0;
  color: var(--ins-white);
  background:
    linear-gradient(90deg, var(--ins-black) 0 calc(100% - 44px), rgba(4, 4, 4, 0) 100%),
    radial-gradient(circle, rgba(242, 242, 238, 0.42) 0.9px, transparent 1.35px) 0 0 / 4px 4px,
    var(--ins-black);
  box-shadow: 0 0 0 1px rgba(242, 242, 238, 0.55);
  font-family: var(--ins-hei);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  transition:
    opacity 180ms ease,
    transform 260ms var(--ins-ease),
    color 160ms ease,
    background 160ms ease;
}

.theme-space[data-theme="inspiration"] .fab__actions button:hover .fab__label,
.theme-space[data-theme="inspiration"] .fab__actions button:focus-visible .fab__label,
.theme-space[data-theme="inspiration"] .fab__actions button:active .fab__label {
  color: var(--ins-black);
  background: var(--ins-white);
}

.theme-space[data-theme="inspiration"] .fab :focus-visible {
  outline: 1.5px solid var(--ins-white);
  outline-offset: 4px;
}

/* ---------- root ---------- */

.ins {
  --ins-pad: clamp(14px, 2.4vw, 36px);
  --ins-gap: 8px;
  --ins-inset: clamp(14px, 2.6vh, 28px);
  position: relative;
  height: var(--ins-vh, 100vh);
  overflow: hidden;
  color: var(--ins-white);
  background: var(--ins-black);
  font-family: var(--ins-sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.ins *,
.ins *::before,
.ins *::after {
  box-sizing: border-box;
}

:where(.ins) :is(h2, h3, h4, p, ol, ul, li, figure, figcaption) {
  margin: 0;
}

:where(.ins) :is(ol, ul) {
  padding: 0;
  list-style: none;
}

:where(.ins) button {
  padding: 0;
  border: 0;
  color: inherit;
  background: none;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}

.ins a {
  color: inherit;
}

.ins :focus-visible {
  outline: 1.5px solid var(--ins-white);
  outline-offset: 4px;
}

/* headings take the focus only so that a screen reader starts there */
.ins :is(.ins-phead__title, .ins-intro__title, .ins-sr):focus-visible {
  outline: none;
}

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

.ins-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.ins-field canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.ins-kicker {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font: 700 11px/1 var(--ins-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.ins-kicker span {
  color: var(--ins-grey);
}

/* ============================== the row ============================== */

.ins-row {
  position: absolute;
  inset: var(--ins-inset) var(--ins-pad);
  z-index: 1;
  display: flex;
  gap: var(--ins-gap);
  perspective: 1600px;
  perspective-origin: 50% 50%;
}

.ins-strip {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border-radius: 3px;
  transform: rotateY(0deg);
  transition:
    flex-grow 700ms var(--ins-fold),
    transform 700ms var(--ins-fold),
    opacity 500ms ease;
}

/* the closed strips turn a little toward the open one */
.ins-strip.is-left {
  transform: rotateY(5deg);
}

.ins-strip.is-right {
  transform: rotateY(-5deg);
}

.ins-strip.is-active {
  flex-grow: var(--grow, 6);
  transform: none;
}

.ins-strip.is-hover:not(.is-active) {
  flex-grow: 1.4;
  transform: none;
}

/* The first screen: the closed strips are only their numbers, top right, and
   the field runs on under them. One comes up as a strip when the pointer or
   the keyboard reaches it; opening any of them brings the whole row back. */
.ins-row.is-home .ins-strip:not(.is-active) {
  flex-grow: var(--home-grow, 0.58);
  transform: none;
}

.ins-row.is-home .ins-strip:not(.is-active) .ins-spine {
  background-color: transparent;
  box-shadow: none;
}

.ins-row.is-home .ins-strip:not(.is-active) :is(.ins-spine__art, .ins-spine__title),
.ins-row.is-home .ins-strip:not(.is-active) .ins-spine::before {
  opacity: 0;
}

.ins-row.is-home .ins-strip.is-hover:not(.is-active),
.ins-row.is-home .ins-strip:not(.is-active):has(.ins-spine:focus-visible) {
  flex-grow: calc(var(--home-grow, 0.58) * 1.3);
}

.ins-row.is-home .ins-strip:not(.is-active):is(.is-hover, :has(.ins-spine:focus-visible)) .ins-spine {
  background-color: #070707;
  box-shadow: inset 0 0 0 1px rgba(242, 242, 238, 0.4);
}

.ins-row.is-home .ins-strip:not(.is-active):is(.is-hover, :has(.ins-spine:focus-visible)) .ins-spine__art {
  opacity: 0.8;
}

.ins-row.is-home .ins-strip:not(.is-active):is(.is-hover, :has(.ins-spine:focus-visible)) .ins-spine__title {
  opacity: 1;
}

.ins-row.is-home .ins-strip:not(.is-active):is(.is-hover, :has(.ins-spine:focus-visible)) .ins-spine::before {
  opacity: 1;
}

/* no pointer to bring a strip up: the names stay under the numbers */
@media (hover: none) {
  .ins-row.is-home .ins-strip:not(.is-active) .ins-spine__title {
    opacity: 0.6;
  }
}

/* ---------- a closed strip: a spine ---------- */

.ins-spine {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  justify-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 0 18px;
  overflow: hidden;
  border-radius: inherit;
  background: #070707;
  box-shadow: inset 0 0 0 1px rgba(242, 242, 238, 0.1);
  transition: opacity 320ms ease, box-shadow 320ms ease, background-color 320ms ease;
}

/* one width whatever the spine does, centred: the slice is never stretched */
.ins-spine__art {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 50%;
  width: var(--spine-art-w, 100%);
  height: 100%;
  translate: -50% 0;
  opacity: 0.42;
  transition: opacity 420ms ease;
}

.ins-strip.is-hover .ins-spine__art,
.ins-spine:focus-visible .ins-spine__art {
  opacity: 0.8;
}

.ins-strip.is-hover .ins-spine {
  box-shadow: inset 0 0 0 1px rgba(242, 242, 238, 0.4);
}

/* the words sit in the dark ends of the spine, not on tags */
.ins-spine::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, #070707 0, #070707 var(--spine-head, 150px), rgba(7, 7, 7, 0) calc(var(--spine-head, 150px) + 90px));
  z-index: 1;
  pointer-events: none;
  transition: opacity 320ms ease;
}

.ins-spine__no,
.ins-spine__title {
  position: relative;
  z-index: 2;
  padding: 6px 5px;
}

/* strip numbers: a dot matrix, lit squares on a faint grid */
.ins-dots {
  display: block;
  width: auto;
  height: clamp(30px, 2.5vw, 38px);
}

.ins-dots__on {
  fill: var(--ins-white);
}

.ins-dots__off {
  fill: var(--ins-white);
  opacity: 0.14;
  transition: opacity 320ms ease;
}

.ins-strip.is-hover .ins-dots__off,
.ins-spine:focus-visible .ins-dots__off {
  opacity: 0.32;
}

.ins-spine__title {
  writing-mode: vertical-rl;
  font: 700 clamp(17px, 1.5vw, 21px)/1 var(--ins-hei);
  letter-spacing: 0.22em;
  padding: 10px 6px;
  transition: opacity 320ms ease;
}

.ins-strip.is-active .ins-spine {
  opacity: 0;
  pointer-events: none;
}

/* ---------- an open strip: its panel keeps the open width ---------- */

.ins-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--panel-w, 100%);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 260ms ease,
    visibility 0s linear 260ms;
}

.ins-strip.is-active .ins-panel {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 460ms ease 240ms,
    visibility 0s linear 0s;
}

.ins-strip.is-active {
  box-shadow: inset 0 0 0 1px rgba(242, 242, 238, 0.12);
}

.ins-strip--intro.is-active {
  box-shadow: none;
}

/* panel heading: its number and its name */
.ins-phead {
  display: grid;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ins-hair);
}

.ins-phead__title {
  font: 700 clamp(34px, 3.8vw, 60px)/1 var(--ins-hei);
  letter-spacing: 0.03em;
  outline: none;
}

/* ============================== 00 灵感 ============================== */

.ins-intro {
  position: absolute;
  inset: 0;
}

.ins-intro__mark {
  position: absolute;
  top: 18px;
  left: 22px;
  display: flex;
  gap: 18px;
  font: 700 11px/1 var(--ins-mono);
  letter-spacing: 0.2em;
}

.ins-intro__mark span + span {
  color: var(--ins-grey);
}

.ins-intro__copy {
  position: absolute;
  left: 22px;
  bottom: clamp(20px, 5vh, 56px);
}

.ins-intro__title {
  margin: 10px 0 4px;
  color: transparent;
  font: 700 clamp(110px, 11.5vw, 220px)/1 var(--ins-hei);
  letter-spacing: 0.02em;
  white-space: nowrap;
  outline: none;
}

.ins-intro__lead {
  color: var(--ins-grey);
  font-size: 15px;
  font-weight: 600;
}

.ins-intro__vortex {
  position: absolute;
  top: 42%;
  left: 63%;
  width: min(60%, calc(var(--ins-vh, 100vh) * 0.62));
  aspect-ratio: 1;
  translate: -50% -50%;
  pointer-events: none;
}

/* the first moment: the field and the title alone, then the strips are dealt */
.ins.is-opening .ins-strip:not(.ins-strip--intro) {
  flex-grow: 0.0001;
  opacity: 0;
}

.ins.is-opening .ins-strip--intro {
  flex-grow: 400;
}

.ins:not(.is-lit) :is(.ins-intro__mark, .ins-intro__copy .ins-kicker, .ins-intro__lead) {
  opacity: 0;
}

.ins :is(.ins-intro__mark, .ins-intro__copy .ins-kicker, .ins-intro__lead) {
  transition: opacity 700ms ease;
}

.ins.is-dealing .ins-strip {
  transition-delay: calc((var(--i) - 1) * 80ms);
}

.ins.is-dealing .ins-strip--intro {
  transition-delay: 0ms;
}

/* ============================== works ============================== */

.ins-media {
  position: relative;
  display: block;
  overflow: hidden;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  cursor: zoom-in;
}

.ins-media__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
  clip-path: circle(0% at var(--dx, 50%) var(--dy, 50%));
  transition: clip-path 900ms var(--ins-ease);
}

.ins-media.is-dev .ins-media__img {
  clip-path: circle(150% at var(--dx, 50%) var(--dy, 50%));
}

.ins-media.is-dev {
  cursor: zoom-out;
}

.ins-media--plate {
  width: 100%;
  height: 100%;
}

/* a work's name: nothing more is written about it */
.ins-name {
  color: var(--ins-white);
  font: 700 clamp(15px, 1.25vw, 19px)/1.2 var(--ins-hei);
  letter-spacing: 0.04em;
  text-align: center;
  transition: color 300ms ease;
}

/* ============================== 01 动漫 ============================== */

.ins-anime {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1.3fr) minmax(0, 0.8fr);
  gap: 18px;
  padding: 22px 24px 18px;
}

/* the three, side by side, each poster as tall as its row allows */
.ins-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 30px);
  min-height: 0;
  container-type: size;
}

.ins-trio__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  min-height: 0;
}

.ins-trio .ins-media--plate {
  flex: none;
  width: min(100%, (100cqh - 36px) * var(--r, 0.7));
  height: auto;
  aspect-ratio: var(--r, 0.7);
}

/* pointing at one of the three lets the other two fall back */
.ins-trio:has(.ins-media:hover) .ins-trio__item:not(:has(.ins-media:hover)) .ins-name {
  color: var(--ins-grey);
}

/* the ring the works with only a name ride on, in dots (see layoutScatter) */
.ins-orbit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.ins-orbit path {
  fill: none;
  stroke: var(--ins-white);
  stroke-opacity: 0.5;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 0.01 10;
}

.ins-strip.is-active .ins-orbit path {
  animation: ins-orbit 2.8s linear infinite;
}

@keyframes ins-orbit {
  to {
    stroke-dashoffset: -10.01;
  }
}

/* the seven with only a name, on the near side of a ring round the three */
.ins-scatter {
  position: relative;
  min-height: 0;
}

.ins-shard {
  position: absolute;
  left: var(--sx, 0px);
  top: var(--sy, 0px);
  width: var(--sw, 120px);
}

.ins-media--shard {
  width: 100%;
  aspect-ratio: 0.69;
}

/* the same oval the marks fill out to when the pointer comes near */
.ins-media--shard .ins-media__img {
  -webkit-mask-image: radial-gradient(50% 50% at 50% 50%, #000 82%, transparent 102%);
  mask-image: radial-gradient(50% 50% at 50% 50%, #000 82%, transparent 102%);
}

.ins-shard__name {
  margin-top: 6px;
  color: var(--ins-white);
  font: 700 14px/1.2 var(--ins-hei);
  letter-spacing: 0.04em;
  text-align: center;
  opacity: 0;
  translate: 0 -4px;
  transition: opacity 260ms ease, translate 360ms var(--ins-ease);
}

.ins-shard.is-near .ins-shard__name {
  opacity: 1;
  translate: 0 0;
}

/* ============================== 02 游戏 ============================== */

.ins-game {
  --plate-w: min(56cqw, 84cqh * var(--r, 0.7));
  position: absolute;
  inset: 0;
  container-type: size;
}

/* the wall fills the strip and fades out toward the words on the left */
.ins-glass {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 31%, #000 52%);
  mask-image: linear-gradient(90deg, transparent 0, transparent 31%, #000 52%);
}

.ins-glass.is-flat {
  display: none;
}

.ins-game .ins-phead {
  position: absolute;
  z-index: 2;
  top: 22px;
  left: 24px;
  width: calc(100% - var(--plate-w) - 24px - 24px - clamp(24px, 3cqw, 40px));
}

.ins-game__work {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ins-game__work > :not(.ins-glass) {
  pointer-events: auto;
}

.ins-game .ins-glass {
  pointer-events: none;
}

.ins-game__plate {
  position: absolute;
  top: calc(50% - var(--plate-w) / var(--r, 0.7) / 2);
  right: clamp(24px, 4cqw, 48px);
  width: var(--plate-w);
  aspect-ratio: var(--r, 0.7);
}

.ins-game__name {
  position: absolute;
  top: calc(50% + var(--plate-w) / var(--r, 0.7) / 2 + 12px);
  right: clamp(24px, 4cqw, 48px);
  width: var(--plate-w);
  text-align: left;
}

/* the one with only a name rides a ring round the poster: it is placed in
   the whole panel, which must not take the pointer from the poster */
.ins-scatter--solo {
  --ride: 1;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ins-scatter--solo .ins-shard {
  pointer-events: auto;
}

/* ============================== 03 音乐 ============================== */

.ins-music {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  justify-items: center;
  padding: 22px 24px 20px;
}

.ins-music .ins-phead {
  justify-self: stretch;
}

/* around the record: rings of dots (the record shows through a clear circle) */
.ins-music__sea {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.ins-record {
  position: relative;
  display: grid;
  place-items: center;
  align-self: center;
  width: min(78%, calc(var(--ins-vh, 100vh) * 0.6), 600px);
  aspect-ratio: 1;
  border-radius: 50%;
  container-type: inline-size;
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.ins-record.is-scratching {
  cursor: grabbing;
}

/* the label: the playlist's name runs round it and turns with the record; a
   ring of dots lights up when it is pointed at, like every other way out of
   this chapter, and one of the field's triangles sits on the spindle */
.ins a.ins-record__label {
  position: relative;
  display: grid;
  place-items: center;
  width: 36%;
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--ins-white);
  background: var(--ins-black);
  text-decoration: none;
  box-shadow: 0 0 0 8px var(--ins-black);
}

.ins-record__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ins-record__dots circle {
  fill: currentColor;
  opacity: 0.3;
  transition: opacity 260ms ease calc(var(--d) * 6ms);
}

.ins-record__label:is(:hover, :focus-visible) .ins-record__dots circle {
  opacity: 1;
}

.ins-record__turn {
  transform: rotate(var(--spin, 0turn));
  transform-origin: 100px 100px;
}

.ins-record__ring {
  fill: currentColor;
  font: 700 14.5px var(--ins-hei);
  letter-spacing: 0.06em;
}

.ins-record__label .ins-go {
  width: 13px;
  height: 16px;
  margin-left: 3px;
}

.ins-record__label:is(:hover, :focus-visible) .ins-go {
  translate: 4px 0;
}

/* on a small record only the ring of dots and the triangle stay */
@container (max-width: 330px) {
  .ins-record .ins-record__ring {
    display: none;
  }

  .ins a.ins-record__label {
    width: 30%;
  }
}

/* ============================== 04 影响去了哪里 ============================== */

.ins-trace {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 22px 24px 18px;
}

.ins-trace__dots,
.ins-next__dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.ins-links {
  position: relative;
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 6px;
  min-height: 0;
  padding-top: 14px;
}

.ins-link {
  display: grid;
  grid-template-columns: minmax(110px, 0.7fr) minmax(36px, 0.42fr) minmax(0, 2fr);
  align-items: center;
  min-height: 0;
  container-type: size;
}

.ins-link__from {
  grid-column: 1;
  display: grid;
  gap: 6px;
  min-width: 0;
}

.ins-link__name {
  font: 700 clamp(15px, 1.3vw, 19px)/1.1 var(--ins-hei);
}

.ins-link__to {
  grid-column: 3;
  display: flex;
  gap: clamp(12px, 1.6vw, 22px);
  min-width: 0;
}

.ins-box {
  display: block;
  width: 100%;
  aspect-ratio: 1.6;
}

/* the pictures take the height of their row */
.ins-link__from .ins-box {
  width: min(100%, (100cqh - 48px) * 1.3);
  aspect-ratio: 1.3;
}

.ins-dest {
  display: grid;
  gap: 5px;
  width: min(48%, max(172px, (100cqh - 48px) * 1.6), 250px);
  min-width: 0;
}

/* where a link goes: its name, one of the field's triangles turned to point
   the way, and a line of dots under it that lights up from the left */
.ins-dest__text,
.ins-exit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 9px;
}

.ins-dest__text::before,
.ins-dest__text::after,
.ins-exit::before,
.ins-exit::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  background: radial-gradient(circle, currentColor 1.1px, transparent 1.6px) 0 50% / 6px 4px repeat-x;
  pointer-events: none;
}

.ins-dest__text::before,
.ins-exit::before {
  opacity: 0.32;
}

.ins-dest__text::after,
.ins-exit::after {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 520ms var(--ins-ease);
}

.ins-dest__text b {
  min-width: 0;
  font: 700 clamp(12px, 1vw, 15px)/1.3 var(--ins-hei);
  text-wrap: balance;
}

.ins-go {
  flex: none;
  width: 8px;
  height: 10px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transition: translate 360ms var(--ins-ease);
}

:is(.ins-dest:hover, .ins-dest:focus-visible) .ins-dest__text::after,
.ins-dest__text:is(:hover, :focus-visible)::after,
.ins-exit:is(:hover, :focus-visible)::after {
  clip-path: inset(0 0 0 0);
}

:is(.ins-dest:hover, .ins-dest:focus-visible) .ins-go,
.ins-dest__text:is(:hover, :focus-visible) .ins-go,
.ins-exit:is(:hover, :focus-visible) .ins-go {
  translate: 5px 0;
}

/* the song: the picture plays a few seconds, the words go to the page */
.ins-dest--song {
  display: grid;
  gap: 5px;
}

.ins-dest__box {
  position: relative;
  display: block;
  cursor: pointer;
}

.ins-dest__box i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ins-white);
  translate: -50% -50%;
  transition: transform 300ms var(--ins-ease);
}

.ins-dest__box i::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  border-style: solid;
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent var(--ins-black);
  translate: -50% -50%;
}

.ins-dest.is-playing .ins-dest__box i::before {
  left: 50%;
  width: 12px;
  height: 14px;
  border: 0;
  border-left: 4px solid var(--ins-black);
  border-right: 4px solid var(--ins-black);
}

.ins-dest__box:hover i,
.ins-dest__box:focus-visible i {
  transform: scale(1.08);
}

.ins-dest--song .ins-dest__text {
  text-align: left;
}

/* ============================== 05 下一站 ============================== */

.ins-next {
  position: absolute;
  inset: 0;
}

.ins-next__vortex {
  position: absolute;
  top: 25%;
  left: 50%;
  width: min(38%, calc(var(--ins-vh, 100vh) * 0.3));
  aspect-ratio: 1;
  translate: -50% -50%;
  pointer-events: none;
}

.ins-exits {
  position: absolute;
  top: 45%;
  right: 0;
  left: 0;
  display: flex;
  justify-content: center;
  gap: clamp(20px, 3.4vw, 56px);
  padding: 0 24px;
}

.ins-exit {
  flex-wrap: wrap;
  width: min(42%, 250px);
  padding-bottom: 12px;
}

.ins-exit .ins-box {
  flex: 1 0 100%;
  max-height: 20vh;
  margin-bottom: 4px;
}

.ins-exit b {
  font: 700 clamp(20px, 1.9vw, 30px)/1 var(--ins-hei);
  letter-spacing: 0.04em;
}

.ins-exit .ins-go {
  width: 11px;
  height: 14px;
}

.ins-next__sea {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 28%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%);
  mask-image: linear-gradient(180deg, transparent 0, #000 16%);
}

.ins-next__sea.is-flat {
  display: none;
}

/* ============================== tabs (narrow screens) ============================== */

.ins-tabs {
  display: none;
}

/* ============================ no WebGL ============================ */

.ins.no-gl {
  background:
    radial-gradient(circle, rgba(242, 242, 238, 0.12) 1px, transparent 1.4px) 0 0 / 14px 14px,
    var(--ins-black);
}

.ins.no-gl .ins-field {
  display: none;
}

.ins.no-gl .ins-intro__title {
  color: var(--ins-white);
}

.ins.no-gl .ins-media__img {
  clip-path: none;
  filter: grayscale(1) contrast(1.15);
  transition: filter 400ms ease;
}

.ins.no-gl .ins-media.is-dev .ins-media__img {
  filter: none;
}

.ins.no-gl .ins-record {
  background: repeating-radial-gradient(circle, rgba(242, 242, 238, 0.4) 0 1px, transparent 1px 7px);
}

/* without the shader the vortex is left as still rings */
.ins.no-gl :is(.ins-intro__vortex, .ins-next__vortex) {
  border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(242, 242, 238, 0.3) 0 1px, transparent 1px 9px);
  -webkit-mask-image: radial-gradient(circle, transparent 0 9%, #000 10% 68%, transparent 71%);
  mask-image: radial-gradient(circle, transparent 0 9%, #000 10% 68%, transparent 71%);
}

/* ============================ phones and narrow windows ============================ */
/* one strip at a time, filling the screen; numbered tabs along the bottom.
   Phones see the site in landscape, so this holds for short landscape
   touch screens too. */

@media (max-width: 760px), (max-aspect-ratio: 4/5), (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
  /* sideways swipes belong to the page (they move between strips), so the
     browser is not allowed to pan or go back on them */
  .ins,
  .ins-panel {
    touch-action: pan-y pinch-zoom;
  }

  .ins {
    --ins-tabs: calc(54px + env(safe-area-inset-bottom, 0px));
  }

  .ins-row {
    inset: 0 0 var(--ins-tabs);
    display: block;
    perspective: none;
  }

  .ins-strip,
  .ins-strip.is-left,
  .ins-strip.is-right,
  .ins-strip.is-active {
    position: absolute;
    inset: 0;
    border-radius: 0;
    transform: none;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 360ms ease,
      visibility 0s linear 360ms;
  }

  .ins-strip.is-active {
    opacity: 1;
    visibility: visible;
    transition:
      opacity 420ms ease 80ms,
      visibility 0s linear 0s;
  }

  .ins.is-opening .ins-strip:not(.ins-strip--intro) {
    opacity: 0;
  }

  .ins-spine {
    display: none;
  }

  .ins-panel {
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .ins-tabs {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    height: var(--ins-tabs);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-top: 1px solid var(--ins-hair);
    background: rgba(4, 4, 4, 0.92);
    transition: translate 600ms var(--ins-ease);
  }

  .ins.is-opening .ins-tabs {
    translate: 0 100%;
  }

  .ins-tab {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 3px;
    color: var(--ins-grey);
    font: 700 10px/1.1 var(--ins-hei);
  }

  .ins-tab .ins-dots {
    height: 15px;
  }

  .ins-tab .ins-dots__on {
    fill: currentColor;
  }

  .ins-tab .ins-dots__off {
    fill: currentColor;
    opacity: 0.12;
  }

  .ins-tab span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ins-tab[aria-current="true"] {
    color: var(--ins-white);
    background: radial-gradient(circle, var(--ins-white) 1.1px, transparent 1.6px) 50% 1px / 6px 4px repeat-x;
  }

  .ins-tabs {
    padding-right: 64px;
  }
}

/* narrow and tall: the panels stack top to bottom and scroll */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .ins-intro__vortex {
    top: 36%;
    left: 50%;
    width: min(78vw, calc(var(--ins-vh, 100vh) * 0.44));
  }

  .ins-intro__title {
    font-size: clamp(90px, 27vw, 150px);
  }

  .ins-anime,
  .ins-game,
  .ins-music,
  .ins-trace {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 20px 16px 28px;
  }

  /* the three still side by side, the seven under them */
  .ins-trio {
    margin-top: 22px;
    gap: 12px;
    container-type: normal;
  }

  .ins-trio .ins-media--plate {
    width: 100%;
  }

  .ins-media--plate {
    height: auto;
    aspect-ratio: var(--r, 0.7);
  }

  .ins-scatter {
    height: 440px;
    margin-top: 30px;
  }

  /* the poster first, in its band of glass, then the words */
  .ins-game {
    --plate-w: min(100vw - 32px, var(--ins-vh, 100vh) * 0.5 * var(--r, 0.7));
    container-type: normal;
  }

  .ins-game .ins-phead {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
  }

  .ins-game__work {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-top: 16px;
    padding-top: 26px;
  }

  .ins-game .ins-glass {
    top: 0;
    right: -16px;
    bottom: auto;
    left: -16px;
    height: calc(var(--plate-w) / var(--r, 0.7) + 52px);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
  }

  .ins-game__plate {
    position: relative;
    top: auto;
    right: auto;
    align-self: center;
  }

  .ins-game__name {
    position: relative;
    top: auto;
    right: auto;
    width: auto;
    align-self: center;
    margin-top: 4px;
    text-align: center;
  }

  .ins-scatter--solo {
    --ride: 0;
    position: relative;
    inset: auto;
    width: 100%;
    height: 280px;
  }

  .ins-music {
    justify-content: center;
    align-items: center;
  }

  .ins-music .ins-phead {
    align-self: stretch;
  }

  .ins-record {
    width: min(84vw, calc(var(--ins-vh, 100vh) * 0.52));
    margin: auto 0;
  }

  .ins-links {
    display: grid;
    grid-template-rows: none;
    gap: 34px;
    padding-top: 22px;
  }

  .ins-link {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    container-type: normal;
  }

  .ins-link__from .ins-box {
    width: 100%;
  }

  .ins-dest {
    width: min(48%, 196px);
  }

  .ins-link__from,
  .ins-link__to {
    grid-column: 1;
  }

  .ins-link__from {
    grid-template-columns: 120px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
  }

  .ins-link__to {
    padding-left: 30px;
  }

  .ins-next__vortex {
    top: 15%;
    width: min(46vw, calc(var(--ins-vh, 100vh) * 0.2));
  }

  .ins-exits {
    top: 29%;
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }

  .ins-exit {
    width: min(78vw, 300px);
  }

  .ins-exit .ins-box {
    max-height: 11vh;
  }

  .ins-next__sea {
    height: 18%;
  }
}

/* phones in landscape: one strip fills the screen; the panels keep their wide
   layouts, made to fit the short height, and scroll where they must */
@media (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
  .ins {
    --ins-tabs: calc(40px + env(safe-area-inset-bottom, 0px));
    --ins-side: max(14px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  }

  .ins-tab {
    grid-auto-flow: column;
    align-items: baseline;
    gap: 6px;
    font-size: 11px;
  }

  .ins-intro__mark,
  .ins-intro__copy {
    left: var(--ins-side);
  }

  .ins-intro__vortex {
    top: 46%;
    left: 66%;
    width: min(46%, calc(var(--ins-vh, 100vh) * 0.66));
  }

  .ins-anime,
  .ins-game,
  .ins-music,
  .ins-trace {
    padding: 12px var(--ins-side) 14px;
  }

  /* the three on the left, the seven scattered on the right */
  .ins-anime {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px 22px;
  }

  .ins-anime .ins-phead {
    grid-column: 1 / -1;
  }

  .ins-trio {
    grid-column: 1;
    grid-row: 2;
    gap: 12px;
  }

  .ins-anime .ins-scatter {
    grid-column: 2;
    grid-row: 2;
  }

  .ins-game {
    --plate-w: min(56cqw, 74cqh * var(--r, 0.7));
  }

  .ins-game .ins-phead {
    top: 12px;
    left: var(--ins-side);
  }

  .ins-game__plate,
  .ins-game__name {
    right: var(--ins-side);
  }

  .ins-game .ins-glass {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 44%, #000 60%);
    mask-image: linear-gradient(90deg, transparent 0, transparent 44%, #000 60%);
  }

  .ins-scatter--solo {
    --ride: 0;
    inset: 26% auto auto var(--ins-side);
    width: min(30cqw, 170px);
    height: 62%;
  }

  .ins-record {
    width: min(60%, calc(var(--ins-vh, 100vh) * 0.62));
  }

  /* four rows that keep their size; the strip scrolls */
  .ins-trace {
    position: relative;
    inset: auto;
    min-height: 100%;
  }

  .ins-links {
    grid-template-rows: repeat(4, 116px);
  }

  .ins-next__vortex {
    top: 21%;
    width: min(30%, calc(var(--ins-vh, 100vh) * 0.3));
  }

  .ins-exits {
    top: 39%;
  }

  .ins-exit .ins-box {
    max-height: 21vh;
  }

  .ins-next__sea {
    height: 17%;
  }
}

/* short landscape screens: the row stays, everything gets smaller */
@media (max-height: 560px) and (orientation: landscape) {
  .ins-intro__title {
    font-size: 84px;
  }

  .ins-phead__title {
    font-size: 26px;
  }

  .ins-phead {
    padding-bottom: 6px;
  }

  .ins-name {
    font-size: 13px;
  }

  .ins-spine__title {
    font-size: 14px;
  }

  .ins-exit b {
    font-size: 22px;
  }

  .ins-exit .ins-box {
    max-height: 22vh;
  }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .ins-strip.is-active .ins-orbit path {
    animation: none;
  }

  .ins *,
  .ins *::before,
  .ins *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
}