.home-matrix-rain {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  margin-top: calc(-1 * var(--site-header-height, calc(min(24vw, 140px) + 1.7rem)));
  margin-left: calc(-1 * clamp(1.25rem, 4vw, 2.5rem));
  margin-right: calc(-1 * clamp(1.25rem, 4vw, 2.5rem));
  width: calc(100% + 2 * clamp(1.25rem, 4vw, 2.5rem));
  overflow: hidden;
}

.home-matrix-rain__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  object-fit: cover;
}

.home-matrix-rain__canvas--unsupported {
  display: none;
}

/* --- Neon sticker field (scene-sticker subset) --- */

.home-matrix-rain__neon-field {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.home-matrix-rain__neon-field .neon-sticker-wrap {
  pointer-events: auto;
  cursor: pointer;
}

.home-matrix-rain__neon-field .scene-sticker__sparkle-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.home-matrix-rain__neon-field .scene-sticker__bg-spark {
  position: absolute;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
  opacity: 0.85;
  animation: home-matrix-bg-spark calc(var(--frame-ms, 500ms) * 2) steps(1, end) infinite;
  animation-delay: var(--anim-delay, 0ms);
}

.home-matrix-rain__neon-field .scene-sticker__bg-spark::before,
.home-matrix-rain__neon-field .scene-sticker__bg-spark::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}

.home-matrix-rain__neon-field .scene-sticker__bg-spark::before {
  width: 2px;
  height: 10px;
}

.home-matrix-rain__neon-field .scene-sticker__bg-spark::after {
  width: 10px;
  height: 2px;
}

@keyframes home-matrix-bg-spark {
  0%,
  49.99% {
    opacity: 0.85;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }

  50%,
  100% {
    opacity: 0.35;
    transform: translate(-50%, -50%) rotate(22deg) scale(0.75);
  }
}

.home-matrix-rain__neon-field .neon-sticker-wrap {
  position: absolute;
  width: var(--size, 120px);
  height: var(--size, 120px);
  transform:
    translate3d(
      calc(var(--tilt-x, 0px) + var(--scroll-x, 0px)),
      calc(var(--tilt-y, 0px) + var(--scroll-y, 0px)),
      0
    )
    rotate(calc(var(--base-r, 0deg) + var(--tilt-r, 0deg)));
  transition: transform 0.12s ease-out;
  will-change: transform;
}

.home-matrix-rain__neon-field .neon-sticker-wrap--squish {
  animation: home-matrix-sticker-squish 420ms steps(2, end);
}

@keyframes home-matrix-sticker-squish {
  0% {
    transform:
      translate3d(
        calc(var(--tilt-x, 0px) + var(--scroll-x, 0px)),
        calc(var(--tilt-y, 0px) + var(--scroll-y, 0px)),
        0
      )
      rotate(calc(var(--base-r, 0deg) + var(--tilt-r, 0deg)))
      scale(1);
  }

  50% {
    transform:
      translate3d(
        calc(var(--tilt-x, 0px) + var(--scroll-x, 0px)),
        calc(var(--tilt-y, 0px) + var(--scroll-y, 0px) + 4px),
        0
      )
      rotate(calc(var(--base-r, 0deg) + var(--tilt-r, 0deg)))
      scale(0.82, 1.12);
  }

  100% {
    transform:
      translate3d(
        calc(var(--tilt-x, 0px) + var(--scroll-x, 0px)),
        calc(var(--tilt-y, 0px) + var(--scroll-y, 0px)),
        0
      )
      rotate(calc(var(--base-r, 0deg) + var(--tilt-r, 0deg)))
      scale(1);
  }
}

.home-matrix-rain__neon-field .neon-sticker-wrap--heart-1 { top: 8%; left: 4%; --size: clamp(72px, 9vw, 110px); }
.home-matrix-rain__neon-field .neon-sticker-wrap--heart-2 { top: 72%; left: 6%; --size: clamp(64px, 8vw, 96px); }
.home-matrix-rain__neon-field .neon-sticker-wrap--heart-3 { top: 18%; right: 5%; --size: clamp(60px, 7.5vw, 88px); }
.home-matrix-rain__neon-field .neon-sticker-wrap--star-1 { top: 6%; right: 14%; --size: clamp(68px, 8.5vw, 100px); }
.home-matrix-rain__neon-field .neon-sticker-wrap--star-2 { bottom: 10%; right: 8%; --size: clamp(76px, 9.5vw, 112px); }
.home-matrix-rain__neon-field .neon-sticker-wrap--star-3 { top: 52%; left: 2%; --size: clamp(48px, 6vw, 72px); }
.home-matrix-rain__neon-field .neon-sticker-wrap--skull-1 { top: 58%; right: 18%; --size: clamp(88px, 11vw, 130px); }
.home-matrix-rain__neon-field .neon-sticker-wrap--skull-2 { bottom: 6%; left: 22%; --size: clamp(72px, 9vw, 108px); }

.home-matrix-rain__neon-field .neon-sticker {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.home-matrix-rain__neon-field .neon-sticker__outer {
  fill: none;
  stroke: var(--outline-neon, #39ff14);
  stroke-width: 7;
  stroke-linejoin: round;
  stroke-linecap: round;
  paint-order: stroke fill;
}

.home-matrix-rain__neon-field .neon-sticker__inner {
  fill: none;
  stroke: #050505;
  stroke-width: 5;
  stroke-linejoin: round;
  stroke-linecap: round;
  paint-order: stroke fill;
}

.home-matrix-rain__neon-field .neon-sticker__fill {
  stroke: none;
  fill: var(--fill, #ff2d95);
}

.home-matrix-rain__neon-field .neon-sticker-wrap--heart-1 { --fill: #00f5ff; --outline-neon: #39ff14; }
.home-matrix-rain__neon-field .neon-sticker-wrap--heart-2 { --fill: #ff1744; --outline-neon: #39ff14; }
.home-matrix-rain__neon-field .neon-sticker-wrap--heart-3 { --fill: #b44dff; --outline-neon: #39ff14; }
.home-matrix-rain__neon-field .neon-sticker-wrap--star-1 { --fill: #b44dff; --outline-neon: #39ff14; }
.home-matrix-rain__neon-field .neon-sticker-wrap--star-2 { --fill: #b44dff; --outline-neon: #39ff14; }
.home-matrix-rain__neon-field .neon-sticker-wrap--star-3 { --fill: #b44dff; --outline-neon: #39ff14; }
.home-matrix-rain__neon-field .neon-sticker-wrap--skull-1 { --outline-neon: #39ff14; }
.home-matrix-rain__neon-field .neon-sticker-wrap--skull-2 { --outline-neon: #39ff14; }

.home-matrix-rain__neon-field .neon-sticker-wrap--skull-1 .neon-sticker__fill,
.home-matrix-rain__neon-field .neon-sticker-wrap--skull-2 .neon-sticker__fill {
  fill: url(#skull-rainbow);
}

.home-matrix-rain__neon-field .neon-sticker-wrap--skull-1 .neon-sticker__inner,
.home-matrix-rain__neon-field .neon-sticker-wrap--skull-2 .neon-sticker__inner {
  stroke-width: 6;
}

.home-matrix-rain__neon-field .neon-sticker-wrap--skull-1 .neon-sticker__outer,
.home-matrix-rain__neon-field .neon-sticker-wrap--skull-2 .neon-sticker__outer {
  stroke-width: 8;
}

.home-matrix-rain__neon-field .neon-sticker__squint {
  fill: none;
  stroke: #050505;
  stroke-width: 5;
  stroke-linecap: round;
}

.home-matrix-rain__neon-field .neon-sticker__nose {
  fill: #050505;
  stroke: none;
}

.home-matrix-rain__neon-field .neon-sticker__crack {
  fill: none;
  stroke: #050505;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-matrix-rain__neon-field .neon-sticker__bow {
  fill: #ff2d95;
  stroke: #050505;
  stroke-width: 2.5;
}

.home-matrix-rain__neon-field .neon-sticker__whisker {
  fill: none;
  stroke: #050505;
  stroke-width: 3.5;
  stroke-linecap: round;
}

.home-matrix-rain__neon-field .neon-sticker__bone {
  fill: none;
  stroke: #050505;
  stroke-width: 4.5;
  stroke-linecap: round;
}

.home-matrix-rain__neon-field .scene-sticker__burst {
  position: absolute;
  pointer-events: none;
  z-index: 10;
  transform: translate(-50%, -50%);
}

.home-matrix-rain__neon-field .scene-sticker__spark {
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 8px;
  transform: translate(0, 0) scale(1);
  opacity: 1;
  animation: home-matrix-spark-fly 650ms steps(2, end) forwards;
  animation-delay: var(--delay, 0ms);
}

.home-matrix-rain__neon-field .scene-sticker__spark::before,
.home-matrix-rain__neon-field .scene-sticker__spark::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}

.home-matrix-rain__neon-field .scene-sticker__spark::before {
  width: 2px;
  height: 8px;
}

.home-matrix-rain__neon-field .scene-sticker__spark::after {
  width: 8px;
  height: 2px;
}

@keyframes home-matrix-spark-fly {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }

  100% {
    transform: translate(var(--sx), var(--sy)) scale(0.4) rotate(45deg);
    opacity: 0;
  }
}

/* --- Image stickers --- */

.home-matrix-rain__img-sticker.img-sticker {
  position: relative;
  margin: 0;
  flex-shrink: 0;
  width: clamp(72px, 14vw, 160px) !important;
  max-width: clamp(72px, 14vw, 160px);
  aspect-ratio: var(--stage-aspect, 750 / 500);
}

.home-matrix-rain__img-sticker .img-sticker__shadow,
.home-matrix-rain__img-sticker .img-sticker__halo,
.home-matrix-rain__img-sticker .img-sticker__frame,
.home-matrix-rain__img-sticker .img-sticker__photo {
  position: absolute;
  inset: 0;
}

.home-matrix-rain__img-sticker .img-sticker__photo {
  z-index: 2;
  overflow: visible;
}

.home-matrix-rain__img-sticker .img-sticker__halo {
  z-index: 0;
  box-shadow:
    0 0 18px 6px color-mix(in srgb, var(--stroke, #e91e8c) 45%, transparent),
    0 0 36px 10px color-mix(in srgb, var(--stroke, #e91e8c) 25%, transparent);
  opacity: 0.92;
}

.home-matrix-rain__img-sticker .img-sticker__frame {
  z-index: 1;
  box-shadow:
    0 0 0 4px #050505,
    0 0 0 9px var(--stroke, #e91e8c),
    0 0 20px color-mix(in srgb, var(--stroke, #e91e8c) 80%, transparent);
}

.home-matrix-rain__img-sticker svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.home-matrix-rain__money-link {
  pointer-events: auto;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: inline-flex;
}

.home-matrix-rain__money-link:focus-visible {
  outline: 2px solid var(--stroke, #e4aefc);
  outline-offset: 4px;
  border-radius: 4px;
}

.home-matrix-rain__img-sticker.img-sticker.home-matrix-rain__img-sticker--money {
  width: clamp(140px, 28vw, 320px) !important;
  max-width: clamp(140px, 28vw, 320px);
  --anim-delay: 440ms;
}

.home-matrix-rain__img-sticker--money .img-sticker__photo {
  clip-path: none;
  overflow: visible;
}

.home-matrix-rain__img-sticker--money .stroke-text,
.home-matrix-rain__img-sticker--money .stroke-text__line {
  stroke-linejoin: round;
  stroke-linecap: round;
  font-family: 'Rubik', system-ui, sans-serif;
  font-weight: 900;
}

.home-matrix-rain__img-sticker--money .stroke-text__layer--stroke .stroke-text__line {
  fill: none;
  stroke: #e91e8c;
  stroke-width: 15px;
}

.home-matrix-rain__img-sticker--money .stroke-text__layer--fill .stroke-text__line {
  fill: #ffffff;
  stroke: none;
  stroke-width: 0;
}

.home-matrix-rain__img-sticker--money .stroke-text__rotator {
  transform-box: fill-box;
  transform-origin: center center;
}

.home-matrix-rain__img-sticker--money .image-sticker__frame-label {
  pointer-events: none;
}

.home-matrix-rain__img-sticker.img-sticker.home-matrix-rain__img-sticker--skull,
.home-matrix-rain__img-sticker.img-sticker.home-matrix-rain__img-sticker--skull-right {
  width: 100% !important;
  max-width: 100%;
  justify-self: center;
}

.home-matrix-rain__img-sticker.img-sticker.home-matrix-rain__img-sticker--skull {
  --anim-delay: 280ms;
}

.home-matrix-rain__img-sticker.img-sticker.home-matrix-rain__img-sticker--skull-right {
  --anim-delay: 120ms;
}

/* --- Intro copy --- */

.home-matrix-rain__stage {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: inherit;
  padding:
    calc(var(--site-header-height, calc(min(24vw, 140px) + 1.7rem)) + clamp(0.5rem, 2vh, 1rem))
    clamp(1.25rem, 4vw, 2.5rem)
    clamp(2.5rem, 8vh, 4rem);
  pointer-events: none;
}

.home-matrix-rain__brand .splash__title-line,
.home-matrix-rain__copy,
.home-matrix-rain__img-sticker,
.home-matrix-rain__neon-field .neon-sticker-wrap {
  opacity: 0;
}

.home-matrix-rain__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.85rem, 2.5vh, 1.5rem);
  width: 100%;
  max-width: none;
  text-align: center;
}

.home-matrix-rain__brand {
  margin: 0;
}

.home-matrix-rain__brand .splash__title {
  font-size: clamp(1.65rem, 5.5vw, 2.75rem);
}

.home-matrix-rain__brand .splash__title--single {
  flex-direction: row;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.home-matrix-rain__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, clamp(15rem, 34vw, 28rem)) minmax(0, 1fr);
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  width: 100%;
}

.home-matrix-rain__hero .home-matrix-rain__copy {
  min-width: 0;
}

.home-matrix-rain__copy {
  padding: clamp(1.1rem, 2.5vw, 1.5rem) clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid rgba(140, 110, 255, 0.28);
  border-radius: 0.65rem;
  background: rgba(5, 2, 12, 0.76);
  box-shadow:
    0 0 40px rgba(80, 40, 160, 0.18),
    inset 0 1px 0 rgba(196, 181, 253, 0.08);
}

.home-matrix-rain__headline {
  margin: 0 0 0.85rem;
  font-family: 'Metal Mania', fantasy, cursive;
  font-size: clamp(1.35rem, 4.2vw, 2.15rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.03em;
  text-transform: none;
  color: #f8fafc;
  text-shadow:
    0 0 24px rgba(191, 90, 242, 0.45),
    0 0 48px rgba(129, 140, 248, 0.25);
}

.home-matrix-rain__desc {
  margin: 0;
  max-width: 38rem;
  font-size: clamp(0.92rem, 2.1vw, 1.05rem);
  line-height: 1.65;
  color: rgba(236, 232, 255, 0.84);
}

.home-matrix-rain__hint {
  position: absolute;
  bottom: clamp(2rem, 6vh, 3.5rem);
  right: clamp(1.25rem, 4vw, 2.5rem);
  margin: 0;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(186, 168, 255, 0.55);
  text-shadow: 0 0 20px rgba(80, 40, 160, 0.45);
  animation: home-matrix-hint-pulse 2.4s ease-in-out infinite;
}

@keyframes home-matrix-hint-pulse {
  0%,
  100% {
    opacity: 0.55;
    transform: translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateY(4px);
  }
}

.home-matrix-rain--unsupported {
  background: #000;
}

@media (max-width: 720px) {
  .home-matrix-rain__hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, clamp(11rem, 52vw, 18rem)) minmax(0, 1fr);
    gap: clamp(0.25rem, 1.5vw, 0.75rem);
  }

  .home-matrix-rain__img-sticker.img-sticker.home-matrix-rain__img-sticker--money {
    width: clamp(120px, 52vw, 220px) !important;
    max-width: clamp(120px, 52vw, 220px);
  }

  .home-matrix-rain__brand .splash__title {
    font-size: clamp(1.35rem, 7vw, 2rem);
  }

  .home-matrix-rain__neon-field .neon-sticker-wrap--skull-1,
  .home-matrix-rain__neon-field .neon-sticker-wrap--star-3 {
    opacity: 0.7;
  }
}