* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  font-family: Arial, sans-serif;
  overflow: hidden;
  background: black;
  color: black;

  /* fade in page */
  animation: fadeInPage 1s ease 1;
  animation-fill-mode: forwards;
}

@keyframes fadeInPage {
  from {
    background: black;
    opacity: 0;
    color: black;
  }
  to {
    opacity: 1;
    background: white;
    color: white;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.8;
    background-color: black;
  }
}

.easeload {
  opacity: 0;
  transition: opacity 1s;

  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  object-fit: cover;
  background-size: cover;
  background-position: center;
  mix-blend-mode: hard-light;

  image-rendering: crisp-edges;
  filter: blur(8px);

  animation: LoopX 30s linear infinite;
}

.scroll-track {
  position: relative;
  height: 100vh;
}

.scene {
  --scene-progress: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.left {
  left: -100%;
}

@keyframes LoopX {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100vw);
  }
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 5;
  padding: 2rem;

  /* add bloom effect to text */
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

h1 {
  font-size: 6vw;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
}

h3 {
  font-size: 4vw;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
}

@keyframes flicker {
  0% {
    opacity: 0.27861;
  }
  5% {
    opacity: 0.34769;
  }
  10% {
    opacity: 0.23604;
  }
  15% {
    opacity: 0.90626;
  }
  20% {
    opacity: 0.18128;
  }
  25% {
    opacity: 0.83891;
  }
  30% {
    opacity: 0.65583;
  }
  35% {
    opacity: 0.67807;
  }
  40% {
    opacity: 0.26559;
  }
  45% {
    opacity: 0.84693;
  }
  50% {
    opacity: 0.96019;
  }
  55% {
    opacity: 0.08594;
  }
  60% {
    opacity: 0.20313;
  }
  65% {
    opacity: 0.71988;
  }
  70% {
    opacity: 0.53455;
  }
  75% {
    opacity: 0.37288;
  }
  80% {
    opacity: 0.71428;
  }
  85% {
    opacity: 0.70419;
  }
  90% {
    opacity: 0.7003;
  }
  95% {
    opacity: 0.36108;
  }
  100% {
    opacity: 0.24387;
  }
}
@keyframes textShadow {
  0% {
    text-shadow:
      0.4389924193300864px 0 1px rgba(0, 30, 255, 0.5),
      -0.4389924193300864px 0 1px rgba(255, 0, 80, 0.3),
      0 0 3px;
  }
  5% {
    text-shadow:
      2.7928974010788217px 0 1px rgba(0, 30, 255, 0.5),
      -2.7928974010788217px 0 1px rgba(255, 0, 80, 0.3),
      0 0 3px;
  }
  10% {
    text-shadow:
      0.02956275843481219px 0 1px rgba(0, 30, 255, 0.5),
      -0.02956275843481219px 0 1px rgba(255, 0, 80, 0.3),
      0 0 3px;
  }
  15% {
    text-shadow:
      0.40218538552878136px 0 1px rgba(0, 30, 255, 0.5),
      -0.40218538552878136px 0 1px rgba(255, 0, 80, 0.3),
      0 0 3px;
  }
  20% {
    text-shadow:
      3.4794037899852017px 0 1px rgba(0, 30, 255, 0.5),
      -3.4794037899852017px 0 1px rgba(255, 0, 80, 0.3),
      0 0 3px;
  }
  25% {
    text-shadow:
      1.6125630401149584px 0 1px rgba(0, 30, 255, 0.5),
      -1.6125630401149584px 0 1px rgba(255, 0, 80, 0.3),
      0 0 3px;
  }
  30% {
    text-shadow:
      0.7015590085143956px 0 1px rgba(0, 30, 255, 0.5),
      -0.7015590085143956px 0 1px rgba(255, 0, 80, 0.3),
      0 0 3px;
  }
  35% {
    text-shadow:
      3.896914047650351px 0 1px rgba(0, 30, 255, 0.5),
      -3.896914047650351px 0 1px rgba(255, 0, 80, 0.3),
      0 0 3px;
  }
  40% {
    text-shadow:
      3.870905614848819px 0 1px rgba(0, 30, 255, 0.5),
      -3.870905614848819px 0 1px rgba(255, 0, 80, 0.3),
      0 0 3px;
  }
  45% {
    text-shadow:
      2.231056963361899px 0 1px rgba(0, 30, 255, 0.5),
      -2.231056963361899px 0 1px rgba(255, 0, 80, 0.3),
      0 0 3px;
  }
  50% {
    text-shadow:
      0.08084290417898504px 0 1px rgba(0, 30, 255, 0.5),
      -0.08084290417898504px 0 1px rgba(255, 0, 80, 0.3),
      0 0 3px;
  }
  55% {
    text-shadow:
      2.3758461067427543px 0 1px rgba(0, 30, 255, 0.5),
      -2.3758461067427543px 0 1px rgba(255, 0, 80, 0.3),
      0 0 3px;
  }
  60% {
    text-shadow:
      2.202193051050636px 0 1px rgba(0, 30, 255, 0.5),
      -2.202193051050636px 0 1px rgba(255, 0, 80, 0.3),
      0 0 3px;
  }
  65% {
    text-shadow:
      2.8638780614874975px 0 1px rgba(0, 30, 255, 0.5),
      -2.8638780614874975px 0 1px rgba(255, 0, 80, 0.3),
      0 0 3px;
  }
  70% {
    text-shadow:
      0.48874025155497314px 0 1px rgba(0, 30, 255, 0.5),
      -0.48874025155497314px 0 1px rgba(255, 0, 80, 0.3),
      0 0 3px;
  }
  75% {
    text-shadow:
      1.8948491305757957px 0 1px rgba(0, 30, 255, 0.5),
      -1.8948491305757957px 0 1px rgba(255, 0, 80, 0.3),
      0 0 3px;
  }
  80% {
    text-shadow:
      0.0833037308038857px 0 1px rgba(0, 30, 255, 0.5),
      -0.0833037308038857px 0 1px rgba(255, 0, 80, 0.3),
      0 0 3px;
  }
  85% {
    text-shadow:
      0.09769827255241735px 0 1px rgba(0, 30, 255, 0.5),
      -0.09769827255241735px 0 1px rgba(255, 0, 80, 0.3),
      0 0 3px;
  }
  90% {
    text-shadow:
      3.443339761481782px 0 1px rgba(0, 30, 255, 0.5),
      -3.443339761481782px 0 1px rgba(255, 0, 80, 0.3),
      0 0 3px;
  }
  95% {
    text-shadow:
      2.1841838852799786px 0 1px rgba(0, 30, 255, 0.5),
      -2.1841838852799786px 0 1px rgba(255, 0, 80, 0.3),
      0 0 3px;
  }
  100% {
    text-shadow:
      2.6208764473832513px 0 1px rgba(0, 30, 255, 0.5),
      -2.6208764473832513px 0 1px rgba(255, 0, 80, 0.3),
      0 0 3px;
  }
}
.background-stack {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.logo-mask {
  --logo-scale: 1;
  --logo-rotation: 0deg;
  --logo-inverse-scale: 1;
  --logo-inverse-rotation: 0deg;
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(54vw, 620px);
  aspect-ratio: 1;
  height: auto;
  z-index: 3;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(var(--logo-rotation)) scale(var(--logo-scale));
  transform-origin: center;
  overflow: hidden;
  -webkit-mask-image: url("./logo-overlay.png");
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("./logo-overlay.png");
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  filter:
    drop-shadow(0 18px 38px rgba(0, 0, 0, 0.38))
    drop-shadow(0 0 8px rgba(120, 146, 188, 0.06));
  mix-blend-mode: normal;
  transition:
    transform 220ms linear;
}

.logo-reveal {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  transform: translate(-50%, -50%) rotate(var(--logo-inverse-rotation)) scale(var(--logo-inverse-scale));
  transform-origin: center;
}

.logo-background-stack {
  position: absolute;
  filter: blur(1px) contrast(1.1);
  inset: 0;
}

.logo-image {
  --logo-image-opacity: 0;
  --logo-image-shift: 0px;
  --logo-image-scale: 1.08;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: calc(var(--logo-image-opacity) * 0.96);
  transform: translate3d(0, var(--logo-image-shift), 0) scale(var(--logo-image-scale));
  transition:
    opacity 220ms linear,
    transform 220ms linear;
}

.logo-reveal::before,
.logo-reveal::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.logo-reveal::before {
  background:
    linear-gradient(rgba(255, 255, 255, 0.03) 50%, rgba(0, 0, 0, 0.34) 50%),
    linear-gradient(
      90deg,
      rgba(255, 0, 0, 0.09),
      rgba(0, 255, 0, 0.03),
      rgba(0, 0, 255, 0.09)
    ),
    url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAQCAYAAAAbBi9cAAABgGlDQ1BzUkdCIElFQzYxOTY2LTIuMQAAKJF1kc8rRFEUxz8zQ+RHFAsLi5eGFRqjxMZixFBYjKf82rx580vNjNd7T5Ktsp2ixMavBX8BW2WtFJGSNVtig57zPDWTzLndcz/3e8853Xsu+NWsnrMqQpDL22YsGlFmZueUqmcC+PDTRIWmW8bE1IhKWXu/lVix6y63Vvm4f602kbR08FULD+qGaQuPCo+v2IbLW8LNekZLCJ8Id5pyQeEbV497/ORy2uNPl001NgT+RmElXcLxEtYzZk5YXk4wl13Wf+/jvqQumZ+ekrVNZisWMaJEUBhjmCH66GFAfB9dhOmWHWXyQz/5kyxJri7eYBWTRdJksOkUdVmqJ2VNiZ6UkWXV7f/fvlqp3rBXvS4ClY+O89oOVZvwVXCcjwPH+TqEwAOc54v5S/vQ/yZ6oagF96BhHU4vilp8G842oOXe0EztRwrI9KdS8HIM9bPQdAU1817Pfs85ugN1Tb7qEnZ2oUPiGxa+AdpWZ6aCdutmAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAJ0lEQVQ4jWNgYGD4z4AdkCTOhEMxyWDUoFGDRg0aYgYxMuAuLkgCANzZBBpdrVi1AAAAAElFTkSuQmCC"),
    url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAQCAIAAACUZLgLAAABgGlDQ1BzUkdCIElFQzYxOTY2LTIuMQAAKJF1kc8rRFEUxz8zQ+RHFAsLi5eGFRqjxMZixFBYjKf82rx580vNjNd7T5Ktsp2ixMavBX8BW2WtFJGSNVtig57zPDWTzLndcz/3e8853Xsu+NWsnrMqQpDL22YsGlFmZueUqmcC+PDTRIWmW8bE1IhKWXu/lVix6y63Vvm4f602kbR08FULD+qGaQuPCo+v2IbLW8LNekZLCJ8Id5pyQeEbV497/ORy2uNPl001NgT+RmElXcLxEtYzZk5YXk4wl13Wf+/jvqQumZ+ekrVNZisWMaJEUBhjmCH66GFAfB9dhOmWHWXyQz/5kyxJri7eYBWTRdJksOkUdVmqJ2VNiZ6UkWXV7f/fvlqp3rBXvS4ClY+O89oOVZvwVXCcjwPH+TqEwAOc54v5S/vQ/yZ6oagF96BhHU4vilp8G842oOXe0EztRwrI9KdS8HIM9bPQdAU1817Pfs85ugN1Tb7qEnZ2oUPiGxa+AdpWZ6aCdutmAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAH0lEQVQokWNkYGD4z4ACGIkQYmIgC4xqG9U2TLSRCQBCNAMdqnnTYAAAAABJRU5ErkJggg=="),
    linear-gradient(rgba(12, 12, 12, 0.1), rgba(12, 12, 12, 0.1));
  background-size:
    100% 4px,
    3px 100%,
    8px 8px,
    8px 8px,
    100% 100%;
  background-repeat:
    repeat,
    repeat,
    repeat,
    repeat,
    no-repeat;
  opacity: 1;
  mix-blend-mode: multiply;
}

.logo-reveal::after {
  /* background: rgba(18, 16, 16, 0.1); */
  /* opacity: 0.32; */
  /* animation: flicker 0.15s infinite; */
}

.blend-image {
  --image-opacity: 0;
  --image-shift: 0px;
  --image-scale: 1.08;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: calc(var(--image-opacity) * 0.9);
  transform: translate3d(0, var(--image-shift), 0) scale(var(--image-scale));
  transition:
    opacity 220ms linear,
    transform 220ms linear,
    filter 300ms ease;
  filter: blur(10px) saturate(0.9) contrast(1.05);
  mix-blend-mode: screen;
}

.blend-image.is-loaded {
  filter: blur(8px) saturate(0.95) contrast(1.08);
}

.black {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  --c: black;
  --r: 64px; /* control the inner radius */
  --b: 6vw; /* control the border thickness*/

  border-image: radial-gradient(
      #0000 calc(71% - var(--b)),
      var(--c) calc(72% - var(--b))
    )
    49.9% / var(--r);
}

.copyright {
  position: absolute;
  bottom: 1vw;
  right: 2.5vw;
  padding: 1rem 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.45),
    0 0 18px rgba(255, 255, 255, 0.18);
  z-index: 5;
}

@media screen and (max-width: 1200px) {
  h1 {
    font-size: 12vw;
  }

  h3 {
    font-size: 7vw;
  }

  .copyright {
    right: 50%;
    transform: translateX(50%);
    width: 100%;
    padding: 1rem;
    text-align: center;
  }
}