#preloader {
  position: fixed;
  z-index: 99999;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100vh;
  background-color: var(--secondary);
  display: grid;
  place-items: center;
  overflow: hidden;
  animation: slideUp 0.75s cubic-bezier(0.31, 1, 1, 1) 2.3s forwards reverse;
}
#preloader #purple {
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 0%;
  background-color: var(--tertiary);
  display: grid;
  place-items: center;
  overflow: hidden;
  animation: slideUp 1s cubic-bezier(0, 0, 0.31, 1) 0.5s forwards;
}
#preloader #purple #preloader-logo {
  width: 90%;
  max-width: 180px;
  aspect-ratio: 200/145;
  mask-image: url("/wp-content/uploads/2025/07/electronic-nature-logo-white.png");
  mask-size: cover;
  mask-position: center;
  background-image: linear-gradient(0deg, var(--primary) 0%, var(--primary) 50%, color-mix(in hsl, black 30%, transparent 70%) 50%);
  background-position: 50% 0%;
  background-size: 200% 200%;
  background-repeat: no-repeat;
  animation: colourSwipe 0.5s cubic-bezier(0.48, 0.49, 0.02, 1) 1.65s forwards;
}
@keyframes slideUp {
  0% {
    height: 0%;
  }
  100% {
    height: 100vh;
  }
}
@keyframes colourSwipe {
  0% {
    background-position: 50% 0%;
  }
  100% {
    background-position: 50% 100%;
  }
}

#home-link::after {
  width: 100%;
}

body {
  background-color: var(--tertiary);
  margin-bottom: 0px;
  padding-top: 0px;
}

#hero {
  padding: 0px;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
#hero #hero-background {
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(135deg, var(--tertiary), var(--secondary));
  filter: blur(10px) brightness(0.75);
}
#hero #hero-background .image {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 4s ease-out;
}
#hero #hero-background .image.active {
  opacity: 1;
}
#hero #hero-carousel {
  --carousel-width: 100%;
  --slide-container-width: 100%;
  --slide-width: 100%;
  --slide-height: 100%;
  --slide-gap: 0px;
  --button-size: 15px;
  height: var(--slide-height);
  z-index: 2;
}
#hero #hero-carousel .carousel-container {
  height: var(--slide-height);
}
#hero #hero-carousel .carousel-container .slide {
  display: grid;
  place-items: center;
  translate: 0px !important;
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}
#hero #hero-carousel .carousel-container .slide .background-image {
  position: absolute;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  width: 0px;
  height: 0px;
  overflow: hidden;
}
#hero #hero-carousel .carousel-container .slide.en-release .columns, #hero #hero-carousel .carousel-container .slide.er-release .columns, #hero #hero-carousel .carousel-container .slide.playlist .columns, #hero #hero-carousel .carousel-container .slide.post .columns {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 130vh;
  padding: 0px var(--gutter);
  display: grid;
  place-content: center;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--xs) + var(--xl));
}
#hero #hero-carousel .carousel-container .slide.en-release .columns .packshot, #hero #hero-carousel .carousel-container .slide.er-release .columns .packshot, #hero #hero-carousel .carousel-container .slide.playlist .columns .packshot, #hero #hero-carousel .carousel-container .slide.post .columns .packshot {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  background-color: var(--tertiary);
  background-image: linear-gradient(135deg, var(--tertiary), var(--secondary));
  display: block;
  --x: 0px;
  --y: 0px;
  box-shadow: rgba(0, 0, 0, 0.5) var(--x) var(--y) 25px;
  overflow: hidden;
  opacity: 0;
  translate: 0% 0%;
  transition: opacity 1s ease-in-out, translate 1s ease-in-out;
}
#hero #hero-carousel .carousel-container .slide.en-release .columns .packshot img, #hero #hero-carousel .carousel-container .slide.er-release .columns .packshot img, #hero #hero-carousel .carousel-container .slide.playlist .columns .packshot img, #hero #hero-carousel .carousel-container .slide.post .columns .packshot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transition: transform 0.3s ease-out;
}
#hero #hero-carousel .carousel-container .slide.en-release .columns .packshot:hover img, #hero #hero-carousel .carousel-container .slide.er-release .columns .packshot:hover img, #hero #hero-carousel .carousel-container .slide.playlist .columns .packshot:hover img, #hero #hero-carousel .carousel-container .slide.post .columns .packshot:hover img {
  transform: scale(1.01);
}
#hero #hero-carousel .carousel-container .slide.en-release .columns .content, #hero #hero-carousel .carousel-container .slide.er-release .columns .content, #hero #hero-carousel .carousel-container .slide.playlist .columns .content, #hero #hero-carousel .carousel-container .slide.post .columns .content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  gap: var(--s);
  opacity: 0;
  transform: translateX(0%);
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}
#hero #hero-carousel .carousel-container .slide.en-release .columns .content .heading, #hero #hero-carousel .carousel-container .slide.er-release .columns .content .heading, #hero #hero-carousel .carousel-container .slide.playlist .columns .content .heading, #hero #hero-carousel .carousel-container .slide.post .columns .content .heading {
  position: relative;
  mix-blend-mode: unset;
  margin-bottom: 0px;
}
#hero #hero-carousel .carousel-container .slide.en-release .columns .content .track-info, #hero #hero-carousel .carousel-container .slide.er-release .columns .content .track-info, #hero #hero-carousel .carousel-container .slide.playlist .columns .content .track-info, #hero #hero-carousel .carousel-container .slide.post .columns .content .track-info {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  font-size: 16px;
  gap: 0.5em;
}
#hero #hero-carousel .carousel-container .slide.en-release .columns .content .track-info p, #hero #hero-carousel .carousel-container .slide.er-release .columns .content .track-info p, #hero #hero-carousel .carousel-container .slide.playlist .columns .content .track-info p, #hero #hero-carousel .carousel-container .slide.post .columns .content .track-info p {
  font-size: 1em;
  color: var(--primary);
  text-align: left;
}
@media (min-width: 2000px) {
  #hero #hero-carousel .carousel-container .slide.en-release .columns .content .track-info p, #hero #hero-carousel .carousel-container .slide.er-release .columns .content .track-info p, #hero #hero-carousel .carousel-container .slide.playlist .columns .content .track-info p, #hero #hero-carousel .carousel-container .slide.post .columns .content .track-info p {
    font-size: 1.15vw;
  }
}
#hero #hero-carousel .carousel-container .slide.en-release .columns .content .tag-line, #hero #hero-carousel .carousel-container .slide.er-release .columns .content .tag-line, #hero #hero-carousel .carousel-container .slide.playlist .columns .content .tag-line, #hero #hero-carousel .carousel-container .slide.post .columns .content .tag-line {
  color: var(--primary);
  text-align: left;
}
#hero #hero-carousel .carousel-container .slide.en-release .columns:has(.packshot:hover) .packshot img, #hero #hero-carousel .carousel-container .slide.en-release .columns:has(.button1:hover) .packshot img, #hero #hero-carousel .carousel-container .slide.en-release .columns:has(.button2:hover) .packshot img, #hero #hero-carousel .carousel-container .slide.er-release .columns:has(.packshot:hover) .packshot img, #hero #hero-carousel .carousel-container .slide.er-release .columns:has(.button1:hover) .packshot img, #hero #hero-carousel .carousel-container .slide.er-release .columns:has(.button2:hover) .packshot img, #hero #hero-carousel .carousel-container .slide.playlist .columns:has(.packshot:hover) .packshot img, #hero #hero-carousel .carousel-container .slide.playlist .columns:has(.button1:hover) .packshot img, #hero #hero-carousel .carousel-container .slide.playlist .columns:has(.button2:hover) .packshot img, #hero #hero-carousel .carousel-container .slide.post .columns:has(.packshot:hover) .packshot img, #hero #hero-carousel .carousel-container .slide.post .columns:has(.button1:hover) .packshot img, #hero #hero-carousel .carousel-container .slide.post .columns:has(.button2:hover) .packshot img {
  transform: scale(1.01);
}
#hero #hero-carousel .carousel-container .slide.en-release .columns:has(.packshot:hover) .content .button1 .label p,
#hero #hero-carousel .carousel-container .slide.en-release .columns:has(.packshot:hover) .content .button2 .label p, #hero #hero-carousel .carousel-container .slide.en-release .columns:has(.button1:hover) .content .button1 .label p,
#hero #hero-carousel .carousel-container .slide.en-release .columns:has(.button1:hover) .content .button2 .label p, #hero #hero-carousel .carousel-container .slide.en-release .columns:has(.button2:hover) .content .button1 .label p,
#hero #hero-carousel .carousel-container .slide.en-release .columns:has(.button2:hover) .content .button2 .label p, #hero #hero-carousel .carousel-container .slide.er-release .columns:has(.packshot:hover) .content .button1 .label p,
#hero #hero-carousel .carousel-container .slide.er-release .columns:has(.packshot:hover) .content .button2 .label p, #hero #hero-carousel .carousel-container .slide.er-release .columns:has(.button1:hover) .content .button1 .label p,
#hero #hero-carousel .carousel-container .slide.er-release .columns:has(.button1:hover) .content .button2 .label p, #hero #hero-carousel .carousel-container .slide.er-release .columns:has(.button2:hover) .content .button1 .label p,
#hero #hero-carousel .carousel-container .slide.er-release .columns:has(.button2:hover) .content .button2 .label p, #hero #hero-carousel .carousel-container .slide.playlist .columns:has(.packshot:hover) .content .button1 .label p,
#hero #hero-carousel .carousel-container .slide.playlist .columns:has(.packshot:hover) .content .button2 .label p, #hero #hero-carousel .carousel-container .slide.playlist .columns:has(.button1:hover) .content .button1 .label p,
#hero #hero-carousel .carousel-container .slide.playlist .columns:has(.button1:hover) .content .button2 .label p, #hero #hero-carousel .carousel-container .slide.playlist .columns:has(.button2:hover) .content .button1 .label p,
#hero #hero-carousel .carousel-container .slide.playlist .columns:has(.button2:hover) .content .button2 .label p, #hero #hero-carousel .carousel-container .slide.post .columns:has(.packshot:hover) .content .button1 .label p,
#hero #hero-carousel .carousel-container .slide.post .columns:has(.packshot:hover) .content .button2 .label p, #hero #hero-carousel .carousel-container .slide.post .columns:has(.button1:hover) .content .button1 .label p,
#hero #hero-carousel .carousel-container .slide.post .columns:has(.button1:hover) .content .button2 .label p, #hero #hero-carousel .carousel-container .slide.post .columns:has(.button2:hover) .content .button1 .label p,
#hero #hero-carousel .carousel-container .slide.post .columns:has(.button2:hover) .content .button2 .label p {
  transform: translateY(100%);
}
#hero #hero-carousel .carousel-container .slide.en-release .columns:has(.packshot:hover) .content .button1 .arrow,
#hero #hero-carousel .carousel-container .slide.en-release .columns:has(.packshot:hover) .content .button2 .arrow, #hero #hero-carousel .carousel-container .slide.en-release .columns:has(.button1:hover) .content .button1 .arrow,
#hero #hero-carousel .carousel-container .slide.en-release .columns:has(.button1:hover) .content .button2 .arrow, #hero #hero-carousel .carousel-container .slide.en-release .columns:has(.button2:hover) .content .button1 .arrow,
#hero #hero-carousel .carousel-container .slide.en-release .columns:has(.button2:hover) .content .button2 .arrow, #hero #hero-carousel .carousel-container .slide.er-release .columns:has(.packshot:hover) .content .button1 .arrow,
#hero #hero-carousel .carousel-container .slide.er-release .columns:has(.packshot:hover) .content .button2 .arrow, #hero #hero-carousel .carousel-container .slide.er-release .columns:has(.button1:hover) .content .button1 .arrow,
#hero #hero-carousel .carousel-container .slide.er-release .columns:has(.button1:hover) .content .button2 .arrow, #hero #hero-carousel .carousel-container .slide.er-release .columns:has(.button2:hover) .content .button1 .arrow,
#hero #hero-carousel .carousel-container .slide.er-release .columns:has(.button2:hover) .content .button2 .arrow, #hero #hero-carousel .carousel-container .slide.playlist .columns:has(.packshot:hover) .content .button1 .arrow,
#hero #hero-carousel .carousel-container .slide.playlist .columns:has(.packshot:hover) .content .button2 .arrow, #hero #hero-carousel .carousel-container .slide.playlist .columns:has(.button1:hover) .content .button1 .arrow,
#hero #hero-carousel .carousel-container .slide.playlist .columns:has(.button1:hover) .content .button2 .arrow, #hero #hero-carousel .carousel-container .slide.playlist .columns:has(.button2:hover) .content .button1 .arrow,
#hero #hero-carousel .carousel-container .slide.playlist .columns:has(.button2:hover) .content .button2 .arrow, #hero #hero-carousel .carousel-container .slide.post .columns:has(.packshot:hover) .content .button1 .arrow,
#hero #hero-carousel .carousel-container .slide.post .columns:has(.packshot:hover) .content .button2 .arrow, #hero #hero-carousel .carousel-container .slide.post .columns:has(.button1:hover) .content .button1 .arrow,
#hero #hero-carousel .carousel-container .slide.post .columns:has(.button1:hover) .content .button2 .arrow, #hero #hero-carousel .carousel-container .slide.post .columns:has(.button2:hover) .content .button1 .arrow,
#hero #hero-carousel .carousel-container .slide.post .columns:has(.button2:hover) .content .button2 .arrow {
  animation: bounce 0.3s ease-in-out infinite alternate;
}
#hero #hero-carousel .carousel-container .slide.image {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--s);
}
#hero #hero-carousel .carousel-container .slide.image .heading {
  position: relative;
  mix-blend-mode: unset;
  font-size: 30px;
  margin-bottom: 0px;
  padding: 0px;
  max-width: 95%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2em 0px;
  background: transparent;
  justify-content: center;
  opacity: 0;
  transform: translateX(0%);
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}
#hero #hero-carousel .carousel-container .slide.image .heading span {
  font-size: inherit;
  padding: 0.15em 0.2em;
  background-color: var(--primary);
}
@media (max-width: 550px) {
  #hero #hero-carousel .carousel-container .slide.image .heading {
    font-size: 20px;
  }
}
#hero #hero-carousel .carousel-container .slide.image .button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(var(--s) / 2);
  flex-wrap: wrap;
  opacity: 0;
  transform: translateX(0%);
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}
@media (max-width: 550px) {
  #hero #hero-carousel .carousel-container .slide.image .button-container .button1 {
    font-size: 14px;
  }
}
#hero #hero-carousel .carousel-container .slide.active {
  opacity: 1;
  pointer-events: all;
  z-index: 3;
}
#hero #hero-carousel .carousel-container .slide.active .columns .packshot {
  opacity: 1;
  transition-delay: 1.15s;
  transition-timing-function: cubic-bezier(0, 0, 0.65, 1);
}
#hero #hero-carousel .carousel-container .slide.active .columns .content {
  opacity: 1;
  transition-delay: 1.15s;
  transition-timing-function: cubic-bezier(0, 0, 0.65, 1);
}
#hero #hero-carousel .carousel-container .slide.active.image .heading,
#hero #hero-carousel .carousel-container .slide.active.image .button-container {
  opacity: 1;
  transition-delay: 1.15s;
  transition-timing-function: cubic-bezier(0, 0, 0.65, 1);
}
#hero #hero-carousel .carousel-container .slide.prev {
  opacity: 1;
  pointer-events: none;
  z-index: 2;
}
#hero #hero-carousel .carousel-container .slide.prev .columns .packshot {
  opacity: 0;
  translate: -100% 0%;
  transition-timing-function: cubic-bezier(0.35, 0, 1, 1);
}
#hero #hero-carousel .carousel-container .slide.prev .columns .content {
  opacity: 0;
  transform: translateX(-100%);
  transition-timing-function: cubic-bezier(0.35, 0, 1, 1);
}
#hero #hero-carousel .carousel-container .slide.prev.image .heading,
#hero #hero-carousel .carousel-container .slide.prev.image .button-container {
  opacity: 0;
  transform: translateX(-50vw);
  transition-timing-function: cubic-bezier(0.35, 0, 1, 1);
}
#hero #hero-carousel .carousel-container .slide.next {
  opacity: 1;
  pointer-events: none;
  z-index: 4;
}
#hero #hero-carousel .carousel-container .slide.next .columns .packshot {
  opacity: 0;
  translate: 100% 0%;
}
#hero #hero-carousel .carousel-container .slide.next .columns .content {
  opacity: 0;
  transform: translateX(100%);
}
#hero #hero-carousel .carousel-container .slide.next.image .heading,
#hero #hero-carousel .carousel-container .slide.next.image .button-container {
  opacity: 0;
  transform: translateX(50vw);
}
@media (max-width: 550px) {
  #hero #hero-carousel .carousel-container .slide.music-release .columns, #hero #hero-carousel .carousel-container .slide.playlist .columns, #hero #hero-carousel .carousel-container .slide.post .columns {
    grid-template-columns: 1fr;
    place-items: center;
    max-width: 40vh;
    gap: var(--s);
  }
  #hero #hero-carousel .carousel-container .slide.music-release .columns .content .heading, #hero #hero-carousel .carousel-container .slide.playlist .columns .content .heading, #hero #hero-carousel .carousel-container .slide.post .columns .content .heading {
    font-size: 20px;
  }
  #hero #hero-carousel .carousel-container .slide.music-release .columns .content .track-info,
  #hero #hero-carousel .carousel-container .slide.music-release .columns .content .tag-line, #hero #hero-carousel .carousel-container .slide.playlist .columns .content .track-info,
  #hero #hero-carousel .carousel-container .slide.playlist .columns .content .tag-line, #hero #hero-carousel .carousel-container .slide.post .columns .content .track-info,
  #hero #hero-carousel .carousel-container .slide.post .columns .content .tag-line {
    font-size: 14px;
  }
  #hero #hero-carousel .carousel-container .slide.music-release .columns .content .button1, #hero #hero-carousel .carousel-container .slide.playlist .columns .content .button1, #hero #hero-carousel .carousel-container .slide.post .columns .content .button1 {
    font-size: 12px;
  }
  #hero #hero-carousel .carousel-container .slide.prev .columns .content {
    transform: translateX(-35%);
  }
  #hero #hero-carousel .carousel-container .slide.next .columns .content {
    transform: translateX(50%);
  }
}
#hero #hero-carousel .carousel-controls-container {
  padding: 0px var(--gutter);
  position: absolute;
  z-index: 2;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}
#hero #hero-carousel .carousel-controls-container .body-width .carousel-controls .prev,
#hero #hero-carousel .carousel-controls-container .body-width .carousel-controls .next {
  color: var(--primary);
}

#latest-releases {
  background-color: var(--secondary);
}
#latest-releases .body-width #latest-releases-carousel {
  --carousel-width: 100%;
  --slide-container-width: 100%;
  --slide-count: 3;
  --gap-count: calc(var(--slide-count) - 1);
  --slide-width: calc((100% - (var(--slide-gap) * var(--gap-count))) / var(--slide-count));
  --slide-height: auto;
  --slide-gap: var(--xl);
  --button-size: 15px;
  margin-top: var(--l);
}
#latest-releases .body-width #latest-releases-carousel .carousel-container .slide {
  transition-duration: 1s;
}
#latest-releases .body-width #latest-releases-carousel .carousel-container .slide .info {
  color: var(--primary);
}
#latest-releases .body-width #latest-releases-carousel .carousel-container .slide .info .heading {
  color: var(--secondary);
  margin-top: 0.3em;
  text-transform: uppercase;
  font-size: 12px;
}
@media (max-width: 550px) {
  #latest-releases .body-width #latest-releases-carousel .carousel-container .slide .info .heading {
    font-size: 10px;
  }
}
#latest-releases .body-width #latest-releases-carousel .carousel-container .slide.prev {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10%);
}
#latest-releases .body-width #latest-releases-carousel .carousel-container .slide.next + .slide + .slide {
  transform: translateY(10%);
}
@media (max-width: 1024px) {
  #latest-releases .body-width #latest-releases-carousel {
    --slide-count: 2;
  }
  #latest-releases .body-width #latest-releases-carousel .carousel-container .slide.next + .slide {
    transform: translateY(10%);
  }
}
@media (max-width: 550px) {
  #latest-releases .body-width #latest-releases-carousel {
    --slide-width: 100%;
  }
  #latest-releases .body-width #latest-releases-carousel .carousel-container .slide.next + .slide + .slide, #latest-releases .body-width #latest-releases-carousel .carousel-container .slide.next + .slide, #latest-releases .body-width #latest-releases-carousel .carousel-container .slide.prev {
    transform: translateY(0%);
  }
  #latest-releases .body-width #latest-releases-carousel .carousel-container .slide.next {
    transform: translateY(10%);
  }
}/*# sourceMappingURL=home.css.map */