/* Live-render fidelity pass: desktop coordinates are calibrated against the first Vercel screenshot. */
.splash-brand,
.splash-contact {
  position: fixed;
  z-index: 60;
  font-family: 'Martian Mono Variable', 'Martian Mono', monospace;
  font-size: clamp(9px, .68vw, 12px);
  font-weight: 500;
  letter-spacing: .08em;
  color: #666;
}

.splash-brand {
  top: 3.4vh;
  left: 3.4vw;
  pointer-events: none;
}

.splash-contact {
  left: 3.4vw;
  bottom: 3vh;
  cursor: pointer;
  transition: color .25s ease;
}

.splash-contact:hover,
.splash-contact:focus-visible {
  color: #f4f1e7;
}

/* Category words keep the larger navigation scale. */
.splash-page .embedded,
.active-anchor,
.transition-anchor {
  font-family: 'Martian Mono Variable', 'Martian Mono', monospace;
  font-weight: 500;
  font-size: clamp(12px, .88vw, 15px);
  letter-spacing: .08em;
}

/* CONTACT remains the smaller interface word, including its transition ghost. */
.contact-anchor,
.transition-contact {
  font-family: 'Martian Mono Variable', 'Martian Mono', monospace;
  font-weight: 500;
  font-size: clamp(9px, .68vw, 12px);
  letter-spacing: .08em;
}

/*
  Locked readability behavior: dirty cream over black and dark over the cream
  display letters via difference blending. Animation must never remove this.
*/
.splash-page .embedded {
  color: #d9d7d0;
  mix-blend-mode: difference;
  opacity: 1;
  animation: label-breathe 3.8s ease-in-out infinite;
  will-change: filter;
}

/* Three deliberately separated glow phases. MUSIC uses a stronger glow curve. */
.splash-page .embedded-music {
  animation-name: music-breathe;
  animation-delay: -0.65s;
}
.splash-page .embedded-films { animation-delay: -1.95s; }
.splash-page .embedded-links { animation-delay: -3.25s; }

/* FILMS / LINKS approved luminance drift. */
@keyframes label-breathe {
  0%, 100% { filter: brightness(.52); }
  50% { filter: brightness(1.08); }
}

/* MUSIC intentionally has a wider luminance swing so it reads equally strongly in its S position. */
@keyframes music-breathe {
  0%, 100% { filter: brightness(.28); }
  50% { filter: brightness(1.48); }
}

/* MUSIC must sit in the cream S, FILMS in the cream O. LINKS remains seated in the lower A. */
.splash-page .embedded-music { top: 34vh; left: 4.8vw; }
.splash-page .embedded-films { top: 35.5vh; left: 77vw; }
.splash-page .embedded-links { top: 67vh; left: 64vw; }

/* Preserve exact MUSIC/LINKS splash coordinates on their active pages. */
.anchor-music { top: 34vh; left: 4.8vw; }
.anchor-links { top: 67vh; left: 64vw; }

/* Transition ghost must originate from the same pixel anchors. */
.transition-music { top: 34vh; left: 4.8vw; }
.transition-films { top: 35.5vh; left: 77vw; }
.transition-links { top: 67vh; left: 64vw; }

/*
  CONTACT now follows the same transition grammar as the category words:
  depart -> arrive -> content, then content withdraw -> reverse -> splash.
  Its typography and established page position remain unchanged.
*/
.transition-contact.depart,
.transition-contact.reverse-arrive {
  top: auto;
  left: 3.4vw;
  bottom: 3vh;
}

.transition-contact.arrive,
.transition-contact.reverse-depart {
  top: 22vh;
  left: 8vw;
  bottom: auto;
}

.transition-contact.depart {
  color: #666;
  animation: contact-stutter-depart .23s steps(1, end) both;
}

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

.transition-contact.reverse-depart {
  color: #f5f2e8;
  animation: contact-return-stutter .40s .04s steps(1, end) both;
}

.transition-contact.reverse-arrive {
  color: #666;
  animation: contact-return-settle .22s steps(1, end) both;
}

@keyframes contact-stutter-depart {
  0%   { transform: translate(0, 0); opacity: 1; }
  22%  { transform: translate(6px, -1px); opacity: .70; }
  44%  { transform: translate(-5px, 1px); opacity: 1; }
  66%  { transform: translate(3px, 0); opacity: .76; }
  84%  { transform: translate(-2px, 0); opacity: 1; }
  100% { transform: translate(0, 0); opacity: 1; color: #f5f2e8; }
}

@keyframes contact-stutter-arrive {
  0%   { transform: translate(0, 0); opacity: .70; }
  20%  { transform: translate(-6px, 1px); opacity: 1; }
  42%  { transform: translate(5px, -1px); opacity: .72; }
  64%  { transform: translate(-3px, 1px); opacity: 1; }
  82%  { transform: translate(2px, 0); opacity: .82; }
  100% { transform: translate(0, 0); opacity: 1; }
}

@keyframes contact-return-stutter {
  0%   { transform: translate(0, 0); opacity: 1; }
  15%  { transform: translate(7px, -1px); opacity: .68; }
  31%  { transform: translate(-6px, 2px); opacity: 1; }
  47%  { transform: translate(5px, -1px); opacity: .70; }
  63%  { transform: translate(-4px, 1px); opacity: 1; }
  79%  { transform: translate(3px, 0); opacity: .78; }
  90%  { transform: translate(-2px, 0); opacity: 1; }
  100% { transform: translate(0, 0); opacity: 1; }
}

@keyframes contact-return-settle {
  0%   { transform: translate(3px, 0); opacity: .72; }
  42%  { transform: translate(-2px, 1px); opacity: 1; }
  72%  { transform: translate(1px, 0); opacity: .84; }
  100% { transform: translate(0, 0); opacity: 1; }
}

/* CONTACT participates in the same content timing and reverse concealment. */
.is-transitioning.view-contact .contact-anchor {
  opacity: 0;
}

.content-after-anchor .contact-field {
  animation: content-populate .48s .18s ease both;
}

.is-reversing.view-contact .contact-field {
  animation: content-withdraw .18s ease both !important;
}

.is-reversing.view-splash .splash-contact {
  opacity: 0 !important;
}

/*
  MUSIC never relocates. On arrival it makes a fast mechanical micro-stutter
  around its locked splash coordinate, then returns to exactly 0/0 before
  the release field finishes populating.
*/
.transition-music.arrive {
  animation: music-anchor-stutter 170ms linear both;
}

@keyframes music-anchor-stutter {
  0%   { transform: translate3d(0, 0, 0); opacity: .82; color: #f5f2e8; }
  28%  { transform: translate3d(4px, -1px, 0); opacity: 1; color: #f5f2e8; }
  52%  { transform: translate3d(-3px, 1px, 0); opacity: .94; color: #f5f2e8; }
  74%  { transform: translate3d(2px, 0, 0); opacity: 1; color: #f5f2e8; }
  100% { transform: translate3d(0, 0, 0); opacity: 1; color: #f5f2e8; }
}

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

/* Splash legal stays quieter than the navigation. */
.splash-page .footer {
  color: #3f3f3f;
}

@media (max-width: 760px) {
  .splash-brand {
    top: 2.2vh;
    left: 5vw;
    font-size: 8px;
  }

  .splash-contact {
    left: 5vw;
    bottom: 2.2vh;
    font-size: 8px;
  }

  .splash-page .embedded,
  .active-anchor,
  .transition-anchor {
    font-size: 10px;
  }

  .contact-anchor,
  .transition-contact {
    font-size: 8px;
  }

  .transition-contact.depart,
  .transition-contact.reverse-arrive {
    top: auto;
    left: 5vw;
    bottom: 2.2vh;
  }

  .transition-contact.arrive,
  .transition-contact.reverse-depart {
    top: 20vh;
    left: 9vw;
    bottom: auto;
  }

  /* Mobile remains a separately composed state; these are provisional until the first mobile capture. */
  .splash-page .embedded-music { top: 32vh; left: 12vw; }
  .splash-page .embedded-films { top: 34vh; left: 71vw; }
  .splash-page .embedded-links { top: 63vh; left: 64vw; }

  .anchor-music { top: 32vh; left: 12vw; }
  .anchor-links { top: 63vh; left: 64vw; }

  .transition-music { top: 32vh; left: 12vw; }
  .transition-films { top: 34vh; left: 71vw; }
  .transition-links { top: 63vh; left: 64vw; }

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

@media (prefers-reduced-motion: reduce) {
  .splash-page .embedded {
    animation: none;
    filter: none;
    opacity: 1;
  }

  .transition-music.arrive {
    animation: none !important;
    transform: translate3d(0, 0, 0);
  }

  .transition-contact.depart,
  .transition-contact.arrive,
  .transition-contact.reverse-depart,
  .transition-contact.reverse-arrive {
    animation: none !important;
  }
}

/* AL-1-inspired halo on the display letters at every viewport size. */
.splash-page .splash-line,
.index-page .index-ghost {
  text-shadow:
    0 0 10px rgba(217, 215, 208, .43),
    0 0 24px rgba(217, 215, 208, .40),
    0 0 42px rgba(217, 215, 208, .15);
}