/* -------------------------------------
   GLOBAL
------------------------------------- */

:root {
  --grid-parallax-x: 0px;
}


html, body {
  margin: 0;
  padding: 0;
  
  overflow: hidden;
  height: 100%;
  font-family: sans-serif;
}

#bg-video {
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  width: 100%;
  height: 100%;
  object-fit: cover; /* cover entire viewport while preserving aspect */
  z-index: -1;       /* behind page content */
  pointer-events: none;
  background: black; /* fallback while loading */
}

.wrapper {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  perspective: 1200px;
  z-index: 1; 
}

/* -------------------------------------
   STARFIELD PARALLAX
------------------------------------- */

.stars, .stars2, .stars3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/31787/stars.jpg");
  background-size: cover;
  animation: starMove 120s linear infinite;
  opacity: 0.3;
}

.stars2 {
  animation-duration: 180s;
  opacity: 0.5;
}

.stars3 {
  animation-duration: 240s;
  opacity: 0.7;
}

@keyframes starMove {
  from { transform: translateY(0); }
  to   { transform: translateY(-200px); }
}

/* -------------------------------------
   HEADINGS
------------------------------------- */

h1 {
  color: #C6CBF5;
  font-family: 'Orbitron', sans-serif;
  font-size: 100px;
  font-weight: 1000;
  line-height: 1.2;
  width: 400px;

  position: absolute;
  top: 0px;
  left: 50%;
  margin-left: -350px;
  text-align: center;
  text-transform: uppercase;

  background: -webkit-linear-gradient(top, #151C60, #C6CBF5 40%, #500253 40%, #E1A0CE 65%, white);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: white;

  z-index: 10;
}

h2 {
  color: rgb(209,0,177);
  display: block;
  font-family: 'Yellowtail', cursive;
  font-size: 150px;

  position: absolute;
  top: 20px;
  width: 100%;
  text-align: center;

  transform: skew(-10deg) rotate(-10deg);
  text-decoration: underline;
  text-shadow:
    0 0 1px rgb(209,0,177),
    0 -3px 3px rgba(255,255,255,0.8),
    0 3px 3px rgba(0,0,0,0.5),
    0 0 15px rgb(209,0,177),
    0 0 45px rgba(209,0,177,0.8);

  z-index: 10;
}

/* -------------------------------------
   HORIZON FLARE
------------------------------------- */

.horizon-glow {
  position: absolute;
  bottom: 50%;
  left: 0;
  width: 100%;
  height: 20em;
  background: radial-gradient(ellipse at center,
    rgba(209,0,177,0.5) 0%,
    rgba(0,0,0,0) 70%
  );
  filter: blur(30px);
  opacity: 0.6;
  z-index: 5;
}

/* -------------------------------------
   GRID FLOOR
------------------------------------- */
.grid {
  position: absolute;
  bottom: -10em;
  width: 200%;
  height: 85%;
  left: -50%;
  transform: translateZ(200px) scale(1.26) rotateX(73deg) translateX(var(--grid-parallax-x));
  transform-origin: top center;

  background:
    /* horizontal lines */
    linear-gradient(
      180deg,
      rgba(54,226,248,0.6) 2px,
      rgba(0,0,0,0) 2px
    ),
    /* vertical lines */
    linear-gradient(
      90deg,
      rgba(54,226,248,0.6) 2px,
      rgba(0,0,0,0) 2px
    );

  background-size: 4em 4em, 4em 4em;
  background-color: black;

  border-top: 5px solid rgb(209,0,177);
  box-shadow: 0 -25px 45px rgb(209,0,177);

  animation: moveGridY 1.3s linear infinite,
             neonPulse 6.5s ease-in-out infinite;
}

@media (max-width: 768px) {
  .grid {
    position: absolute;
    bottom: 0;
    left: -50%;
    width: 200%;
    height: 100vh;

    transform-origin: bottom center;

    transform:
      translateY(8vh)      /* moves horizon higher (closer to desktop) */
      rotateX(67deg)       /* adds tilt to flatten tiles */
      scale(1.15)          /* zooms grid out to match desktop spacing */
      translateX(var(--grid-parallax-x));
  }
}




/* endless scroll with parallax */
@keyframes moveGridY {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 4em, 0 2em; }
}

/* pulsing neon glow */
@keyframes neonPulse {
  0%, 100% { opacity: 0.8; filter: drop-shadow(0 0 15px rgba(54,226,248,0.7)); }
  50%      { opacity: 1;   filter: drop-shadow(0 0 25px rgba(54,226,248,1)); }
}

/* -------------------------------------
   TRIANGLE LOGO
------------------------------------- */

.logo-triangle {
  animation: dash 6s linear infinite;
  fill: url(#grad1);
  filter: url(#dropshadow);

  position: absolute;
  left: 50%;
  margin-left: -200px;
  top: 6em;

  stroke-dasharray: 1200;
  stroke-dashoffset: 0;

  z-index: 8;
}

@keyframes dash {
  /* completely hidden stroke */
  0% {
    stroke-dasharray: 0 1200;
    stroke-dashoffset: 0;
  }

  /* fully drawn (draw phase) */
  45% {
    stroke-dasharray: 1200 0;
    stroke-dashoffset: 0;
  }

  /* halfway erased (erase phase) */
  70% {
    stroke-dasharray: 600 1200;
    stroke-dashoffset: -600;
  }

  /* fully erased forward */
  100% {
    stroke-dasharray: 0 1200;
    stroke-dashoffset: -1200;
  }
}