:root {
  color-scheme: light;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", SimSun, serif;
  background: #f7f7f5;
  color: #171713;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #f7f7f5;
}

button { font: inherit; }

.season-stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  isolation: isolate;
  overflow: hidden;
  background: #f7f7f5;
}

.artboard {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(100vw, calc(100vh * 16 / 9));
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.scene-stack,
.scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.scene-stack {
  isolation: isolate;
}

.scene {
  z-index: 1;
  object-fit: contain;
  object-position: center;
  opacity: 0;
  transform: scale(1.012);
  filter: saturate(0.92) contrast(0.98);
  transition:
    opacity 720ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 1400ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 720ms ease;
  pointer-events: none;
}

.spring-motion {
  z-index: 2;
}

.scene.is-active {
  opacity: 1;
  transform: scale(1);
  filter: saturate(1) contrast(1);
}

.scene[data-scene="spring"],
.spring-motion {
  transform: scale(1);
  transition: none;
}

.spring-video-ui {
  position: absolute;
  z-index: 3;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: none;
}

.spring-video-ui.is-active {
  opacity: 1;
}

.spring-video-logo {
  left: 6.5%;
  top: 3.4%;
  width: 15%;
  height: auto;
}

.spring-video-bottom {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0 59%, rgba(0, 0, 0, .2) 62%, #000 66% 100%);
  mask-image: linear-gradient(to bottom, transparent 0 59%, rgba(0, 0, 0, .2) 62%, #000 66% 100%);
}

.season-nav {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  height: 35%;
  display: grid;
  grid-template-columns: 24% 28% 25% 23%;
}

.season-link {
  --glow: 221, 227, 174;
  position: relative;
  display: block;
  min-width: 0;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: #1e211b;
  background: transparent;
  outline: none;
}

.season-link:nth-child(2) { --glow: 222, 201, 129; }
.season-link:nth-child(3) { --glow: 216, 123, 60; }
.season-link:nth-child(4) { --glow: 180, 216, 230; }

.season-halo {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 76%;
  height: 70%;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.78);
  background: radial-gradient(ellipse at center, rgba(var(--glow), 0.58) 0%, rgba(var(--glow), 0.24) 36%, rgba(var(--glow), 0.05) 62%, transparent 76%);
  filter: blur(18px);
  mix-blend-mode: screen;
  transition: opacity 360ms ease, transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.season-link:hover .season-halo,
.season-link:focus-visible .season-halo,
.season-link.is-active .season-halo {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.season-link:focus-visible {
  outline: 1px solid rgba(110, 84, 45, 0.7);
  outline-offset: -8px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}