:root {
  --bg: #020304;
  --green: #9eff71;
  --cyan: #73e9ff;
  --paper: #eef2ea;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--bg);
}

body {
  color: var(--paper);
  font-family: 'Share Tech Mono', 'IBM Plex Mono', 'Courier New', monospace;
}

.rain-stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 52%, rgba(158, 255, 113, 0.08), transparent 28%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.98), rgba(0, 0, 0, 0.24) 34%, rgba(0, 0, 0, 0.26) 66%, rgba(0, 0, 0, 0.98)),
    #010204;
  isolation: isolate;
}

.rain-stage::before,
.rain-stage::after,
.rain-grid,
.rain-vignette {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.rain-stage::before {
  z-index: 0;
  background-image:
    radial-gradient(circle, rgba(238, 246, 252, 0.14) 0 1px, transparent 1.4px),
    repeating-linear-gradient(90deg, transparent 0 44px, rgba(180, 214, 255, 0.08) 45px, transparent 47px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 5px);
  background-size: 12px 12px, 96px 100%, 100% 5px;
  mix-blend-mode: screen;
  opacity: 0.24;
}

.rain-stage::after {
  z-index: 5;
  background:
    linear-gradient(180deg, rgba(1, 2, 4, 0.72), transparent 18%, transparent 72%, rgba(1, 2, 4, 0.84)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.026) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}

.rain-field {
  position: absolute;
  inset: -12vh -8vw;
  z-index: 2;
  overflow: hidden;
  perspective: 980px;
}

.rain-grid {
  z-index: 3;
  background:
    linear-gradient(90deg, transparent, rgba(158, 255, 113, 0.08) 50%, transparent),
    repeating-linear-gradient(90deg, rgba(115, 233, 255, 0.065) 0 1px, transparent 1px 84px);
  opacity: 0.22;
  mix-blend-mode: screen;
}

.rain-vignette {
  z-index: 6;
  background:
    radial-gradient(ellipse at center, transparent 0 42%, rgba(0, 0, 0, 0.52) 75%, rgba(0, 0, 0, 0.96) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.82), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.82));
  box-shadow: inset 0 0 160px rgba(0, 0, 0, 0.94);
}

.rain-image {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--w, 150px);
  height: var(--h, 150px);
  object-fit: cover;
  object-position: center;
  border: 1px solid rgba(220, 242, 232, 0.16);
  opacity: 0;
  filter:
    grayscale(var(--gray, 0.82))
    saturate(var(--sat, 1.12))
    contrast(var(--contrast, 1.16))
    brightness(var(--brightness, 0.88))
    blur(var(--blur, 0px));
  mix-blend-mode: screen;
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.4),
    0 0 34px rgba(115, 233, 255, 0.09),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transform:
    translate3d(var(--x-start, 0vw), -28vh, var(--z, 0px))
    rotate(var(--r-start, 0deg))
    rotateX(var(--rx, 0deg))
    scale(var(--scale-start, 0.92));
  animation: imageRain var(--duration, 6400ms) linear forwards;
  will-change: transform, opacity, filter;
}

.rain-image[data-depth='near'] {
  z-index: 4;
  mix-blend-mode: normal;
}

.rain-image[data-depth='mid'] {
  z-index: 3;
}

.rain-image[data-depth='far'] {
  z-index: 1;
}

.rain-image::selection {
  background: transparent;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes imageRain {
  0% {
    opacity: 0;
    transform:
      translate3d(var(--x-start, 0vw), -30vh, var(--z, 0px))
      rotate(var(--r-start, 0deg))
      rotateX(var(--rx, 0deg))
      skewX(var(--skew-start, 0deg))
      scale(var(--scale-start, 0.92));
  }

  7% {
    opacity: var(--opacity, 0.62);
  }

  36% {
    opacity: var(--opacity, 0.62);
    transform:
      translate3d(calc(var(--x-start, 0vw) + var(--curve, 5vw)), 34vh, var(--z-mid, 36px))
      rotate(calc(var(--r-start, 0deg) + var(--r-mid, 3deg)))
      rotateX(calc(var(--rx, 0deg) * 0.5))
      skewX(calc(var(--skew-start, 0deg) * -0.4))
      scale(var(--scale-mid, 1));
  }

  78% {
    opacity: var(--opacity, 0.62);
  }

  100% {
    opacity: 0;
    transform:
      translate3d(calc(var(--x-start, 0vw) + var(--drift, 12vw)), 132vh, var(--z-end, 90px))
      rotate(calc(var(--r-start, 0deg) + var(--spin, 90deg)))
      rotateX(var(--rx-end, -6deg))
      skewX(var(--skew-end, 4deg))
      scale(var(--scale-end, 1.08));
  }
}

@media (max-width: 720px) {
  .rain-field {
    inset: -16vh -18vw;
  }

  .rain-image {
    width: min(var(--w, 130px), 34vw);
    height: min(var(--h, 130px), 42vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rain-image {
    animation-duration: 14000ms;
  }
}