.services-code-rain {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  width: 100%;
  height: 500px;
  min-width: 0;
  overflow: hidden;
  contain: layout paint;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 80%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 80%, transparent);
}

.services-code-rain-depth {
  position: absolute;
  inset: 0;
  opacity: var(--depth-opacity);
  transform: translate(var(--depth-x), var(--depth-y)) scale(var(--depth-scale));
  filter: blur(var(--depth-blur));
}
.services-code-rain-field {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding-inline: 20px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 89%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 89%, transparent);
}

.services-code-rain-lane { position: relative; min-width: 0; }
.services-code-rain-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  animation: services-code-fall var(--rain-duration) linear infinite;
  animation-delay: var(--rain-delay);
  animation-play-state: paused;
}
.services-code-rain-sequence {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding-bottom: 26px;
}
.services-code-rain .services-code-rain-snippet {
  margin: 0;
  padding: 0;
  min-width: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: #8d8b85;
  font: 400 var(--rain-size, 12px)/1.75 var(--mono, "Berkeley Mono", monospace);
  letter-spacing: -.025em;
  text-transform: uppercase;
  white-space: pre;
  overflow: visible;
}
.services-code-rain-snippet > code {
  display: block;
  font: inherit;
  letter-spacing: inherit;
  color: transparent;
  background-image: linear-gradient(108deg,
    rgb(113 111 105 / .09) 0%, rgb(113 111 105 / .09) 33%,
    rgb(140 138 132 / .22) 41%, rgb(126 124 118 / .55) 46%,
    rgb(255 255 255 / .96) 49%, rgb(255 255 255 / .8) 51%,
    rgb(154 152 146 / .44) 55%, rgb(113 111 105 / .09) 64%,
    rgb(113 111 105 / .09) 100%);
  background-size: 330% 100%;
  background-position: 130% 0;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: services-code-reflection var(--rain-shine-duration, 18s) linear infinite;
  animation-delay: var(--rain-shine-delay, 0s);
  animation-play-state: paused;
}
.services-code-rain.is-running .services-code-rain-track,
.services-code-rain.is-running .services-code-rain-snippet > code { animation-play-state: running; }
.services-code-rain.is-running .services-code-rain-track { will-change: transform; }

@keyframes services-code-fall { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@keyframes services-code-reflection { from { background-position: 130% 0; } to { background-position: -30% 0; } }

@container (max-width: 480px) {
  .services-code-rain-field { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-inline: 20px; }
  .services-code-rain-lane:last-child { display: none; }
}
@container (max-width: 380px) {
  .services-code-rain-field { gap: 12px; padding-inline: 16px; }
  .services-code-rain .services-code-rain-snippet { font-size: min(var(--rain-size, 12px), 13px); }
}
@media (max-width: 800px) {
  .services-code-rain { height: 440px; max-width: 650px; margin-inline: auto; }
}
@media (max-width: 520px) { .services-code-rain { height: 390px; } }
@media (prefers-reduced-motion: reduce) {
  .services-code-rain .services-code-rain-track { animation: none; transform: translateY(var(--rain-static-y, -35%)); }
  .services-code-rain .services-code-rain-snippet > code {
    animation: none;
    background-position: 52% 0;
  }
}