/* --------------------------------------------------------------------------
   1. Variables & Root Definitions
   -------------------------------------------------------------------------- */
:root {
  --radius: 50;
  --PI: 3.14159265358979;
  --circumference: calc(var(--PI) * var(--radius) * 2px);
}

/* --------------------------------------------------------------------------
   2. Keyframe Animations
   -------------------------------------------------------------------------- */
@keyframes dotAnimation {
  0% {
    content: "";
  }

  25% {
    content: ".";
  }

  50% {
    content: "..";
  }

  75% {
    content: "...";
  }

  100% {
    content: "....";
  }
}

@keyframes shake {

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

  10% {
    transform: rotateZ(-50deg);
  }

  20% {
    transform: rotateZ(25deg);
  }

  30% {
    transform: rotateZ(-16.66deg);
  }

  40% {
    transform: rotateZ(12.5deg);
  }

  50% {
    transform: rotateZ(-10deg);
  }

  60% {
    transform: rotateZ(8.33deg);
  }

  70% {
    transform: rotateZ(-7.14deg);
  }

  80% {
    transform: rotateZ(6.25deg);
  }

  90% {
    transform: rotateZ(-5.55deg);
  }
}

@keyframes spinner {
  0% {
    stroke-dashoffset: var(--circumference);
    stroke: #fff;
    transform: rotateZ(0deg);
  }

  100% {
    stroke-dashoffset: calc(var(--circumference) * -1);
    stroke: #fff;
    transform: rotateZ(720deg);
  }
}

/* --------------------------------------------------------------------------
   3. Font Definitions
   -------------------------------------------------------------------------- */
@font-face {
  font-family: HelveticaNeue;
  src: url(../assets/fonts/HelveticaNeue-Regular.woff2) format("woff2");
}

@font-face {
  font-family: overlay;
  src: url(../assets/fonts/overlay.woff2) format("woff2");
}

@font-face {
  font-family: tap-me;
  src: url(../assets/fonts/tap-me.woff2) format("woff2");
}

/* --------------------------------------------------------------------------
   4. Global Resets & Layout
   -------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -moz-user-drag: none;
  user-drag: none;
  -webkit-tap-highlight-color: transparent;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

::-webkit-scrollbar {
  display: none;
}

body {
  background: #000;
  margin: 0;
  overflow: hidden;
}

a {
  text-decoration: none;
}

a,
div,
span {
  color: #fff;
}

canvas+script~* {
  display: none !important;
}

main * {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  color: #000;
}

body[class*="loading"] * {
  pointer-events: none !important;
}

/* --------------------------------------------------------------------------
   5. Canvas & Background Elements
   -------------------------------------------------------------------------- */
#hide-main,
#tap-me,
.video-bg-container,
body>canvas {
  width: 100%;
  height: 100%;
  position: fixed;
}

body>canvas {
  z-index: 9020;
}

.video-bg-container {
  z-index: 9010;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-bg-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#video-bg {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

#switch-skin,
#switch-skin-2 {
  display: none;
}



/* --------------------------------------------------------------------------
   8. Navigation Menu Overlay
   -------------------------------------------------------------------------- */
.menu {
  position: fixed;
  right: 24px;
  top: 16px;
  font-family: overlay, sans-serif;
  font-size: 1.178vw;
  z-index: 9030;
  mix-blend-mode: difference;
}

.menu-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  column-gap: 1.25em;
}

.menu-inner>* {
  cursor: pointer;
  color: #fff;
  transition: opacity 0.2s;
  opacity: 0.5;
  display: inline-flex;
  align-items: center;
  column-gap: 0.3125em;
}

.menu-inner span {
  color: inherit;
}

.menu-spinner {
  display: none;
}

.switch-skin-2-loading #switch-skin-2 .menu-spinner,
.switch-skin-loading #switch-skin .menu-spinner {
  display: inline-block;
}

.menu-spinner img {
  width: 1.25em;
  height: 1em;
  transform: translateY(0.125em) scale(1.25);
}

.menu-inner>:focus-visible,
.menu-inner>:hover {
  opacity: 1;
}

.menu-inner>:focus {
  outline: 0;
}

@media (min-width: 1025px) {
  #go-fullscreen {
    display: none;
  }
}

@media (max-width: 1024px) {
  .menu {
    font-size: 16px;
    right: auto;
    top: auto;
    width: 100%;
    overflow: scroll;
    scroll-behavior: smooth;
    transform: rotateX(180deg);
  }

  .menu-inner {
    display: block;
    width: max-content;
    transform: rotateX(-180deg);
    padding-top: 1em;
  }

  .menu-inner>* {
    display: inline;
    white-space: nowrap;
    margin-right: 1em;
  }

  .menu-inner>:first-child {
    margin-left: 1.375em;
  }

  .menu-inner>:last-child {
    margin-right: 1.375em;
  }
}