.cursor-light {
  position: fixed;
  width: 420px;
  height: 420px;
  pointer-events: none;
  z-index: 0;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(251,201,99,0.06) 0%,
    rgba(251,201,99,0.035) 25%,
    rgba(251,201,99,0.015) 45%,
    rgba(251,201,99,0.005) 60%,
    rgba(251,201,99,0) 70%
  );

  filter: blur(120px);
  will-change: transform;
}


.reveal,
.parallax {
  will-change: transform, opacity, filter;
}

.reveal {
  opacity: 0;
  transform: translateY(12px);
  filter: blur(4px);

  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.15) 8%,
    rgba(0,0,0,0.45) 18%,
    rgba(0,0,0,0.75) 28%,
    rgba(0,0,0,1) 40%,
    rgba(0,0,0,1) 100%
  );

  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.15) 8%,
    rgba(0,0,0,0.45) 18%,
    rgba(0,0,0,0.75) 28%,
    rgba(0,0,0,1) 40%,
    rgba(0,0,0,1) 100%
  );

  transition:
    opacity 1s ease,
    transform 1s ease,
    filter 1s ease,
    -webkit-mask-image 1s ease,
    mask-image 1s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);

  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 100%
  );

  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 100%
  );
}

.parallax {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(5px);

  transition:
    opacity 0.9s ease,
    transform 0.9s ease,
    filter 0.9s ease;
}

.parallax.visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .parallax {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    transition: none !important;
  }
}