.hero-section {
  display: flex;
  align-items: stretch;
  height: 100dvh;
  overflow: hidden;
}

.hero-season-image {
  flex: 0 0 25%;
  width: 25%;
  min-width: 0;
  height: 100%;
  display: block;
  transition: flex-basis 1.05s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: flex-basis;
}

.hero-section.is-season-focused .hero-season-image {
  flex-basis: 20%;
}

.hero-section.is-season-focused .hero-season-image.is-current-season {
  flex-basis: 40%;
}

.hero-text-container {
  opacity: 0;
  transform: translate(-50%, calc(-50% + 48px));
  transition:
    opacity 1.5s ease-out,
    transform 2s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

.hero-text-container.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.hero-text-container .main-button {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.8s ease-out 0.25s,
    transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
  will-change: transform, opacity;
}

.hero-text-container.is-visible .main-button {
  opacity: 1;
  transform: translateY(0);
}

.section-animate {
  opacity: 0;
  transform: translateY(56px);
  transition:
    opacity 1s ease-out,
    transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

.section-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.season-devider-section {
  transform: translateX(-50%);
  opacity: 0;
  transition:
    transform 2s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 1.8s ease-out;
  will-change: transform, opacity;
}

.season-devider-section.is-visible {
  transform: translateX(0);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hero-season-image {
    flex-basis: 25%;
    transition: none;
  }

  .hero-text-container {
    opacity: 1;
    transform: translate(-50%, -50%);
    transition: none;
  }

  .hero-text-container .main-button {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .section-animate {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .season-devider-section {
    transform: none;
    opacity: 1;
    transition: none;
  }
}