.refs-hero {
  padding-top: calc(var(--nav-top) + var(--nav-h) + var(--section-pad));
  background:
    linear-gradient(rgb(25 25 25 / .78), rgb(25 25 25 / .94)),
    var(--hero-bg) center / cover;
}

.refs-hero__inner {
  display: grid;
  justify-items: center;
  gap: clamp(24px, 2.4vw, 40px);
  text-align: center;

  .section__title { font-size: clamp(38px, 3.4vw, 64px); }
}

.refs-hero { --hero-bg: url("../img/lore-bg-melibellule-1920.webp"); }
.refs-hero--koubai { --hero-bg: url("../img/lore-bg-koubai-1920.webp"); }
.refs-hero--ritoru,
.refs-hero--mazashi { --hero-bg: url("../img/team-bg-1920.webp"); }

.refs-hero__eyebrow {
  margin-bottom: -.6em;
  color: var(--cyan);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .3em;
  text-transform: uppercase;
}

.cast {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(14px, 2vw, 36px);
}

.cast__item {
  display: grid;
  justify-items: center;
  gap: 10px;
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
}

.cast__circle {
  width: clamp(72px, 6vw, 110px);
  aspect-ratio: 1;
  overflow: hidden;
  border: 4px solid rgb(255 255 255 / .85);
  border-radius: 50%;
  background: var(--mist);
  box-shadow: 0 10px 24px -10px rgb(0 0 0 / .7);
  transition: border-color .3s, scale .35s var(--ease-spring), box-shadow .3s;

  img { width: 100%; height: 100%; object-fit: cover; }
}

.cast__item:hover .cast__circle { border-color: var(--cyan); scale: 1.06; }

.cast__item[aria-current="page"] {
  .cast__circle {
    border-color: var(--pink);
    box-shadow: 0 0 0 6px rgb(222 86 152 / .25), 0 10px 24px -10px rgb(0 0 0 / .7);
  }

  .cast__name { color: var(--pink); }
}

.refs-hero__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;

  a {
    padding: .55em 1.3em;
    border: 2px solid rgb(89 189 209 / .6);
    border-radius: 0 14px 0 0;
    color: var(--white);
    font-weight: 700;
    text-decoration: none;
    transition: background-color .25s, border-color .25s, translate .3s var(--ease-out);

    &:hover { border-color: var(--pink); background: var(--pink); translate: 0 -3px; }
  }
}

.refs-bar {
  .nav { grid-template-columns: 1fr auto 1fr; }
}

.refs-bar__back {
  grid-column: 3;
  justify-self: end;
  gap: .6em;
  padding: .55em 1.4em;
  font-size: clamp(14px, .9vw, 17px);

  svg { width: 1.2em; height: 1.2em; fill: currentColor; transition: translate .3s var(--ease-out); }
  &:hover svg { translate: -4px 0; }
}

.refs-hero__site {
  color: #ccc;

  a {
    color: var(--cyan, #59bdd1);
    font-weight: 700;
    text-underline-offset: 4px;
    &:hover { color: var(--pink); }
  }
}

.refsheet__frame {
  position: relative;
  max-width: 1640px;
  margin: 0 auto;
  padding: clamp(8px, .8vw, 14px);
  border-radius: 0 48px 0 0;
  background: var(--white);
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / .45);

  &::after {
    content: "";
    position: absolute;
    inset: 4px;
    border: 2px solid var(--pink);
    border-radius: 0 44px 0 0;
    pointer-events: none;
  }
}

.refsheet__stage {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 0 38px 0 0;
  cursor: zoom-in;

  img { width: 100%; height: auto; }

  &.is-magnifying { cursor: none; }
}

.refsheet__lens {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: clamp(180px, 16vw, 300px);
  aspect-ratio: 1;
  border: 3px solid var(--white);
  border-radius: 50%;
  background: var(--white) no-repeat;
  box-shadow: 0 0 0 3px var(--pink), 0 18px 40px -12px rgb(0 0 0 / .55);
  opacity: 0;
  scale: .6;
  pointer-events: none;
  transition: opacity .2s, scale .3s var(--ease-spring);

  .is-magnifying & { opacity: 1; scale: 1; }
}

.refsheet__stage.is-magnifying .refsheet__hint { opacity: 0; }

.refsheet__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(24px, 2vw, 36px);

  .button {
    gap: .6em;
    min-width: 200px;
    font-size: 18px;
  }

  svg { width: 1.2em; height: 1.2em; fill: currentColor; }
}

.button--ghost {
  background: var(--white);
  box-shadow: inset 0 0 0 2px var(--pink);
  color: var(--pink);

  &:hover { color: var(--white); }
}

.refsheet__hint,
.turntable__hint {
  z-index: 1;
  transition: opacity .2s;
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: .5em 1em;
  border-radius: 999px;
  background: rgb(25 25 25 / .8);
  backdrop-filter: blur(6px);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  pointer-events: none;

  svg { width: 18px; height: 18px; fill: currentColor; }
}

.spin {
  background:
    radial-gradient(38% 46% at 50% 58%, rgb(89 189 209 / .26), transparent 100%),
    radial-gradient(70% 55% at 50% 100%, rgb(222 86 152 / .12), transparent 100%),
    linear-gradient(#262626, #1d1d1d);
  color: var(--white);

  .section__intro { color: #ddd; }
}

.turntable {
  display: grid;
  justify-items: center;
  gap: 24px;
  max-width: 620px;
  margin-inline: auto;
}

.turntable__stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 72vh;
  overflow: clip;
  cursor: grab;
  touch-action: none;
  user-select: none;

  &::after {
    content: "";
    position: absolute;
    left: 20%;
    right: 20%;
    bottom: 3%;
    z-index: 0;
    height: 7%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgb(0 0 0 / .45), transparent);
  }

  &.is-dragging { cursor: grabbing; }

  .is-zoomed &::after { opacity: 0; }
}

.turntable__frame {
  position: relative;
  z-index: 1;
  width: auto;
  height: 94%;
  object-fit: contain;
  pointer-events: none;
  transition: scale .35s var(--ease-out), transform-origin .2s linear;

  .is-dragging & { transition: scale .1s linear; }
}

.turntable__zoom {
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 12px;
  display: grid;
  gap: 8px;

  button {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgb(25 25 25 / .75);
    box-shadow: inset 0 0 0 1px rgb(89 189 209 / .5);
    color: var(--white);
    cursor: pointer;
    transition: background-color .25s, opacity .25s;

    &:hover:not(:disabled) { background: var(--pink); }
    &:disabled { opacity: .35; cursor: default; }
  }

  svg { width: 20px; height: 20px; fill: currentColor; }
}

.turntable__hint {
  right: 50%;
  bottom: 10px;
  z-index: 2;
  translate: 50% 0;
  transition: opacity .4s;

  .is-touched & { opacity: 0; }
}

.turntable__outfits {
  display: inline-flex;
  padding: 5px;
  border-radius: 999px;
  background: rgb(25 25 25 / .6);
  box-shadow: inset 0 0 0 1px rgb(89 189 209 / .45);

  button {
    padding: .55em 1.3em;
    border-radius: 999px;
    color: var(--white);
    font-weight: 700;
    transition: background-color .25s, color .25s;

    &:hover { color: var(--cyan); }
    &[aria-pressed="true"] { background: var(--pink); color: var(--white); }
  }
}

.turntable.is-static {
  .turntable__stage { cursor: default; }
  .turntable__hint { display: none; }
}

.turntable__control {
  width: min(420px, 100%);

  input {
    width: 100%;
    accent-color: var(--cyan);
  }
}

.gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 26px);
  max-width: 1500px;
  margin-inline: auto;
}

.gallery__item {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 0 32px 0 0;
  background: var(--white);
  box-shadow: 0 16px 36px -24px rgb(0 0 0 / .55);
  cursor: zoom-in;
  transition: translate .4s var(--ease-out), box-shadow .4s;

  &::after {
    content: "";
    position: absolute;
    inset: 4px;
    border: 2px solid transparent;
    border-radius: 0 28px 0 0;
    pointer-events: none;
    transition: border-color .3s;
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
    transition: scale .8s var(--ease-out);
  }

  &:hover {
    translate: 0 -6px;
    box-shadow: 0 26px 44px -24px rgb(222 86 152 / .6);

    &::after { border-color: var(--pink); }
    img { scale: 1.04; }
  }
}

@media (width < 1000px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.renders {
  background:
    linear-gradient(90deg, rgb(25 25 25 / .9), rgb(25 25 25 / .55)),
    url("../img/hero-bg-1920.webp") center / cover;
  color: var(--white);
}

.renders__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(18px, 2vw, 36px);
  max-width: 1200px;
  margin-inline: auto;
  padding: clamp(22px, 2.4vw, 40px);
  border: 2px solid rgb(89 189 209 / .5);
  border-radius: 0 48px 0 0;
  background: rgb(25 25 25 / .6);
  backdrop-filter: blur(8px);
  color: inherit;
  text-decoration: none;
  transition: border-color .3s, translate .4s var(--ease-out), box-shadow .4s;

  &:hover {
    border-color: var(--pink);
    translate: 0 -4px;
    box-shadow: 0 24px 50px -24px rgb(222 86 152 / .6);

    .renders__icon { rotate: -8deg; scale: 1.08; }
    .renders__button svg { translate: 3px -3px; }
  }

  @media (width < 720px) {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
}

.renders__icon {
  display: grid;
  place-items: center;
  width: clamp(64px, 5vw, 88px);
  aspect-ratio: 1;
  border-radius: 0 20px 0 0;
  background: var(--cyan);
  transition: rotate .4s var(--ease-spring), scale .4s var(--ease-spring);

  svg { width: 55%; height: 55%; fill: var(--white); }
}

.renders__body {
  display: grid;
  gap: 6px;
}

.renders__title {
  font-size: clamp(26px, 2vw, 38px);
  line-height: 1.1;
}

.renders__text { color: #ddd; }

.renders__button {
  gap: .6em;
  white-space: nowrap;

  svg { width: 1.1em; height: 1.1em; fill: currentColor; transition: translate .3s var(--ease-out); }
}

.bloppy {
  background:
    radial-gradient(50% 60% at 0% 0%, rgb(89 189 209 / .16), transparent 100%),
    radial-gradient(50% 60% at 100% 100%, rgb(89 189 209 / .12), transparent 100%),
    var(--ink);
  color: var(--white);

  .section__intro { color: #ddd; }
  .gallery__item { background: #242424; }
}

.music {
  background: var(--pink);
  color: var(--white);
}

.player {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(16px, 1.6vw, 28px);
  max-width: 720px;
  margin-inline: auto;
  padding: clamp(18px, 1.6vw, 28px);
  border-radius: 0 40px 0 0;
  background: var(--cloud);
  box-shadow: 0 24px 50px -28px rgb(0 0 0 / .5);
  color: var(--ink);

  &.is-unavailable { opacity: .6; }
}

.player__toggle {
  display: grid;
  place-items: center;
  width: clamp(60px, 4.4vw, 80px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--pink);
  color: var(--white);
  box-shadow: 0 10px 24px -10px rgb(222 86 152 / .9);
  transition: background-color .25s, scale .3s var(--ease-spring);

  svg { width: 42%; height: 42%; fill: currentColor; }
  &:hover { background: var(--cyan); scale: 1.06; }
}

.player__icon-pause,
.is-playing .player__icon-play { display: none; }
.is-playing .player__icon-pause { display: block; }

.player__title {
  font-size: clamp(18px, 1.2vw, 22px);
  font-weight: 800;
  line-height: 1.2;
}

.player__artist {
  margin-bottom: 12px;
  color: #777;
}

.player__progress {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pink) var(--progress, 0%), #dcdcdc 0);
  cursor: pointer;
  appearance: none;

  &::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    border: 3px solid var(--white);
    border-radius: 50%;
    background: var(--pink);
    box-shadow: 0 2px 6px rgb(0 0 0 / .3);
    appearance: none;
  }

  &::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: 3px solid var(--white);
    border-radius: 50%;
    background: var(--pink);
  }
}

.player__time {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  color: #777;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.viewer {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgb(12 12 12 / .96);
  opacity: 0;
  transition: opacity .3s, display .3s allow-discrete, overlay .3s allow-discrete;

  &[open] {
    opacity: 1;

    @starting-style { opacity: 0; }
  }

  &::backdrop { background: transparent; }
}

.viewer__canvas {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  cursor: zoom-in;
  touch-action: none;

  &.is-zoomed { cursor: grab; }
  &.is-dragging { cursor: grabbing; }
  &.is-dragging .viewer__image { transition: none; }
}

.viewer__image {
  max-width: 94vw;
  max-height: 90dvh;
  transition: scale .25s var(--ease-out), translate .25s var(--ease-out);
  user-select: none;
}

.viewer__tools {
  position: absolute;
  top: 18px;
  right: 18px;
  display: flex;
  gap: 10px;

  button {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--pink);
    color: var(--white);
    transition: background-color .25s, scale .3s var(--ease-spring);

    svg { width: 22px; height: 22px; fill: currentColor; }
    &:hover { background: var(--cyan); scale: 1.08; }
  }
}