/* Shared fixed-page footer. Loaded after every page stylesheet, including ABYSS. */
[data-mvn-site] .site-footer {
  --pad: clamp(22px, 4vw, 68px);
  line-height: 1.9;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 80px;
  align-items: end;
  padding: 90px var(--pad) 50px;
  color: white;
  background: #050505;
}

[data-mvn-site] .footer-mark {
  font-size: clamp(42px, 9vw, 140px);
  font-weight: 800;
  letter-spacing: -0.065em;
  line-height: 0.8;
}

[data-mvn-site] .footer-links {
  display: grid;
  gap: 9px;
  justify-items: end;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}


@media (max-width: 900px) {
  [data-mvn-site] .site-footer {
    grid-template-columns: 1fr;
  }

  [data-mvn-site] .footer-links {
    /* 40px targets + 8px gap keep every 1px underline on the same device-pixel
       phase at common fractional DPRs (1.25, 1.5, 1.75, 2.625), avoiding
       alternating apparent weights. Desktop spacing remains unchanged. */
    gap: 8px;
    justify-items: start;
  }
}

[data-mvn-site] .site-footer {
  --footer-yellow: #ffc400;
  --footer-ink: #050505;
  --footer-gutter: var(--pad, var(--pc-gutter, var(--abyss-pad, 6vw)));
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 360ms ease;
}

[data-mvn-site] .site-footer::before {
  position: absolute;
  z-index: 0;
  top: var(--footer-origin-y, 50%);
  left: var(--footer-origin-x, 42%);
  width: max(220vw, 220vh);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--footer-yellow);
  content: "";
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  transform-origin: center;
  transition: transform 900ms cubic-bezier(0.68, 0, 0.22, 1);
}

[data-mvn-site] .site-footer > * {
  position: relative;
  z-index: 2;
}

[data-mvn-site] .footer-mark {
  display: inline-flex;
  width: fit-content;
  align-items: baseline;
  color: inherit;
  text-decoration: none;
}

[data-mvn-site] .footer-mark-letter,
[data-mvn-site] .footer-mark-rest {
  position: relative;
}

[data-mvn-site] .footer-mark-rest {
  z-index: 2;
}

[data-mvn-site] .footer-mark-letter {
  z-index: 2;
  color: var(--footer-yellow);
  cursor: pointer;
  transition: color 260ms ease;
}

[data-mvn-site] .footer-links a {
  position: relative;
  display: block;
  padding: 0.18em 0.08em;
  color: inherit;
  text-decoration: none;
  transition: color 160ms ease 20ms;
}

[data-mvn-site] .footer-links a > span {
  position: relative;
  z-index: 2;
}

[data-mvn-site] .footer-links a::before {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: calc(-1 * var(--footer-gutter));
  left: -0.7em;
  height: 1.65em;
  background: var(--footer-yellow);
  content: "";
  pointer-events: none;
  transform: translateY(-50%) scaleX(0);
  transform-origin: right center;
  transition: transform 360ms cubic-bezier(0.77, 0, 0.18, 1);
}

[data-mvn-site] .site-footer[data-footer-input="hover"] .footer-links a:hover {
  color: var(--footer-ink);
}

[data-mvn-site] .site-footer[data-footer-input="hover"] .footer-links a:hover::before {
  transform: translateY(-50%) scaleX(1);
}

[data-mvn-site] .site-footer.is-footer-expanded {
  color: var(--footer-ink);
}

[data-mvn-site] .site-footer.is-footer-expanded::before {
  transform: translate(-50%, -50%) scale(1);
}

[data-mvn-site] .site-footer.is-footer-expanded .footer-mark-letter {
  color: var(--footer-ink);
}

/* Mobile uses an arrival sequence instead of hover. It is gated by viewport
   width so a convertible laptop cannot switch the mobile design merely
   because the last input happened to be touch. */
@media (max-width: 900px) {
  [data-mvn-site] .site-footer.is-mobile-arrival {
    color: var(--footer-ink);
  }

  [data-mvn-site] .site-footer.is-mobile-arrival::before {
    transform: translate(-50%, -50%) scale(1);
  }

  [data-mvn-site] .site-footer.is-mobile-arrival .footer-mark-letter {
    color: var(--footer-ink);
  }

  [data-mvn-site] .footer-links a::before {
    top: auto;
    right: 0;
    bottom: 4px;
    left: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition-duration: 430ms;
  }

  [data-mvn-site] .site-footer.is-mobile-arrival .footer-links a {
    color: var(--footer-ink);
  }

  [data-mvn-site] .site-footer.is-mobile-arrival .footer-links a::before {
    transform: scaleX(1);
    transition-delay: var(--footer-link-delay, 700ms);
  }

  [data-mvn-site] .footer-links a:nth-child(1) { --footer-link-delay: 650ms; }
  [data-mvn-site] .footer-links a:nth-child(2) { --footer-link-delay: 740ms; }
  [data-mvn-site] .footer-links a:nth-child(3) { --footer-link-delay: 830ms; }
  [data-mvn-site] .footer-links a:nth-child(4) { --footer-link-delay: 920ms; }
  [data-mvn-site] .footer-links a:nth-child(5) { --footer-link-delay: 1010ms; }
  [data-mvn-site] .footer-links a:nth-child(6) { --footer-link-delay: 1100ms; }
  [data-mvn-site] .footer-links a:nth-child(7) { --footer-link-delay: 1190ms; }
}

[data-mvn-site] .footer-links a:focus-visible {
  color: var(--footer-ink);
  outline: 1px solid var(--footer-yellow);
  outline-offset: 4px;
}

[data-mvn-site] .footer-links a:focus-visible::before {
  transform: translateY(-50%) scaleX(1);
}

/* Keyboard focus must not latch the whole desktop footer into its yellow
   pointer-hover effect. The logo keeps an explicit focus indicator instead. */
[data-mvn-site] .footer-mark:focus-visible {
  outline: 1px solid var(--footer-yellow);
  outline-offset: 8px;
}

@media (prefers-reduced-motion: reduce) {
  [data-mvn-site] .site-footer,
[data-mvn-site] .site-footer::before,
[data-mvn-site] .footer-mark-letter,
[data-mvn-site] .footer-links a,
[data-mvn-site] .footer-links a::before {
    transition-duration: 1ms;
    transition-delay: 0ms;
  }
}


/* English at rest on every PC page; Japanese on hover/focus only. Both labels reserve
   one shared grid footprint, so the link never shifts under the pointer. */
[data-mvn-site] .footer-links a.footer-legal-link { display: grid; align-items: center; }
[data-mvn-site] .footer-links a.footer-legal-link > span,
[data-mvn-site] .footer-links a.footer-legal-link::after { grid-area: 1 / 1; }
[data-mvn-site] .footer-links a.footer-legal-link::after {
  position: relative;
  z-index: 2;
  content: attr(data-legal-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.7;
  opacity: 0;
  pointer-events: none;
}
[data-mvn-site] .footer-links a.footer-legal-link:focus-visible > span { opacity: 0; }
[data-mvn-site] .footer-links a.footer-legal-link:focus-visible::after { opacity: 1; }
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  [data-mvn-site] .footer-links a.footer-legal-link > span,
  [data-mvn-site] .footer-links a.footer-legal-link::after { justify-self: end; text-align: right; }
}
@media (hover: hover) and (pointer: fine) {
  [data-mvn-site] .footer-links a.footer-legal-link:hover > span { opacity: 0; }
  [data-mvn-site] .footer-links a.footer-legal-link:hover::after { opacity: 1; }
}
@media (max-width: 900px) {
  /* One Japanese label per mobile link; keep normal navigation and tap area.
     aria-label supplies a name independently of generated CSS content. */
  [data-mvn-site] .footer-links a.footer-legal-link { min-height: 40px; padding-block: 8px; }
  [data-mvn-site] .footer-links a.footer-legal-link > span { display: none; }
  [data-mvn-site] .footer-links a.footer-legal-link::after { grid-area: 1 / 1; font-size: 13px; line-height: 1.6; opacity: 1; }
}
@media (max-width: 900px) {
  [data-mvn-site] .footer-links a.footer-legal-link:focus-visible { color: inherit; outline-color: currentColor; }
  [data-mvn-site] .footer-links a.footer-legal-link:focus-visible::before { transform: scaleX(1); }
  [data-mvn-site] .footer-mark:focus-visible { outline-color: currentColor; }
}