.hero {
  --sunset: 0;
  --night: 0;
  --day-progress: 0;
}
.hero-sticky {
  position: relative;
}
.hero.daylight-ready {
  height: 260svh;
}
.daylight-ready .hero-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
}
[data-theme="b"] .daylight-ready .hero-sticky {
  top: var(--nav-height);
  height: calc(100svh - var(--nav-height));
}
.daylight-ready .hero-visual {
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  flex: 1;
}
.hero-image {
  transform: none;
  transition: none;
}
.daylight-day {
  background-image: url("/assets/hero-alpha-day.webp");
  opacity: 1;
}
.daylight-sunset {
  background-image: url("/assets/hero-camping-alpha.webp");
  opacity: var(--sunset);
}
.daylight-night {
  background-image: url("/assets/hero-alpha-night.webp");
  opacity: var(--night);
}
[data-theme="a"] .daylight-ready .chapters {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, #061c18d9);
  padding-top: 38px;
}
.hero-bottom {
  bottom: 105px;
}
.scene-name {
  opacity: 1;
}
.daylight-controls {
  display: grid;
  grid-template-columns: auto 100px auto;
  align-items: center;
  gap: 18px;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.daylight-label {
  min-width: 90px;
  text-align: right;
}
.daylight-track {
  height: 1px;
  background: #ffffff55;
}
.daylight-track span {
  display: block;
  height: 1px;
  background: white;
  transform: scaleX(var(--day-progress));
  transform-origin: left;
}
.daylight-cue {
  white-space: nowrap;
}
.hero .cinematic-intro {
  text-shadow: 0 2px 24px #071e1540;
}
.product-picture.camping-unicorn {
  background-image: url("/assets/hero-camping-unicorn.webp");
}
.product-picture.camping-beta {
  background-image: url("/assets/hero-camping-beta.webp");
}
[data-theme="b"] .daylight-ready .hero-visual {
  max-width: none;
  margin-bottom: 24px;
}
[data-theme="b"] .hero-bottom {
  bottom: 28px;
}
@media (max-width: 700px), (max-width: 1000px) and (orientation: portrait) {
  .daylight-day {
    background-image: url("/assets/hero-alpha-day-mobile.webp");
  }
  .daylight-sunset {
    background-image: url("/assets/hero-camping-alpha-mobile.webp");
  }
  .daylight-night {
    background-image: url("/assets/hero-alpha-night-mobile.webp");
  }
}
@media (max-width: 700px) {
  .hero-bottom {
    bottom: 102px;
    justify-content: space-between;
    gap: 14px;
  }
  .hero-bottom .scene-name {
    display: none;
  }
  .daylight-controls {
    width: 100%;
    grid-template-columns: auto minmax(24px, 1fr) auto;
    gap: 12px;
    font-size: 9px;
  }
  .daylight-label {
    min-width: 0;
    text-align: left;
  }
  .cinematic-intro {
    top: 17%;
    bottom: auto;
  }
  .cinematic-intro .button {
    position: static;
    display: inline-flex;
    margin-top: 4px;
  }
  [data-theme="b"] .hero-bottom {
    bottom: 24px;
  }
  [data-theme="b"] .daylight-ready .hero-visual {
    margin-bottom: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .hero.daylight-ready {
    height: auto;
  }
  .daylight-ready .hero-sticky {
    position: relative;
    top: 0;
  }
  [data-theme="b"] .daylight-ready .hero-sticky {
    top: 0;
  }
  .daylight-cue {
    display: none;
  }
  .daylight-controls {
    display: block;
  }
  .daylight-track {
    display: none;
  }
}