@font-face {
  font-family: "Hobo";
  src: url("/fonts/HoboBT.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

.what-is-main,
.what-is-sub {
  font-family: "Hobo", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  overflow-x: hidden;
}

body {
  background: #4b1474;
  font-family: Inter, sans-serif;
}

.home-page {
  width: min(100%, 430px);
  margin: 0 auto;
  overflow: hidden;
  background: #4b1474;
}

.home-hero {
  position: relative;
  background: #4b1474;
}

.home-hero-bg {
  display: block;
  width: 100%;
}

.home-hero-stack {
  position: absolute;
  top: 70px;
  left: 50%;
  width: 100%;
  transform: translateX(-50%);

  display: flex;
  flex-direction: column;
  align-items: center;
}

.home-moosh-hero {
  display: block;
  width: 100%;
}

.home-hero-cta {
  display: block;
  width: 68%;
  max-width: 300px;

  margin-top: clamp(18px, 6vw, 32px);

  animation: home-cta-pulse 2.8s ease-in-out infinite;
}

.home-hero-cta img {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes home-cta-pulse {

  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(255, 238, 0, 0));
  }

  50% {
    transform: scale(1.035);
    filter: drop-shadow(0 0 14px rgba(255, 238, 0, 0.55));
  }
}

/* SECTION: WHAT IS MOOSHFEST */

.home-what-is {
  position: relative;
  z-index: 2;

  margin-top: clamp(-110px, -24vw, -78px);
}


.home-what-is-bg {
  display: block;
  width: 105%;
  transform: translateX(-2%);
}

.home-what-is-header {
  position: absolute;
  top: 86px;
  left: 50%;
  transform: translateX(-50%);

  width: 78%;
  z-index: 3;
}

.home-what-is-cta {
  position: absolute;
  left: 50%;
  bottom: 13%;

  width: 68%;
  max-width: 300px;

  transform: translateX(-50%);
  z-index: 7;
}

.home-what-is-cta img {
  display: block;
  width: 100%;
  height: auto;
}

/* WHAT IS SLIDER CONTENT */

.what-is-slider {
  position: absolute;
  top: 170px;
  left: 50%;
  transform: translateX(-50%);

  width: 82%;
  height: 340px;
  overflow: hidden;

  z-index: 5;
  text-align: center;
}

.what-is-track {
  display: flex;
  width: 100%;

  animation: what-is-carousel 18s ease-in-out infinite;
}

.what-is-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;

  position: relative;
}

/* @keyframes text-float {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-4px);
  }
} */

@keyframes what-is-carousel {

  0%,
  29% {
    transform: translateX(0);
  }

  32%,
  62% {
    transform: translateX(-100%);
  }

  65%,
  95% {
    transform: translateX(-200%);
  }

  100% {
    transform: translateX(0);
  }
}

.what-is-main {
  margin: 0 0 42px;

  font-family: "Hobo", sans-serif;
  font-size: 20px;
  line-height: 1.15;

  color: #6b00b9;
  position: relative;
  z-index: 2;
  text-align: center;
}

.what-is-sub {
  margin: 0;

  font-family: "Hobo", sans-serif;
  font-size: 18px;
  line-height: 1.1;

  color: #045c18;
  text-align: center;
}

.what-is-humanoids {
  position: absolute;
  left: 50%;
  top: 20px;

  width: 100%;
  transform: translateX(-50%);

  /* opacity: 0.45; */
  z-index: 1;
}

.what-is-slide p,
.what-is-slide-title,
.what-is-list {
  position: relative;
  z-index: 2;
}

.what-is-slide-title {
  margin: 0 0 28px;

  font-family: "Hobo", sans-serif;
  font-size: 22px;
  line-height: 1.1;

  color: #6b00b9;

  text-align: center;
}

.what-is-list {
  list-style: none;

  margin: 0;
  padding: 0;

  text-align: center;
}

.what-is-list li {
  margin-bottom: 14px;

  font-family: "Hobo", sans-serif;
  font-size: 18px;
  line-height: 0.8;

  color: #045c18;
}

.what-is-list li::before {
  content: "✦ ";
  color: #6b00b9;
}

.what-is-ufo {
  position: absolute;

  left: 50%;
  top: 0px;

  width: 100%;

  transform: translateX(-50%);

  z-index: 1;
  overflow: hidden;
  clip-path: inset(10px);
}

/* THE MUSIC SECTION  */
.home-music {
  overflow: hidden;
  position: relative;
  margin-top: -42px;
  z-index: 1;
}

.music-bg {
  display: block;
  width: 100%;
}

.music-header {
  position: absolute;
  top: 57px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  z-index: 2;
}

.music-meta {
  position: absolute;
  top: 118px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  margin: 0;
  text-align: center;
  font-family: "Hobo", sans-serif;
  font-size: 20px;
  color: #ffd800;
  text-transform: uppercase;
  z-index: 2;
}

.music-carousel {
  position: absolute;
  top: 175px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  z-index: 3;
}

.music-card {
  background: #7d00bd;
  border: 5px solid #a951db;
  border-radius: 28px;
  padding: 18px 18px 24px;
  touch-action: pan-y;
  text-align: center;
}

.music-card img {
  display: block;
  width: 100%;
  border-radius: 10px;
}

.music-card h3 {
  margin: 22px 0 0;
  font-family: "Hobo", sans-serif;
  font-size: 26px;
  line-height: 1;
  color: #fff;
  text-transform: uppercase;
}

.music-controls {
  position: absolute;
  top: 555px;
  left: 50%;
  transform: translateX(-50%);
  width: 58%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 4;
}

.music-dots {
  display: flex;
  gap: 8px;
}

.music-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .45);
}

.music-dot.active {
  background: #fff;
}

.music-arrow {
  border: 0;
  background: transparent;
  padding: 0;
  width: 46px;
  cursor: pointer;
}

.music-arrow img {
  display: block;
  width: 100%;
}

.music-cta {
  position: absolute;
  bottom: 71px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  z-index: 4;
}

.music-cta img {
  display: block;
  width: 100%;
}

/* =========================
   SIDE QUESTS
========================= */

.home-sidequests {
  position: relative;
  z-index: 4;
  margin-top: -57px;
  overflow: hidden;
}

.sidequest-bg {
  display: block;
  width: 100%;
}

.sidequest-header {
  position: absolute;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);

  width: 77%;
  z-index: 2;
}

.sidequest-carousel {
  position: absolute;
  top: 177px;
  left: 50%;
  transform: translateX(-50%);
  width: 81%;
  z-index: 3;
}

.sidequest-card {
  display: block;
  width: 100%;
  height: auto;
  touch-action: pan-y;
  filter:
    drop-shadow(0 0 8px rgba(255, 255, 255, .18)) drop-shadow(0 0 18px rgba(255, 0, 200, .15)) drop-shadow(0 0 36px rgba(170, 0, 255, .12));
  animation: sidequest-card-float 6s ease-in-out infinite;
}

@keyframes sidequest-card-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

.sidequest-controls {
  position: absolute;
  bottom: 58px;
  left: 50%;
  transform: translateX(-50%);

  width: 58%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  z-index: 4;
}

.sidequest-dots {
  display: flex;
  gap: 6px;
}

.sidequest-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .45);
}

.sidequest-dot.active {
  background: #fff;
}

.sidequest-arrow {
  border: 0;
  background: transparent;
  padding: 0;

  width: 46px;

  cursor: pointer;
}

.sidequest-arrow img {
  display: block;
  width: 100%;
  height: auto;
}

/* .sidequest-cta {
  position: absolute;
  left: 50%;
  bottom: 39px;
  transform: translateX(-50%);

  display: block;
  width: 58%;
  max-width: 300px;

  z-index: 4;
}

.sidequest-cta img {
  display: block;
  width: 100%;
  height: auto;

  animation: sidequest-cta-pulse 2.8s ease-in-out infinite;
}

@keyframes sidequest-cta-pulse {

  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(255, 0, 170, 0));
  }

  50% {
    transform: scale(1.035);
    filter: drop-shadow(0 0 14px rgba(255, 0, 170, 0.45));
  }
} */

/* / HOME TICKET */

.home-tickets {
  position: relative;
  overflow: hidden;
  z-index: 1;
  margin-top: -34px;
}

.tickets-bg {
  display: block;
  width: 100%;
}

.tickets-header {
  position: absolute;
  top: 76px;
  left: 50%;
  transform: translateX(-50%);
  width: 78%;
  z-index: 2;

  opacity: 0;
  animation:
    ticketsHeaderFade 1.5s ease forwards,
    ticketsHeaderGlow 4s ease-in-out infinite 0.8s;
}


@keyframes ticketsHeaderFade {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes ticketsHeaderGlow {

  0%,
  100% {
    transform: translateX(-50%) translateY(0);
    filter:
      drop-shadow(0 0 6px rgba(255, 50, 220, .45)) drop-shadow(0 0 16px rgba(180, 60, 255, .35));
  }

  50% {
    transform: translateX(-50%) translateY(-4px);
    filter:
      drop-shadow(0 0 12px rgba(255, 50, 220, .75)) drop-shadow(0 0 28px rgba(180, 60, 255, .55)) drop-shadow(0 0 50px rgba(255, 120, 255, .25));
  }
}

.tickets-copy {
  position: absolute;
  top: 185px;
  left: 50%;
  transform: translateX(-50%);
  width: 88%;
  text-align: center;
  z-index: 3;
}

.type-line {
  margin: 0 0 18px;
  font-family: "Hobo", sans-serif;
  font-size: 24px;
  line-height: 1.08;
  min-height: 28px;
}

.type-line.green {
  color: #70ff4f;
  font-size: 26px;
}

.type-line.pink {
  color: #ff2bd6;
}

.type-line.tier {
  margin-top: 42px;
  font-size: 15px;
  text-transform: uppercase;
  color: #70ff4f;
  font-family: monospace;
}

.type-line.tier2 {
  margin-top: -12px;
  font-size: 15px;
  text-transform: uppercase;
  color: #70ff4f;
  font-family: monospace;
}

.type-line.tier .pink {
  color: #ff2bd6;
}

.tickets-cta {
  position: absolute;
  left: 50%;
  bottom: 88px;
  transform: translateX(-50%);
  width: 64%;
  max-width: 300px;
  z-index: 4;
}

.tickets-cta img {
  display: block;
  width: 100%;
  height: auto;
  animation: tickets-cta-pulse 2.8s ease-in-out infinite;
}

@keyframes tickets-cta-pulse {

  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(255, 0, 170, 0));
  }

  50% {
    transform: scale(1.035);
    filter: drop-shadow(0 0 14px rgba(255, 0, 170, 0.45));
  }
}

/* // Stars */

.tickets-stars {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.tickets-stars span {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  opacity: .3;

  animation: twinkle 4s ease-in-out infinite;
}

@keyframes twinkle {

  0%,
  100% {
    opacity: .15;
    transform: scale(1);
  }

  50% {
    opacity: .9;
    transform: scale(1.8);
  }
}

/* // star gif hero */

.hero-gif-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.hero-gif-overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  opacity: 0.1;
  mix-blend-mode: difference;

  filter:
    hue-rotate(250deg) saturate(2.5) brightness(1.4) contrast(1.2);

  transform: scale(1.15);
}

/* =========================
   SPONSORS / FOOTER
========================= */

.home-sponsors {
  position: relative;
  overflow: hidden;

  padding: 41px 24px 53px;
  text-align: center;

  background:
    radial-gradient(
      ellipse at top center,
      rgba(255, 120, 255, 0.18) 0%,
      rgba(255, 120, 255, 0) 55%
    ),
    linear-gradient(
      180deg,
      #8d00d4 0%,
      #7800bb 45%,
      #62009d 100%
    );
}

.home-sponsors::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.08) 1px, transparent 1px),
    radial-gradient(circle at 80% 60%, rgba(255,255,255,.06) 1px, transparent 1px);

  background-size: 140px 140px, 190px 190px;
  opacity: .3;
}

.sponsor-header {
  position: relative;
  z-index: 2;

  display: block;
  width: min(520px, 90%);
  margin: 0 auto 54px;
}

.sponsor-grid {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 58px 42px;

  width: min(100%, 620px);
  margin: 0 auto 78px;
}

.sponsor-grid img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;

  opacity: .96;

  filter:
    drop-shadow(0 0 8px rgba(255,255,255,.16))
    drop-shadow(0 0 20px rgba(255,255,255,.08));
}

.sponsor-lc {
  max-width: 230px;
}

.sponsor-ml {
  max-width: 210px;
}

.sponsor-ct {
  max-width: 230px;
  grid-column: 1 / -1;
}

.home-footer-links {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;

  margin-bottom: 22px;
}

.home-footer-links a {
  font-family: Inter, sans-serif;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;

  color: #ffd800;
  text-decoration: underline;
  text-underline-offset: 6px;
}

.home-footer-links a:hover {
  color: #70ff4f;
}

.home-copyright {
  position: relative;
  z-index: 2;

  margin: 0;

  font-family: Inter, sans-serif;
  font-size: 10px;
  color: #fff;
  letter-spacing: .04em;
}

/* // ROTATE MESSAGE // */

.rotate-device {
  display: none;
}

@media (orientation: landscape) and (max-width: 1024px) {
  .rotate-device {
    display: flex;
    position: fixed;
    inset: 0;
    background: #2a004a;
    z-index: 99999;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
  }

  .rotate-message {
    color: #ffe600;
    font-size: 2rem;
    font-family: "Hobo BT", sans-serif;
  }

  body {
    overflow: hidden;
  }
}