/* Booking call-to-action band with the animated spectrum. */

.band-wrap {
  margin-top: clamp(40px, 6vw, 72px);
}

.band {
  background: linear-gradient(120deg, var(--secondary-color), var(--secondary-deep));
  border-radius: var(--radius-lg);
  padding: clamp(28px, 5vw, 64px);
  position: relative;
  overflow: hidden;

  & h2 {
    max-width: 18ch;
  }

  & .eyebrow {
    color: var(--text-color);
  }

  & .btn {
    background: var(--text-color);
    border-color: var(--text-color);

    &:hover {
      background: var(--accent-hi);
      border-color: var(--accent-hi);
    }
  }
}

.band__text {
  max-width: 52ch;
  color: var(--text-soft);
}

.spectrum {
  position: absolute;
  right: clamp(16px, 4vw, 48px);
  bottom: 0;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 70%;
  opacity: 0.18;
  pointer-events: none;

  & i {
    width: clamp(5px, 0.8vw, 10px);
    background: var(--accent-hi);
    border-radius: 2px 2px 0 0;
    height: calc(var(--h) * 1%);
    transform-origin: bottom;
    animation: bars 2.4s ease-in-out infinite alternate;
    animation-delay: calc(var(--d) * -1s);
  }
}

@media (min-width: 640px) {
  .spectrum {
    opacity: 0.35;
  }
}

@keyframes bars {
  0% {
    transform: scaleY(0.35);
  }
  50% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spectrum i {
    animation: none;
    transform: scaleY(0.7);
  }
}