/* Transform/opacity-only cinematic transitions and modal layer. */
body.is-transitioning {
      overflow: hidden;
    }

    body.is-transitioning .gateway-panel {
      pointer-events: none;
    }

    body.is-transitioning .gateway-panel:not(.panel-selected) {
      opacity: 0;
      transform: translateX(var(--exit-x, 0)) scale(0.96);
      transition:
        opacity 0.58s cubic-bezier(0.77, 0, 0.175, 1),
        transform 0.78s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  color: var(--ivory-soft);
  background-image:
    linear-gradient(rgba(28, 23, 18, 0.48), rgba(28, 23, 18, 0.74)),
    var(--overlay-bg);
  background-size: cover;
  background-position: center;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(var(--overlay-x, 0), var(--overlay-y, 0), 0) scale(var(--overlay-scale-x, 1), var(--overlay-scale-y, 1));
  transform-origin: top left;
  will-change: transform, opacity;
  transition:
    transform 980ms cubic-bezier(0.77, 0, 0.175, 1),
    opacity 260ms ease;
}

.transition-overlay::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 50% 42%, rgba(214, 181, 106, 0.18), transparent 28%),
        linear-gradient(90deg, rgba(14, 12, 10, 0.5), transparent 42%, rgba(14, 12, 10, 0.48));
      opacity: 0;
      transition: opacity 0.7s ease;
    }

    .transition-overlay::after {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(20, 17, 14, 0.28);
    }

    .transition-overlay.overlay-active {
      opacity: 1;
    }

    .transition-overlay.overlay-expanded {
  transform: translate3d(0, 0, 0) scale(1, 1);
}

    .transition-overlay.overlay-expanded::before {
      opacity: 1;
    }

    .transition-overlay.overlay-fading {
      opacity: 0;
      transition: opacity 0.48s ease;
    }

    .transition-content {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: grid;
      place-items: center;
      padding: 28px;
      text-align: center;
      opacity: 0;
      transform: translateY(18px);
      transition:
        opacity 0.5s ease 0.35s,
        transform 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0.35s;
    }

    .transition-overlay.overlay-expanded .transition-content {
      opacity: 1;
      transform: translateY(0);
    }

    .transition-content span {
      display: block;
      color: var(--champagne);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.24em;
      text-transform: uppercase;
    }

    .transition-content strong {
      display: block;
      margin-top: 12px;
      font-family: var(--heading);
      font-size: clamp(42px, 7vw, 96px);
      font-weight: 600;
      line-height: 0.94;
    }

    .transition-line {
      display: block;
      width: min(230px, 52vw);
      height: 1px;
      margin: 24px auto 0;
      overflow: hidden;
      background: rgba(255, 251, 243, 0.18);
    }

    .transition-line::after {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, var(--champagne), transparent);
      transform: translateX(-105%);
    }

    .transition-overlay.overlay-expanded .transition-line::after {
      animation: goldLine 0.86s cubic-bezier(0.77, 0, 0.175, 1) 0.42s forwards;
    }

    @keyframes goldLine {
      to { transform: translateX(105%); }
    }

    .modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  place-items: center;
  padding: 28px;
  color: var(--ivory-soft);
  background: rgba(20,17,14,0.86);
}

.modal.open { display: grid; }

    .modal-panel {
      position: relative;
      width: min(1040px, 100%);
      min-height: min(72vh, 680px);
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.18);
      background:
        linear-gradient(90deg, rgba(28,24,20,0.96) 0 36%, rgba(28,24,20,0.54)),
        var(--image) center / cover;
      box-shadow: 0 24px 70px rgba(0,0,0,0.3);
    }

    .modal-copy {
      max-width: 460px;
      padding: clamp(34px, 6vw, 74px);
    }

    .modal-copy h3 {
      margin: 10px 0 16px;
      font-family: var(--heading);
      font-size: clamp(44px, 6vw, 78px);
      font-weight: 600;
      line-height: 0.92;
    }

    .modal-copy p {
      color: rgba(255,251,243,0.76);
      line-height: 1.8;
    }

    .modal-close {
      position: absolute;
      top: 18px;
      right: 18px;
      width: 44px;
      height: 44px;
      color: var(--ivory-soft);
      background: rgba(255,255,255,0.1);
      border-color: rgba(255,255,255,0.24);
      font-size: 22px;
    }