.music-portal-link,
.novel-portal-link {
  isolation: isolate;
  position: relative;
  overflow: hidden;
}

.music-portal-link::before,
.novel-portal-link::before {
  content: "";
  z-index: -1;
  background: linear-gradient(
    105deg,
    transparent 0 36%,
    currentColor 49% 51%,
    transparent 64% 100%
  );
  opacity: 0.12;
  width: 240%;
  position: absolute;
  inset: 0 auto 0 -240%;
}

.music-portal-link > b,
.novel-portal-link > b {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  position: relative;
}

.music-portal-link > b::before,
.novel-portal-link > b::before {
  content: "";
  background: currentColor;
  width: 18px;
  height: 1px;
  position: absolute;
  top: 8px;
  left: 0;
  transform: rotate(-45deg);
}

.music-portal-link > b::after,
.novel-portal-link > b::after {
  content: "";
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  width: 8px;
  height: 8px;
  position: absolute;
  top: 0;
  right: 0;
}

.music-portal.is-motion-active .music-portal-piano i:not(.is-black) {
  animation: portal-key 1.7s var(--portal-key-delay, 0s) infinite ease-in-out;
}

.music-portal.is-motion-active .music-portal-piano {
  animation: music-portal-piano-float 5.2s ease-in-out infinite;
}

.music-portal.is-motion-active .music-portal-link,
.novel-portal.is-motion-active .novel-portal-link {
  animation: portal-link-breathe 2.8s ease-in-out infinite;
}

.music-portal.is-motion-active .music-portal-link::before,
.novel-portal.is-motion-active .novel-portal-link::before {
  animation: portal-link-shine 3.4s ease-in-out infinite;
}

.music-portal.is-motion-active .music-portal-link > b,
.novel-portal.is-motion-active .novel-portal-link > b {
  animation: novel-portal-link-cue 1.55s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.novel-portal.is-motion-active .novel-portal-book {
  opacity: 0.34;
  animation: novel-portal-book-float 5.4s ease-in-out infinite;
}

.novel-portal.is-motion-active .novel-portal-portrait {
  animation: novel-portal-portrait-breathe 8s ease-in-out infinite alternate;
}

@keyframes music-portal-piano-float {
  0%,
  100% {
    transform: rotate(-5deg) skew(-8deg) translateY(0);
  }
  50% {
    transform: rotate(-4.2deg) skew(-8deg) translateY(-8px);
  }
}

@keyframes portal-link-breathe {
  0%,
  100% {
    filter: brightness(1);
    box-shadow: 0 0 0 transparent;
  }
  50% {
    filter: brightness(1.18);
    box-shadow: 0 10px 34px color-mix(in srgb, currentColor 14%, transparent);
  }
}

@keyframes portal-link-shine {
  0%,
  30% {
    left: -240%;
  }
  72%,
  100% {
    left: 110%;
  }
}

@keyframes novel-portal-link-cue {
  0%,
  100% {
    opacity: 0.52;
    transform: translateX(0);
  }
  45% {
    opacity: 1;
    transform: translateX(7px);
  }
}

@keyframes novel-portal-book-float {
  0%,
  100% {
    transform: translateY(0) rotate(-0.4deg);
  }
  50% {
    transform: translateY(-14px) rotate(0.5deg);
  }
}

@keyframes novel-portal-portrait-breathe {
  from {
    transform: scale(1.04);
  }
  to {
    transform: scale(1.075) translateX(-1%);
  }
}

@media (max-width: 720px) {
  .music-portal-link,
  .novel-portal-link {
    box-sizing: border-box;
    width: calc(100% - 28px);
    margin-left: 14px;
    padding-left: 14px;
    padding-right: 12px;
    justify-content: space-between;
    gap: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .music-portal.is-motion-active *,
  .music-portal.is-motion-active *::before,
  .music-portal.is-motion-active *::after,
  .novel-portal.is-motion-active *,
  .novel-portal.is-motion-active *::before,
  .novel-portal.is-motion-active *::after {
    animation: none !important;
  }
}

/* Keep the hero credit complete on narrow screens, then reveal it letter by letter. */
.hero-role {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.72em;
  max-width: calc(100vw - 32px);
  white-space: nowrap;
}

.hero-role-word {
  display: inline-flex;
  flex: 0 0 auto;
}

.hero-role-word .split-char {
  display: inline-block;
}

.jp-no-orphan {
  display: inline-flex !important;
  flex-wrap: nowrap;
  align-items: baseline;
  max-width: 100%;
  white-space: nowrap;
}

.jp-no-orphan
  > :is(.split-char, .music-char, .music-motion-char, .novel-char) {
  display: inline-block !important;
  flex: 0 0 auto;
  width: auto !important;
  min-width: 0;
}

@media (max-width: 640px) {
  main :is(p, h1, h2, h3, h4, blockquote, a, strong) {
    max-width: 100%;
    line-break: strict;
    overflow-wrap: break-word;
    word-break: normal;
  }

  main :is(h1, h2, h3, h4, blockquote) {
    text-wrap: balance;
  }

  main :is(p, a, strong) {
    text-wrap: pretty;
  }

  .hero-role {
    width: calc(100% - 32px);
    max-width: calc(100% - 32px);
    padding: 0 4px;
    left: 16px;
    right: auto;
    transform: none;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 0.68em;
    row-gap: 0.18em;
    font-size: clamp(6.5px, 1.9vw, 8px);
    letter-spacing: 0.11em;
    line-height: 1.55;
    white-space: normal;
  }

  .life-cover h2 {
    max-width: 100%;
    font-size: clamp(44px, 13.4vw, 54px);
    letter-spacing: -0.045em;
    text-wrap: balance;
  }

  .batta .split-char {
    transform: translate3d(0, 0.75em, 0) skew(-6deg);
  }

  .release-more-loop {
    width: auto;
    max-width: none;
    inset: 26% 20px auto;
    font-size: 7.6vw;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
    transform: none;
  }
}

/*
 * Mobile performance guardrails. Keep the authored text and key portal motion,
 * while removing full-screen paint effects that add no reading value.
 */
@media (max-width: 720px) and (pointer: coarse) {
  .hero-noise,
  .hero-cursor-light,
  .hero-glitch {
    display: none !important;
  }

  .hero-ink,
  .portrait-slice,
  .portrait-red-aura,
  .portrait-red-channel,
  .split-char,
  .closing-orbit,
  .closing-slashes {
    will-change: auto !important;
  }

  .portrait-red-aura {
    filter: blur(12px);
    animation-duration: 7s;
  }
}