/* Desktop-only INDEX composition. */
@media (min-width: 761px) {
  .index-page { position: relative; min-height: 100vh; overflow: hidden; }

  .index-page .index-ghost {
    left: -3.5vw;
    top: 15vh;
    font-size: clamp(12rem, 22vw, 31rem);
    font-weight: 760;
    line-height: .74;
    letter-spacing: -.066em;
    color: #d9d7d0;
    white-space: nowrap;
    pointer-events: none;
  }

  .index-page .index-menu {
    position: absolute;
    top: 18vh;
    right: 3.4vw;
    width: 9rem;
    display: grid;
    gap: 1.55rem;
    pointer-events: none;
    z-index: 20;
  }

  .index-page .index-link {
    position: relative;
    width: 9rem;
    height: 2.1rem;
    overflow: visible;
    pointer-events: auto;
    color: transparent;
    cursor: pointer;
    text-align: right;
  }

  .index-page .index-link::after {
    content: '';
    position: absolute;
    inset: -.8rem -1.6rem;
  }

  .index-page .index-link span {
    display: inline-block;
    color: #111;
    opacity: .20;
    transform: translate3d(0,0,0);
    font-family: 'Martian Mono Variable', 'Martian Mono', monospace;
    font-size: clamp(12px, .9vw, 15px);
    font-weight: 500;
    letter-spacing: .08em;
    transition: color .08s ease, opacity .04s ease;
    will-change: transform, opacity;
  }

  .index-page .index-link:hover span,
  .index-page .index-link:focus-visible span {
    color: #f4f1e7;
    opacity: 1;
    animation: index-kick-out .14s cubic-bezier(.18,.82,.22,1) both;
  }

  @keyframes index-kick-out {
    0%   { transform: translate3d(0,0,0); }
    46%  { transform: translate3d(-46px,0,0); }
    72%  { transform: translate3d(-31px,0,0); }
    100% { transform: translate3d(-38px,0,0); }
  }

  .index-page .from-diag span,
  .index-page .from-left span,
  .index-page .from-right span,
  .index-page .from-bottom span,
  .index-page .index-link:nth-child(5).from-bottom span {
    transform: translate3d(0,0,0);
  }
}


/* Mobile INDEX: reserve a clear footer zone while preserving full-size touch targets. */
@media (max-width: 760px) {
  .index-page .index-menu {
    top: max(6.5rem, calc(env(safe-area-inset-top) + 5.5rem));
    bottom: max(7.5rem, calc(env(safe-area-inset-bottom) + 6.5rem));
    right: max(8vw, env(safe-area-inset-right));
    width: 50vw;
    gap: clamp(.25rem, 1.2vh, .7rem);
    align-content: center;
    translate: 0 clamp(2.5rem, 8vh, 4.5rem);
  }
  .index-page .index-link { min-height: 44px; }
  .index-page .footer {
    bottom: max(.75rem, env(safe-area-inset-bottom));
    z-index: 25;
  }
}