/* https://prismic.io/blog/css-button-animations (24. New CSS button) */
@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap");

/* HYPERION Font */
@font-face {
  font-family: 'HYPERION';
  src: url('assets/HYPERION.ttf') format('truetype'),
       url('assets/HYPERION.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

.animated-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  margin: 24px 0;
  color: #03e9f4;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 3px;
  overflow: hidden;
  transition: 0.4s;
  font-family: "Raleway", sans-serif;
  font-weight: 700;
}

.animated-btn:hover {
  background: #03e9f4;
  color: #050801;
  box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 200px #03e9f4;
  -webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
}
.animated-btn span {
  position: absolute;
  display: block;
}
.animated-btn span.animated-btn-text {
  position: relative;
  display: inline-block;
  z-index: 1;
  text-align: center;
  width: 100%;
}
.animated-btn span:nth-child(1) {
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #03e9f4);
  animation: animate1 1s linear infinite;
}
@keyframes animate1 {
  0% { left: -100%; }
  50%,100% { left: 100%; }
}
.animated-btn span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #03e9f4);
  animation: animate2 1s linear infinite;
  animation-delay: 0.25s;
}
@keyframes animate2 {
  0% { top: -100%; }
  50%,100% { top: 100%; }
}
.animated-btn span:nth-child(3) {
  bottom: 0;
  right: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #03e9f4);
  animation: animate3 1s linear infinite;
  animation-delay: 0.5s;
}
@keyframes animate3 {
  0% { right: -100%; }
  50%,100% { right: 100%; }
}
.animated-btn span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #03e9f4);
  animation: animate4 1s linear infinite;
  animation-delay: 0.75s;
}
@keyframes animate4 {
  0% { bottom: -100%; }
  50%,100% { bottom: 100%; }
}
/* ------------------------------------------------------------------------- */


/* Iceberg Font */
.iceberg-regular {
  font-family: "Iceberg", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* HYPERION Font for Coming Soon */
.hyperion-font {
  font-family: 'HYPERION', sans-serif;
  letter-spacing: 0.1em;
}

/* Font */
.rubik-glitch-regular {
  font-family: "Rubik Glitch", system-ui;
  font-weight: 400;
  font-style: normal;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
  position: relative;
}

/* Glitch Effect */
.rubik-glitch-regular::before,
.rubik-glitch-regular::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.rubik-glitch-regular::before {
  animation: glitch-anim-1 4s infinite;
  color: #00ffff;
  opacity: 0.8;
  z-index: -1;
}

.rubik-glitch-regular::after {
  animation: glitch-anim-2 2s infinite reverse;
  color: #ff00ff;
  opacity: 0.8;
  z-index: -1;
}

@keyframes glitch-anim-1 {
  0%, 90%, 100% {
    clip-path: inset(0 0 0 0);
    transform: translate(0);
  }
  91% {
    clip-path: inset(10% 0 85% 0);
    transform: translate(-5px, 3px);
  }
  92% {
    clip-path: inset(80% 0 0 0);
    transform: translate(5px, -3px);
  }
  93% {
    clip-path: inset(10% 0 85% 0);
    transform: translate(-5px, 3px);
  }
  94% {
    clip-path: inset(40% 0 40% 0);
    transform: translate(5px, -3px);
  }
  95% {
    clip-path: inset(80% 0 0 0);
    transform: translate(-5px, 3px);
  }
  96% {
    clip-path: inset(20% 0 60% 0);
    transform: translate(5px, -3px);
  }
  97% {
    clip-path: inset(60% 0 20% 0);
    transform: translate(-5px, 3px);
  }
  98% {
    clip-path: inset(30% 0 50% 0);
    transform: translate(5px, -3px);
  }
}

@keyframes glitch-anim-2 {
  0%, 90%, 100% {
    clip-path: inset(0 0 0 0);
    transform: translate(0);
  }
  91% {
    clip-path: inset(0 0 95% 0);
    transform: translate(5px, -3px);
  }
  92% {
    clip-path: inset(85% 0 0 0);
    transform: translate(-5px, 3px);
  }
  93% {
    clip-path: inset(0 0 95% 0);
    transform: translate(5px, -3px);
  }
  94% {
    clip-path: inset(50% 0 30% 0);
    transform: translate(-5px, 3px);
  }
  95% {
    clip-path: inset(85% 0 0 0);
    transform: translate(5px, -3px);
  }
  96% {
    clip-path: inset(15% 0 70% 0);
    transform: translate(-5px, 3px);
  }
  97% {
    clip-path: inset(70% 0 15% 0);
    transform: translate(5px, -3px);
  }
  98% {
    clip-path: inset(40% 0 45% 0);
    transform: translate(-5px, 3px);
  }
}

/* Video Background */
.video-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  filter: blur(0.5px) brightness(0.88);
  transform: scale(1.05);
}

/* Overlay */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.2);
  z-index: -1;
}

/* Countdown Boxes */
.count-box {
  background: rgba(255, 255, 255, 0.1);
  padding: 1rem 1.2rem;
  border-radius: 0.75rem;
  min-width: 70px;
  backdrop-filter: blur(6px);
}

.count-box span {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
}

.count-box small {
  font-size: 0.75rem;
  color: #ddd;
}

/* Slideover */
#slideover {
  transition: transform 0.3s ease;
}

#slideover.open {
  transform: translateX(0);
}

/* Form select styling */
select {
  color: #fff;
  background-color: rgba(255,255,255,0.1);
  cursor: pointer;
  outline: none;
}

select option {
  color: #000;
  background-color: #fff;
}

select option[value=""] {
  color: #999;
}

#backdrop {
  transition: opacity 0.3s ease;
}

#backdrop.open {
  opacity: 1;
  pointer-events: auto;
  backdrop-filter: blur(6px);
}