@font-face {
  font-family: "Anton";
  src:
    local("Anton"),
    url("/font/Anton.ttf") format("opentype") tech(color-COLRv1);
}

body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #050a14;
  font-family: 'Anton', sans-serif;
  overflow: hidden;
}

#site-content {
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: opacity 1.0s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

#intro-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  pointer-events: none;
  background-color: #050a14;
  transition: opacity 1.0s ease;
}

#intro-overlay.fade-out {
  opacity: 0;
}

.arrow-wipe {
  position: absolute;
  top: 0;
  width: 150%;
  height: 100%;
  clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%);
  will-change: transform;
}

@keyframes wipeScreen {
  to { transform: translateX(100%); }
}

#intro-blue-layer {
  background-color: #050a14; 
  z-index: 100;
  width: 150%; 
  left: -45% !important; 
  clip-path: polygon(0 50%, 30% 0, 100% 0, 100% 100%, 30% 100%);
}

.animate-blue-exit {
  animation: wipeScreen 1.2s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

#entry-arrow-wipe {
  background-color: #ffffff;
  z-index: 10;
  left: -150%;
}

.animate-entry-wipe {
  animation: wipeScreen 1.0s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

#exit-arrow-wipe {
  background-color: #050a14;
  z-index: 50;
  left: -150%;
}

.animate-exit-wipe {
  animation: wipeScreen 1.0s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

#flash-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  background-color: #2563eb;
  opacity: 0;
}

.strobe-mode #flash-layer {
  animation: flashOpacity 0.2s infinite;
}

@keyframes flashOpacity {
  0%, 49% { opacity: 0; }   
  50%, 100% { opacity: 1; }
}

.fixed-text-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 30;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  opacity: 1;
}

.wall-of-text {
  width: 100%;
  height: 110%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  transform: skewY(-2deg) scaleY(1.1) translateZ(0);
  backface-visibility: hidden;
}

.marquee-row {
  width: 100%;
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  line-height: 0.9;
}

.marquee-inner {
  display: flex;
  will-change: transform;
}

.text-item {
  font-size: 42px; 
  color: #2563eb;
  text-transform: uppercase;
  margin-right: 20px;
  -webkit-font-smoothing: antialiased;
  transition: color 0.1s;
}

.strobe-mode .text-item {
  animation: flashTextColor 0.2s infinite;
}

@keyframes flashTextColor {
  0%, 49% { color: #2563eb; }   
  50%, 100% { color: #ffffff; }
}

.decelerate {
  animation: scrollBrake 2.5s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}

.marquee-row:nth-child(even) .decelerate {
  animation-name: scrollBrakeReverse;
}

.rewind {
  animation: scrollRewind 0.7s cubic-bezier(0.45, 0, 0.55, 1) forwards;
}

.marquee-row:nth-child(even) .rewind {
  animation-name: scrollRewindReverse;
}

@keyframes scrollBrake {
  from { transform: translateX(0); }
  to { transform: translateX(-15%); }
}
@keyframes scrollBrakeReverse {
  from { transform: translateX(-15%); }
  to { transform: translateX(0); }
}

@keyframes scrollRewind {
  from { transform: translateX(-15%); }
  to { transform: translateX(0); }
}
@keyframes scrollRewindReverse {
  from { transform: translateX(0); }
  to { transform: translateX(-15%); }
}

.inverted-locked #flash-layer {
  opacity: 1 !important;
  background-color: #2563eb !important;
}

.inverted-locked #entry-arrow-wipe {
  opacity: 0 !important;
}

.inverted-locked .text-item {
  color: #ffffff !important;
}

@media (min-width: 768px) {
  .text-item {
    font-size: 60px;
    margin-right: 30px;
  }
  
  .wall-of-text {
    transform: skewY(-3deg) scaleY(1.1) translateZ(0);
  }
  
  .arrow-wipe {
    clip-path: polygon(0 0, 80% 0, 100% 50%, 80% 100%, 0 100%);
  }
}

@media (min-width: 1024px) {
  .text-item {
    font-size: 75px;
    margin-right: 40px;
  }
}

@media (min-width: 1440px) {
  .text-item {
    font-size: 90px;
    margin-right: 50px;
  }
}