:root {
  --cream: #fff1d8;
  --orange: #ff6f00;
  --ink: #4b2700;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  --bg-light: #fff;
  --bg-light2: #fbf9fa;
  --bg-sunset: #ffbd8d;
  --shadow-color: #c7c7c7;
  --shadow-transition: #e8e6e5a5;
  --loading-color: #d1d1d1;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  color: var(--orange);
  background: linear-gradient(85deg, var(--bg-light), var(--bg-light2));
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

button {
  font: inherit;
}

.sunlit-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.wrapper {
  background: linear-gradient(85deg, var(--bg-light), var(--bg-light2));
}

.container {
  position: fixed;
  width: 100vw;
  perspective: 50vw;
  transform: rotate(-20deg);
}

.container,
.sunset-container {
  transition: transform 1.2s ease-out;
}

.sunset-container {
  transform: rotate(-16deg) translateX(10vw);
}

.blur-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(85deg, var(--bg-light2), var(--bg-light2) 20%, transparent);
}

.shutters {
  display: flex;
  flex-direction: column;
  transform-style: preserve-3d;
  transition: transform 1.8s ease-in-out;
}

.shutters-turn > div {
  height: 20px;
  margin-top: 18px;
}

.progressive-blur {
  position: fixed;
  top: calc(50vh - 50vw);
  left: calc(50vw - 100vh);
  z-index: 5;
  width: 100vh;
  height: 100vw;
  margin: 0;
  pointer-events: none;
  transform: rotate(90deg);
}

.progressive-blur::before,
.progressive-blur::after,
.progressive-blur > div {
  position: fixed;
  inset: 0;
}

.progressive-blur::before {
  z-index: 1;
  content: "";
  backdrop-filter: blur(0.5px);
  -webkit-backdrop-filter: blur(0.5px);
  mask: linear-gradient(180deg, transparent 0, #000 12.5%, #000 25%, transparent 37.5%);
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 12.5%, #000 25%, transparent 37.5%);
}

.progressive-blur > div:first-of-type {
  z-index: 2;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  mask: linear-gradient(180deg, transparent 12.5%, #000 25%, #000 37.5%, transparent 50%);
  -webkit-mask: linear-gradient(180deg, transparent 12.5%, #000 25%, #000 37.5%, transparent 50%);
}

.progressive-blur > div:nth-of-type(2) {
  z-index: 3;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  mask: linear-gradient(180deg, transparent 25%, #000 37.5%, #000 50%, transparent 62.5%);
  -webkit-mask: linear-gradient(180deg, transparent 25%, #000 37.5%, #000 50%, transparent 62.5%);
}

.progressive-blur > div:nth-of-type(3) {
  z-index: 4;
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  mask: linear-gradient(180deg, transparent 37.5%, #000 50%, #000 62.5%, transparent 75%);
  -webkit-mask: linear-gradient(180deg, transparent 37.5%, #000 50%, #000 62.5%, transparent 75%);
}

.progressive-blur > div:nth-of-type(4) {
  z-index: 5;
  backdrop-filter: blur(100px);
  -webkit-backdrop-filter: blur(100px);
  mask: linear-gradient(180deg, transparent 50%, #000 62.5%, #000 75%, transparent 87.5%);
  -webkit-mask: linear-gradient(180deg, transparent 50%, #000 62.5%, #000 75%, transparent 87.5%);
}

.progressive-blur > div:nth-of-type(5) {
  z-index: 6;
  backdrop-filter: blur(100px);
  -webkit-backdrop-filter: blur(100px);
  mask: linear-gradient(180deg, transparent 62.5%, #000 75%, #000 87.5%, transparent);
  -webkit-mask: linear-gradient(180deg, transparent 62.5%, #000 75%, #000 87.5%, transparent);
}

.progressive-blur > div:nth-of-type(6) {
  z-index: 7;
  backdrop-filter: blur(100px);
  -webkit-backdrop-filter: blur(100px);
  mask: linear-gradient(180deg, transparent 75%, #000 87.5%, #000);
  -webkit-mask: linear-gradient(180deg, transparent 75%, #000 87.5%, #000);
}

.progressive-blur::after {
  z-index: 8;
  content: "";
  backdrop-filter: blur(100px);
  -webkit-backdrop-filter: blur(100px);
  mask: linear-gradient(180deg, transparent 87.5%, #000);
  -webkit-mask: linear-gradient(180deg, transparent 87.5%, #000);
}

.shutter {
  position: fixed;
  right: 0;
  width: 80vw;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 100vw solid var(--shadow-color);
  background: linear-gradient(200deg, var(--shadow-color), var(--shadow-transition) 30%, transparent), url("#noiseFilter");
  filter: blur(6px);
  transform: translate(12vw) rotateY(4deg);
  transition: top 0.5s ease-in-out, left 0.5s ease-in-out, height 0.5s ease-in-out;
}

.vertical-shutter {
  position: fixed;
  top: 0;
  right: 30vw;
  width: 24px;
  height: 100vh;
  background: var(--shadow-color);
  filter: blur(6px);
}

.leaf-wrapper {
  position: fixed;
  width: 100px;
}

.leaf-wrapper,
.leaf-wrapper > div {
  height: 100px;
  border-radius: 0 70px;
}

.leaf-wrapper > div {
  width: 100%;
  background: var(--shadow-color);
  animation: fall ease-in-out infinite;
}

.tree-leaf-wrapper {
  position: fixed;
  width: 100px;
  height: 100px;
}

.trees {
  opacity: 1;
  transition: opacity 1s ease-out;
}

.trees-hidden {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

.tree-leaf-wrapper > div {
  width: 100%;
  height: 100px;
  background: var(--shadow-color);
}

.leaf-1 {
  border-radius: 0 70px;
}

.leaf-2 {
  border-radius: 0 80px;
}

.leaf-3 {
  border-radius: 0 90px;
}

.leaf-4 {
  border-radius: 0 100px;
}

@keyframes fall {
  0% {
    opacity: 0;
    transform: translateY(0) translateX(0) scale(1) rotate(0deg);
  }
  20% {
    opacity: 0.8;
    transform: translateY(20vh) translateX(-50px) scale(1) rotate(45deg);
  }
  40% {
    opacity: 0.8;
    transform: translateY(40vh) translateX(50px) scale(1) rotate(-45deg);
  }
  100% {
    opacity: 0.8;
    transform: translateY(100vh) translateX(0) scale(1.2) rotate(180deg);
  }
}

.grain {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  filter: brightness(120%) sepia(50%);
}

.grain::before {
  position: fixed;
  top: -10rem;
  left: -10rem;
  width: calc(100% + 20rem);
  height: calc(100% + 20rem);
  content: "";
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/5c/Image_gaussian_noise_example.png");
  opacity: 0.12;
  pointer-events: none;
  animation: noise 1s steps(2) infinite;
}

@keyframes noise {
  0% {
    transform: translate3d(0, 2rem, 0);
  }
  10% {
    transform: translate3d(-1rem, -2rem, 0);
  }
  20% {
    transform: translate3d(-4rem, 1rem, 0);
  }
  30% {
    transform: translate3d(4.5rem, -4.5rem, 0);
  }
  40% {
    transform: translate3d(-1rem, 3.5rem, 0);
  }
  50% {
    transform: translate3d(-4.5rem, -2rem, 0);
  }
  60% {
    transform: translate3d(1rem, 3rem, 0);
  }
  70% {
    transform: translate3d(3.5rem, -4rem, 0);
  }
  80% {
    transform: translate3d(-4.5rem, 0.5rem, 0);
  }
  90% {
    transform: translate3d(3rem, -2.5rem, 0);
  }
  100% {
    transform: translate3d(-3.5rem, 0, 0);
  }
}

.sunset-toggle {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1000;
  padding: 10px;
  background-color: initial;
  border: none;
  transition: opacity 0.05s ease-out;
}

.sunset-toggle:hover {
  cursor: pointer;
  opacity: 0.6;
}

.sunset-toggle:focus {
  outline: none;
  box-shadow: none;
}

.sunset-toggle > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: 50%;
}

#sun {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='18' width='18' viewBox='0 0 207.628 207.628' xml:space='preserve'%3E%3Ccircle cx='103.814' cy='103.814' r='45.868'/%3E%3Cpath d='M103.814 157.183c-29.427 0-53.368-23.941-53.368-53.368s23.941-53.368 53.368-53.368 53.368 23.941 53.368 53.368-23.941 53.368-53.368 53.368zm0-91.737c-21.156 0-38.368 17.212-38.368 38.368s17.212 38.368 38.368 38.368 38.368-17.212 38.368-38.368-17.212-38.368-38.368-38.368zM103.814 39.385a7.5 7.5 0 0 1-7.5-7.5V7.5a7.5 7.5 0 0 1 15 0v24.385a7.5 7.5 0 0 1-7.5 7.5zM103.814 207.628a7.5 7.5 0 0 1-7.5-7.5v-24.385a7.5 7.5 0 0 1 15 0v24.385a7.5 7.5 0 0 1-7.5 7.5zM200.128 111.314h-24.385a7.5 7.5 0 0 1 0-15h24.385a7.5 7.5 0 0 1 0 15zM31.885 111.314H7.5a7.5 7.5 0 0 1 0-15h24.385a7.5 7.5 0 0 1 0 15zM154.676 60.452a7.474 7.474 0 0 1-5.303-2.197 7.5 7.5 0 0 1 0-10.606l17.243-17.242a7.498 7.498 0 0 1 10.606 0 7.5 7.5 0 0 1 0 10.606l-17.243 17.242a7.474 7.474 0 0 1-5.303 2.197zM35.709 179.419a7.474 7.474 0 0 1-5.303-2.197 7.5 7.5 0 0 1 0-10.606l17.243-17.243a7.5 7.5 0 0 1 10.606 0 7.5 7.5 0 0 1 0 10.606l-17.243 17.243a7.472 7.472 0 0 1-5.303 2.197zM171.918 179.419a7.474 7.474 0 0 1-5.303-2.197l-17.243-17.243a7.5 7.5 0 0 1 0-10.606 7.5 7.5 0 0 1 10.606 0l17.243 17.243a7.5 7.5 0 0 1 0 10.606 7.472 7.472 0 0 1-5.303 2.197zM52.952 60.452a7.474 7.474 0 0 1-5.303-2.197L30.406 41.013a7.5 7.5 0 0 1 0-10.606 7.498 7.498 0 0 1 10.606 0l17.243 17.242a7.5 7.5 0 0 1 0 10.606 7.472 7.472 0 0 1-5.303 2.197z'/%3E%3C/svg%3E");
}

.sun {
  opacity: 0.5 !important;
  transition: opacity 0.15s ease-out;
  transition-delay: 0.03s;
}

.sun-hidden {
  opacity: 0 !important;
  transition: opacity 0.05s ease-out;
}

#moon {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M17.39 15.14A7.33 7.33 0 0 1 11.75 1.6c.23-.11.56-.23.79-.34a8.19 8.19 0 0 0-5.41.45 9 9 0 1 0 7 16.58 8.42 8.42 0 0 0 4.29-3.84 5.3 5.3 0 0 1-1.03.69z'/%3E%3C/svg%3E");
}

.moon {
  opacity: 0.5 !important;
  transition: opacity 0.15s ease-out;
  transition-delay: 0.03s;
}

.moon-hidden {
  opacity: 0 !important;
  transition: opacity 0.05s ease-out;
}

.sunset-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 101;
  width: 100%;
  height: 100%;
  background-color: var(--bg-sunset);
  filter: brightness(1.02);
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 3s ease-in-out;
}

.sunset-show {
  opacity: 1;
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.loading-overlay-show {
  width: 100%;
  height: 100%;
  background: var(--loading-color);
  opacity: 1;
}

.radio-stage {
  position: relative;
  z-index: 20;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 34px 16px;
  font-family: "Courier Prime", "Courier New", monospace;
  pointer-events: none;
}

.radio-visual {
  position: relative;
  display: grid;
  width: min(600px, 100%);
  height: min(500px, 55vh);
  min-height: 310px;
  place-items: center;
  pointer-events: auto;
}

.art-button {
  position: relative;
  z-index: 2;
  display: grid;
  width: min(500px, 100%);
  height: 100%;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.radio-art {
  display: block;
  width: 100%;
  max-width: 500px;
  max-height: 100%;
  object-fit: contain;
  transform-origin: center;
  transition: transform 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55), filter 400ms ease;
}

.art-button:hover .radio-art {
  transform: scale(1.02);
}

.art-button:active .radio-art {
  transform: scale(0.98);
  transition-duration: 150ms;
}

.art-button:focus-visible {
  outline: 0;
}

.art-button:focus-visible .radio-art {
  filter: drop-shadow(0 0 10px rgba(255, 111, 0, 0.32));
}

.tower-video {
  position: absolute;
  top: -15%;
  left: 50%;
  z-index: 1;
  width: 40%;
  height: 40%;
  border-radius: 8px;
  object-fit: contain;
  opacity: 1;
  transform: translate(-50%, 0) translate(var(--video-x, 0), var(--video-y, 0)) scale(var(--video-scale, 1)) rotate(var(--video-rotate, 0deg));
  transform-origin: center center;
  transition: opacity 250ms ease, transform 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.radio-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  pointer-events: auto;
}

.play-button {
  --tx: 0px;
  --ty: 0px;
  --r: 0deg;
  --sx: 0deg;
  --s: 1;
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 52px;
  padding: 4px 8px 0 16px;
  color: var(--cream);
  background: var(--orange);
  border: 0;
  border-radius: 9999px;
  cursor: pointer;
  opacity: 1;
  transform: translateX(var(--tx)) translateY(var(--ty)) rotate(var(--r)) skewX(var(--sx)) scale(var(--s));
  transition: transform 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 200ms ease-in-out, background-color 200ms ease-in-out;
}

.play-button:hover {
  opacity: 0.82;
  transform: translateX(var(--tx)) translateY(var(--ty)) rotate(var(--r)) skewX(var(--sx)) scale(calc(var(--s) * 1.05));
}

.play-button:active {
  opacity: 1;
  transform: translateX(var(--tx)) translateY(var(--ty)) rotate(var(--r)) skewX(var(--sx)) scale(calc(var(--s) * 0.95));
  transition-duration: 100ms;
}

.play-button:focus-visible {
  outline: 2px solid rgba(255, 111, 0, 0.5);
  outline-offset: 6px;
}

.play-icon,
.equalizer {
  position: relative;
  bottom: 1px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
}

.play-icon {
  color: rgba(255, 241, 216, 0.85);
}

.play-icon path {
  fill: currentColor;
}

.equalizer {
  position: absolute;
  top: 50%;
  left: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 18px;
  gap: 1.7px;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 80ms ease-in-out;
}

.equalizer span {
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, #e13a6e, #f08736, #cbfd50, #7dece3, #5ba1f0);
  border-radius: 3px;
  animation: equalize 2s ease infinite alternate;
}

.equalizer span:nth-child(2) {
  animation-delay: -2.2s;
}

.equalizer span:nth-child(3) {
  animation-delay: -3.7s;
}

.equalizer span:nth-child(4) {
  animation-delay: -1.7s;
}

.equalizer span:nth-child(5) {
  animation-delay: -2.6s;
}

.equalizer span:nth-child(6) {
  animation-delay: -0.7s;
}

@keyframes equalize {
  10% {
    transform: scaleY(0.3);
  }
  30% {
    transform: scaleY(1);
  }
  60% {
    transform: scaleY(0.5);
  }
  80% {
    transform: scaleY(0.75);
  }
  100% {
    transform: scaleY(0.6);
  }
}

.play-button.is-playing .play-icon {
  opacity: 0;
}

.play-button.is-playing .equalizer {
  opacity: 1;
}

.button-label {
  display: inline-block;
  padding: 10px;
  color: var(--cream);
  font-size: 24px;
  font-weight: 700;
  line-height: 27px;
  white-space: nowrap;
  transform-origin: center center;
}

.listener-count {
  display: flex;
  align-items: center;
  min-height: 20px;
  gap: 6px;
  color: var(--orange);
  font-size: 20px;
  line-height: 1;
}

.listener-count path {
  fill: currentColor;
}

@media (max-width: 700px) {
  .radio-stage {
    gap: 20px;
    justify-content: center;
    padding: 28px 8px;
  }

  .radio-visual {
    width: 100%;
    height: min(100vw, 54vh);
    min-height: 280px;
  }

  .radio-art {
    max-width: 100%;
    max-height: min(100vw, 54vh);
  }

  .button-label {
    font-size: 22px;
    line-height: 25px;
  }
}

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