:root{
  --hot-pink: #ff2d95;
  --cyan: #00f0ff;
  --yellow: #ffd300;
  --bg-deep: #060014;
  --mx: 0; /* -1..1 */
  --my: 0; /* -1..1 */
  --time: 0s;
}

/* Basic reset */
*{box-sizing: border-box; margin:0; padding:0}
html,body,#root{height:100%}
body{
  height:100vh;
  overflow:hidden;
  background: radial-gradient(1200px 800px at 10% 10%, rgba(0,240,255,0.04), transparent 10%),
              radial-gradient(900px 600px at 90% 90%, rgba(255,45,149,0.03), transparent 10%),
              var(--bg-deep);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  cursor: none; /* hide native cursor so custom cursor can show */
}

/* Scene container */
.scene{
  position:relative;
  width:100%;
  height:100vh;
  perspective: 900px;
  overflow:hidden;
}

/* Sky + sun */
.sky{
  position:absolute;
  inset:0;
  transform: translateZ(-200px) scale(1.2);
  pointer-events:none;
}

.sun{
  position:absolute;
  left:50%;
  top:38%;
  width:36vmin;
  height:36vmin;
  border-radius:50%;
  transform: translate(-50%,-50%) translateX(calc(var(--mx) * -6vmin)) translateY(calc(var(--my) * -4vmin));
  background: radial-gradient(circle at 35% 35%,
    rgba(255,235,110,1) 0%,
    rgba(255,180,64,0.95) 20%,
    rgba(255,45,149,0.7) 60%,
    rgba(0,240,255,0.25) 95%);
  box-shadow: 0 0 120px 30px rgba(255,45,149,0.12), 0 0 240px 60px rgba(0,240,255,0.06);
  filter: saturate(1.1) contrast(1.05);
  mix-blend-mode: screen;
}

/* Horizontal scanlines over the sun */
.sun-scanlines{
  position:absolute;
  left:50%;
  top:38%;
  width:40vmin;
  height:40vmin;
  transform: translate(-50%,-50%) translateX(calc(var(--mx) * -6vmin)) translateY(calc(var(--my) * -4vmin));
  border-radius:50%;
  pointer-events:none;
  background-image: repeating-linear-gradient(
    180deg,
    rgba(0,0,0,0.06) 0 2px,
    transparent 2px 6px
  );
  mix-blend-mode: multiply;
  opacity: 0.35;
}

/* Subtle haze */
.haze{
  position:absolute;
  inset:0;
  background: radial-gradient(800px 300px at 50% 30%, rgba(255,45,149,0.06), transparent 20%),
              radial-gradient(600px 200px at 50% 45%, rgba(0,240,255,0.04), transparent 30%);
  pointer-events:none;
}

/* Mountains (silhouettes using CSS gradients) */
.mountains{
  position:absolute;
  left:50%;
  transform-origin:center;
  width:140%;
  height:40%;
  bottom:14%;
  transform: translateX(-50%);
  background-repeat:no-repeat;
  pointer-events:none;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.6));
}

/* back mountains */
.mountains.back{
  height:34%;
  bottom:22%;
  background: var(--hot-pink);
  clip-path: polygon(0 100%, 6% 70%, 12% 78%, 20% 56%, 30% 70%, 40% 50%, 48% 62%, 60% 44%, 68% 60%, 76% 46%, 86% 68%, 100% 40%, 100% 100%);
  opacity: 0.9;
  transform: translateX(-50%) translateY(calc(var(--my) * 6vmin)) translateX(calc(var(--mx) * -3vmin));
}

/* mid mountains */
.mountains.mid{
  height:40%;
  bottom:12%;
  background: var(--yellow);
  clip-path: polygon(0 100%, 6% 72%, 18% 50%, 26% 64%, 36% 44%, 48% 66%, 62% 38%, 74% 62%, 86% 44%, 100% 72%, 100% 100%);
  filter: blur(2px) saturate(1.1);
  opacity: 0.9;
  transform: translateX(-50%) translateY(calc(var(--my) * 10vmin)) translateX(calc(var(--mx) * -6vmin)) scale(1.02);
}

/* front mountains */
.mountains.front{
  height:48%;
  bottom:6%;
  background: var(--cyan);
  clip-path: polygon(0 100%, 8% 64%, 20% 48%, 30% 72%, 42% 56%, 56% 80%, 68% 46%, 80% 70%, 92% 44%, 100% 100%);
  transform: translateX(-50%) translateY(calc(var(--my) * 18vmin)) translateX(calc(var(--mx) * -10vmin)) scale(1.05);
  filter: contrast(1.2) brightness(0.95);
  opacity: 0.95;
}

/* Neon grid (floor) */
.grid{
  position:absolute;
  left:50%;
  bottom:-2%;
  width:200%;
  height:60%;
  transform: translateX(-50%) rotateX(65deg) translateZ(0);
  transform-origin:center bottom;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.45) 60%),
    repeating-linear-gradient(0deg, rgba(255,45,149,0.06) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(0,240,255,0.06) 0 1px, transparent 1px 32px);
  background-size: cover, auto auto, auto auto;
  mix-blend-mode: screen;
  box-shadow: inset 0 30vmin 60vmin rgba(0,0,0,0.65);
  animation: drive 8s linear infinite;
  pointer-events:none;
  filter: blur(0.2px) saturate(1.2);
}

/* grid animation creates forward movement */
@keyframes drive{
  from{ background-position: 0 0, 0 0, 0 0; transform: translateX(-50%) rotateX(65deg) translateZ(0) translateY(0); }
  to  { background-position: -2000px 0, -2000px 0, -2000px 0; transform: translateX(-50%) rotateX(65deg) translateZ(0) translateY(-3vmin); }
}

/* Title */
.title{
  position:absolute;
  left:50%;
  top:12%;
  transform: translateX(-50%) translateY(calc(var(--my) * -3vmin)) translateX(calc(var(--mx) * -3vmin));
  letter-spacing: 0.6rem;
  font-weight:800;
  color: white;
  font-size: clamp(2rem, 6vw, 6rem);
  text-align:center;
  text-transform:uppercase;
  pointer-events:none;
  mix-blend-mode: screen;
  text-shadow:
    0 0 32px rgba(255,45,149,0.2),
    0 0 64px rgba(0,240,255,0.08),
    0 6px 30px rgba(0,0,0,0.6);
  -webkit-font-smoothing:antialiased;
}

/* Neon outline using pseudo elements */
.title::after{
  content: "";
  position:absolute;
  inset:-6px;
  z-index:-1;
  filter: blur(18px);
  background: linear-gradient(90deg, var(--hot-pink), var(--cyan), var(--yellow));
  opacity:0.45;
  mix-blend-mode: screen;
}

/* Cursor glow */
.cursor{
  position:fixed;
  top:0;
  left:0;
  width: 42px;
  height: 42px;
  margin-left:-21px;
  margin-top:-21px;
  border-radius:50%;
  pointer-events:none;
  z-index:9999;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.9) 0 6%,
    rgba(255,45,149,0.15) 10%,
    rgba(0,240,255,0.12) 25%,
    rgba(255,210,80,0.06) 45%,
    transparent 60%);
  box-shadow: 0 0 42px 12px rgba(255,45,149,0.12), inset 0 0 16px rgba(255,255,255,0.6);
  transform: translate3d(-50%,-50%,0) scale(1);
  transition: transform 200ms cubic-bezier(.2,.9,.2,1);
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce){
  .grid, .title, .sun, .mountains { animation: none !important; transition: none !important; }
  body{ cursor: auto; }
  .cursor{ display:none; }
  *{ scroll-behavior:auto; }
}

/* Make the scene responsive */
@media (max-aspect-ratio: 4/3){
  .sun{ width:46vmin; height:46vmin; top:34% }
  .grid{ height:72% }
}