/* Keep the header aligned when the event-specific button label changes. */
.gnav .gnav-cta { min-width: 160px; }

/* Keep all three event links on one row on phones. */
@media (max-width: 699px) {
  .ticket-events { gap: 4px; padding: 10px; }
  .ticket-events a {
    min-width: 0;
    padding: 10px 4px;
    font-size: clamp(11px, 3.2vw, 15px);
    white-space: nowrap;
  }
}

/* Only the ticket pages opt into this cross-document transition. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  .gnav { view-transition-name: ticket-site-nav; }
  .ticket-events { view-transition-name: ticket-event-tabs; }

  ::view-transition { pointer-events: none; }

  ::view-transition-old(root) {
    animation: ticket-scene-out .5s ease both;
  }
  ::view-transition-new(root) {
    animation: ticket-scene-in .6s cubic-bezier(.22,.61,.36,1) both;
  }
  ::view-transition-group(ticket-site-nav),
  ::view-transition-old(ticket-site-nav),
  ::view-transition-new(ticket-site-nav) {
    animation: none;
  }
  ::view-transition-group(ticket-event-tabs),
  ::view-transition-old(ticket-event-tabs),
  ::view-transition-new(ticket-event-tabs) {
    animation-duration: .4s;
    animation-timing-function: ease;
  }
}

@keyframes ticket-scene-out {
  to { opacity: 0; }
}
@keyframes ticket-scene-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}