.page-enter {
  animation: page-reveal .32s ease both;
}

@keyframes page-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

.transition-anchor {
  position: fixed;
  z-index: 200;
  font-family: 'Martian Mono Variable', 'Martian Mono', monospace;
  font-size: clamp(10px, .72vw, 13px);
  letter-spacing: .06em;
  pointer-events: none;
  will-change: top, left, transform, color, opacity;
}

.active-return {
  cursor: pointer;
  transition: color .2s ease, filter .2s ease;
}

.active-return:hover,
.active-return:focus-visible {
  filter: brightness(1.28);
}

.transition-music {
  top: 31vh;
  left: 15vw;
}

.transition-links {
  top: 67vh;
  left: 64vw;
}

.transition-films {
  top: 34vh;
  left: 47vw;
}

.transition-anchor.depart {
  color: #090909;
  animation: anchor-depart .23s ease both;
}

/* MUSIC forward behavior remains approved. */
.transition-music.depart {
  animation: music-stutter-depart .23s steps(1, end) both;
}

.transition-music.arrive {
  color: #f5f2e8;
  animation: music-stutter-arrive .32s steps(1, end) both;
}

/* LINKS: clearer front-end stutter while remaining anchored. */
.transition-links.depart {
  animation: links-forward-stutter .29s steps(1, end) both;
}

.transition-links.arrive {
  color: #f5f2e8;
  animation: links-arrive-stutter .35s steps(1, end) both;
}

/* LINKS gets a brief duplicate after-image on both directions. */
.transition-links.depart::before,
.transition-links.arrive::before,
.transition-links.reverse-depart::before,
.transition-links.reverse-arrive::before {
  content: 'LINKS';
  position: absolute;
  inset: 0;
  color: inherit;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
}

.transition-links.depart::before {
  animation: links-echo-forward .29s steps(1, end) both;
}

.transition-links.arrive::before {
  animation: links-echo-arrive .35s steps(1, end) both;
}

.transition-films.arrive {
  color: #f5f2e8;
  animation: films-relocate .39s cubic-bezier(.2,.8,.2,1) both;
}

/* REVERSE: active page words become the route back to the splash. */
.transition-music.reverse-depart {
  color: #f5f2e8;
  animation: music-return-stutter .42s .06s steps(1, end) both;
}

.transition-links.reverse-depart {
  color: #f5f2e8;
  animation: links-return-stutter .41s .06s steps(1, end) both;
}

.transition-links.reverse-depart::before {
  animation: links-echo-return .41s .06s steps(1, end) both;
}

.transition-films.reverse-depart {
  color: #f5f2e8;
  animation: films-return .50s .05s cubic-bezier(.2,.8,.2,1) both;
}

.transition-anchor.reverse-arrive {
  color: #f5f2e8;
  opacity: 1;
}

.transition-links.reverse-arrive::before {
  animation: links-echo-settle .22s steps(1, end) both;
}

@keyframes anchor-depart {
  0% { color: #090909; }
  80% { color: #090909; }
  100% { color: #f5f2e8; }
}

@keyframes music-stutter-depart {
  0%   { transform: translate(0, 0); color: #090909; opacity: 1; }
  22%  { transform: translate(9px, -2px); color: #090909; opacity: .78; }
  43%  { transform: translate(-7px, 3px); color: #090909; opacity: 1; }
  64%  { transform: translate(5px, 1px); color: #090909; opacity: .72; }
  82%  { transform: translate(-3px, -1px); color: #090909; opacity: 1; }
  100% { transform: translate(0, 0); color: #f5f2e8; opacity: 1; }
}

@keyframes music-stutter-arrive {
  0%   { transform: translate(0, 0); opacity: .72; color: #f5f2e8; }
  20%  { transform: translate(-8px, 2px); opacity: 1; }
  40%  { transform: translate(6px, -2px); opacity: .74; }
  60%  { transform: translate(-4px, 1px); opacity: 1; }
  78%  { transform: translate(2px, 0); opacity: .86; }
  100% { transform: translate(0, 0); opacity: 1; color: #f5f2e8; }
}

/* MUSIC return: same character, but more readable stutter before settling exactly home. */
@keyframes music-return-stutter {
  0%   { transform: translate(0, 0); opacity: 1; }
  14%  { transform: translate(10px, -2px); opacity: .70; }
  28%  { transform: translate(-8px, 3px); opacity: 1; }
  43%  { transform: translate(7px, -1px); opacity: .68; }
  58%  { transform: translate(-5px, 2px); opacity: 1; }
  72%  { transform: translate(3px, -1px); opacity: .78; }
  86%  { transform: translate(-2px, 0); opacity: 1; }
  100% { transform: translate(0, 0); opacity: 1; }
}

@keyframes links-forward-stutter {
  0%   { transform: translate(0, 0); color: #090909; opacity: 1; }
  16%  { transform: translate(6px, -1px); color: #090909; opacity: .68; }
  32%  { transform: translate(-5px, 2px); color: #090909; opacity: 1; }
  49%  { transform: translate(4px, -1px); color: #090909; opacity: .70; }
  66%  { transform: translate(-3px, 1px); color: #090909; opacity: 1; }
  83%  { transform: translate(2px, 0); color: #f5f2e8; opacity: .80; }
  100% { transform: translate(0, 0); color: #f5f2e8; opacity: 1; }
}

@keyframes links-arrive-stutter {
  0%   { transform: translate(0, 0); opacity: .68; color: #f5f2e8; }
  16%  { transform: translate(-6px, 2px); opacity: 1; }
  32%  { transform: translate(5px, -2px); opacity: .68; }
  49%  { transform: translate(-4px, 1px); opacity: 1; }
  66%  { transform: translate(3px, -1px); opacity: .74; }
  83%  { transform: translate(-2px, 0); opacity: 1; }
  100% { transform: translate(0, 0); opacity: 1; color: #f5f2e8; }
}

@keyframes links-echo-forward {
  0%, 10% { opacity: 0; transform: translate(0, 0); }
  18% { opacity: .46; transform: translate(9px, 0); }
  34% { opacity: .24; transform: translate(-7px, 2px); }
  52% { opacity: .38; transform: translate(6px, -1px); }
  70% { opacity: .18; transform: translate(-4px, 1px); }
  86% { opacity: .10; transform: translate(2px, 0); }
  100% { opacity: 0; transform: translate(0, 0); }
}

@keyframes links-echo-arrive {
  0% { opacity: .34; transform: translate(-8px, 1px); }
  20% { opacity: .18; transform: translate(7px, -1px); }
  40% { opacity: .30; transform: translate(-5px, 1px); }
  62% { opacity: .14; transform: translate(4px, 0); }
  82% { opacity: .08; transform: translate(-2px, 0); }
  100% { opacity: 0; transform: translate(0, 0); }
}

/* LINKS return: stronger stutter plus after-image, but no relocation. */
@keyframes links-return-stutter {
  0%   { transform: translate(0, 0); opacity: 1; filter: brightness(1); }
  15%  { transform: translate(7px, -1px); opacity: .66; filter: brightness(1.18); }
  30%  { transform: translate(-6px, 2px); opacity: 1; filter: brightness(1); }
  45%  { transform: translate(5px, -2px); opacity: .68; filter: brightness(1.16); }
  60%  { transform: translate(-4px, 1px); opacity: 1; filter: brightness(1); }
  75%  { transform: translate(3px, -1px); opacity: .76; filter: brightness(1.12); }
  88%  { transform: translate(-2px, 0); opacity: 1; filter: brightness(1); }
  100% { transform: translate(0, 0); opacity: 1; filter: brightness(1); }
}

@keyframes links-echo-return {
  0%, 8% { opacity: 0; transform: translate(0, 0); }
  16% { opacity: .48; transform: translate(10px, 0); }
  31% { opacity: .22; transform: translate(-8px, 2px); }
  47% { opacity: .40; transform: translate(7px, -1px); }
  63% { opacity: .20; transform: translate(-5px, 1px); }
  79% { opacity: .14; transform: translate(3px, 0); }
  91% { opacity: .08; transform: translate(-2px, 0); }
  100% { opacity: 0; transform: translate(0, 0); }
}

@keyframes links-echo-settle {
  0% { opacity: .20; transform: translate(4px, 0); }
  38% { opacity: .10; transform: translate(-3px, 1px); }
  70% { opacity: .05; transform: translate(2px, 0); }
  100% { opacity: 0; transform: translate(0, 0); }
}

@keyframes anchor-light {
  from { opacity: .7; color: #f5f2e8; }
  to { opacity: 1; color: #f5f2e8; }
}

@keyframes films-relocate {
  0% {
    top: 34vh;
    left: 47vw;
    transform: translateX(0);
  }
  100% {
    top: 8vh;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* FILMS return keeps the approved route but adds stronger, brief catches during travel. */
@keyframes films-return {
  0% {
    top: 8vh;
    left: 50%;
    transform: translateX(-50%);
  }
  20% {
    top: 13.7vh;
    left: 55.6vw;
    transform: translateX(-40%) translate(4px, -1px);
  }
  26% {
    top: 13.7vh;
    left: 55.6vw;
    transform: translateX(-40%) translate(-4px, 2px);
  }
  42% {
    top: 19.9vh;
    left: 61.5vw;
    transform: translateX(-29%) translate(3px, -1px);
  }
  48% {
    top: 19.9vh;
    left: 61.5vw;
    transform: translateX(-29%) translate(-3px, 1px);
  }
  64% {
    top: 26.2vh;
    left: 67.6vw;
    transform: translateX(-18%) translate(2px, 0);
  }
  70% {
    top: 26.2vh;
    left: 67.6vw;
    transform: translateX(-18%) translate(-2px, -1px);
  }
  84% {
    top: 31.6vh;
    left: 73.1vw;
    transform: translateX(-8%) translate(1px, 0);
  }
  90% {
    top: 31.6vh;
    left: 73.1vw;
    transform: translateX(-8%) translate(-1px, 0);
  }
  100% {
    top: 35.5vh;
    left: 77vw;
    transform: translateX(0);
  }
}

.is-transitioning.view-music .anchor-music,
.is-transitioning.view-films .anchor-films,
.is-transitioning.view-links .anchor-links {
  opacity: 0;
}

.content-after-anchor .release-field,
.content-after-anchor .film-stack,
.content-after-anchor .links-field {
  animation: content-populate .48s .18s ease both;
}

@keyframes content-populate {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Reverse order: content withdraws first, then the word completes its return. */
.is-reversing.view-music .release-field,
.is-reversing.view-films .film-stack,
.is-reversing.view-links .links-field {
  animation: content-withdraw .18s ease both !important;
}

@keyframes content-withdraw {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(6px); }
}

/* While the reverse-transition word is visible, suppress the splash copies so there is no double image. */
.is-reversing.view-splash .embedded {
  opacity: 0 !important;
  animation: none !important;
}

.privacy-page {
  overflow-y: auto;
}

.privacy-copy {
  width: min(660px, 78vw);
  min-height: 100vh;
  padding: 27vh 0 18vh 9vw;
  color: #777;
  font-size: clamp(10px, .78vw, 13px);
  line-height: 1.8;
}

.privacy-kicker {
  margin-bottom: 2.2rem;
  color: #f4f1e7;
  letter-spacing: .08em;
}

.privacy-copy p {
  max-width: 58ch;
  margin: 0 0 1.25rem;
}

/* Optical matching for the phonogram/copyright pair. Final production can replace these with matched SVG marks. */
.legal-mark {
  width: 1.25em;
  height: 1.25em;
  line-height: 1;
  font-size: 1em;
  transform-origin: center;
}
.legal-p { transform: scale(1.08); }
.legal-c { transform: scale(1); }

@media (max-width: 760px) {
  .transition-anchor { font-size: 8px; }
  .transition-music { top: 32vh; left: 14vw; }
  .transition-films { top: 35vh; left: 58vw; }
  .transition-links { top: 63vh; left: 64vw; }

  @keyframes films-relocate {
    0% {
      top: 35vh;
      left: 58vw;
      transform: translateX(0);
    }
    100% {
      top: 7vh;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  @keyframes films-return {
    0% {
      top: 7vh;
      left: 50%;
      transform: translateX(-50%);
    }
    20% {
      top: 12.4vh;
      left: 54.4vw;
      transform: translateX(-40%) translate(3px, -1px);
    }
    26% {
      top: 12.4vh;
      left: 54.4vw;
      transform: translateX(-40%) translate(-3px, 2px);
    }
    42% {
      top: 18.7vh;
      left: 59.3vw;
      transform: translateX(-29%) translate(3px, -1px);
    }
    48% {
      top: 18.7vh;
      left: 59.3vw;
      transform: translateX(-29%) translate(-3px, 1px);
    }
    64% {
      top: 25vh;
      left: 64.3vw;
      transform: translateX(-18%) translate(2px, 0);
    }
    70% {
      top: 25vh;
      left: 64.3vw;
      transform: translateX(-18%) translate(-2px, -1px);
    }
    84% {
      top: 30.6vh;
      left: 68.7vw;
      transform: translateX(-8%) translate(1px, 0);
    }
    90% {
      top: 30.6vh;
      left: 68.7vw;
      transform: translateX(-8%) translate(-1px, 0);
    }
    100% {
      top: 34vh;
      left: 71vw;
      transform: translateX(0);
    }
  }

  .privacy-copy {
    width: 82vw;
    padding: 22vh 0 18vh 9vw;
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-enter,
  .transition-anchor,
  .content-after-anchor .release-field,
  .content-after-anchor .film-stack,
  .content-after-anchor .links-field,
  .is-reversing.view-music .release-field,
  .is-reversing.view-films .film-stack,
  .is-reversing.view-links .links-field {
    animation: none !important;
  }
}