/* Guide guests forward by emphasizing only the next ceremony date. */
.event-tabs button.is-next {
  opacity: .9;
}

.event-tabs button.is-next span {
  width: max-content;
  transform-origin: left center;
  color: #f6d48b;
  font-size: clamp(2.55rem, 3.3vw, 3.1rem);
  font-weight: 700;
  animation: next-event-date-pulse 1.45s ease-in-out infinite;
}

@keyframes next-event-date-pulse {
  0%, 100% {
    opacity: .55;
    transform: scale(1);
    text-shadow: 0 0 0 rgba(246, 212, 139, 0);
  }

  50% {
    opacity: 1;
    transform: scale(1.14);
    text-shadow: 0 0 1rem rgba(246, 212, 139, .9);
  }
}

.event-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: .25rem;
  padding: 1.35rem 0 0;
  border-top: 1px solid #17291f25;
}

.event-next[hidden] {
  display: none;
}

.event-next-copy {
  display: grid;
  gap: .25rem;
}

.event-next-copy > span {
  color: #6d756e;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.event-next-copy strong {
  color: var(--ink);
  font: 400 1.7rem/1.1 Italiana, serif;
}

.event-next-button {
  min-height: 3rem;
  flex: 0 0 auto;
  border: 1px solid var(--ink);
  border-radius: 99px;
  padding: .9rem 1.15rem;
  background: var(--forest);
  color: var(--ivory);
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  transition: background .25s, color .25s, transform .25s;
  animation: next-event-button-pulse 1.4s ease-in-out infinite;
}

@keyframes next-event-button-pulse {
  0%, 100% {
    background: var(--forest);
    color: var(--ivory);
    box-shadow: 0 0 0 0 rgba(217, 162, 75, 0);
    transform: scale(1);
  }

  50% {
    background: var(--saffron);
    color: var(--forest);
    box-shadow: 0 0 0 7px rgba(217, 162, 75, .2), 0 8px 22px rgba(23, 41, 31, .18);
    transform: scale(1.035);
  }
}

.event-next-button span {
  margin-left: .65rem;
}

.event-next-button:hover,
.event-next-button:focus-visible {
  background: var(--saffron);
  color: var(--forest);
  transform: translateY(-2px);
  animation-play-state: paused;
}

@media (max-width: 760px) {
  .event-next {
    align-items: stretch;
    flex-direction: column;
    gap: 1rem;
    margin-top: .5rem;
    padding-top: 1.5rem;
  }

  .event-next-copy strong {
    font-size: 2rem;
  }

  .event-next-button {
    width: 100%;
    min-height: 3.4rem;
    font-size: .72rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .event-tabs button.is-next span {
    opacity: 1;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: .3rem;
  }

  .event-next-button {
    animation: none;
    background: var(--saffron);
    color: var(--forest);
    box-shadow: 0 0 0 4px rgba(217, 162, 75, .2);
  }
}