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

html,
body {
  height: 100%;
}

body {
  background: #050b16;
  overflow: hidden;
  font-family: Arial, sans-serif;
}

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 700px;
  overflow: hidden;
  background: #050b16;
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.scene-depth-mask {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 34vw;
  height: 38vh;
  pointer-events: none;
  z-index: 3;
  background:
    linear-gradient(
      to left,
      rgba(5, 11, 22, 0.94) 0%,
      rgba(5, 11, 22, 0.74) 24%,
      rgba(5, 11, 22, 0.28) 62%,
      rgba(5, 11, 22, 0) 100%
    );
  clip-path: polygon(
    100% 0%,
    100% 100%,
    0% 100%,
    12% 84%,
    24% 72%,
    38% 60%,
    56% 48%,
    76% 34%,
    92% 16%
  );
}

.train-stage {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.train,
.train-shadow,
.train-light {
  position: absolute;
  will-change: transform, opacity, filter;
}

.train {
  width: min(40vw, 760px);
  z-index: 6;
  transform-origin: center center;
}

.train-shadow {
  z-index: 4;
  width: min(24vw, 420px);
  height: 54px;
  border-radius: 999px;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.30) 0%,
    rgba(0, 0, 0, 0.12) 46%,
    rgba(0, 0, 0, 0) 78%
  );
  filter: blur(10px);
  transform-origin: center center;
}

.train-light {
  z-index: 5;
  width: min(28vw, 480px);
  height: 74px;
  background: radial-gradient(
    ellipse at center,
    rgba(70, 140, 255, 0.18) 0%,
    rgba(70, 140, 255, 0.08) 44%,
    rgba(70, 140, 255, 0) 78%
  );
  filter: blur(18px);
  transform-origin: center center;
}

@media (max-width: 768px) {
  .hero {
    min-height: 620px;
  }

  .scene-depth-mask {
    width: 46vw;
    height: 28vh;
  }
  .train,
  .train-shadow,
  .train-light {
    position: absolute;
    left: 0;
    top: 0;
    will-change: transform, opacity, filter;
  }
  .train {
    width: 74vw;
  }

  .train-shadow {
    width: 38vw;
  }

  .train-light {
    width: 44vw;
  }
}