/* Layered homepage hero: independent city background and character artwork. */
.home-hero {
  /* 40vw + platform overlap keeps the 2.5:1 artwork from cropping vertically on wide screens. */
  min-height: max(clamp(680px, 72vh, 820px), calc(40vw + 44px));
  isolation: isolate;
}

.home-hero::before {
  z-index: 1;
  background:
    radial-gradient(circle at 78% 52%, rgba(255, 46, 136, .18), transparent 28%),
    radial-gradient(circle at 72% 38%, rgba(41, 224, 255, .10), transparent 26%),
    linear-gradient(90deg, #060609 0%, rgba(6, 6, 9, .96) 18%, rgba(6, 6, 9, .78) 36%, rgba(6, 6, 9, .50) 50%, rgba(6, 6, 9, .18) 64%, rgba(6, 6, 9, .04) 78%, transparent 90%),
    linear-gradient(180deg, rgba(6, 6, 9, .28), transparent 30%, transparent 66%, rgba(6, 6, 9, .84));
}

.home-hero::after {
  z-index: 3;
}

.home-hero__background,
.home-hero__character {
  position: absolute;
  /* Stops where the stats platform overlaps the hero, so the feet stay visible. */
  inset: 0 0 44px;
  width: 100%;
  height: calc(100% - 44px);
  object-fit: cover;
  object-position: 69% 80%;
  transform-origin: 69% 100%;
  pointer-events: none;
  user-select: none;
}

.home-hero__background {
  z-index: 0;
  filter: brightness(.68) saturate(.92) contrast(1.05);
  animation: home-hero-background-breathe 22s ease-in-out infinite;
}

.home-hero__character {
  z-index: 2;
  animation: home-hero-character-float 7.5s ease-in-out infinite;
}

.home-hero__character.is-glitching {
  animation:
    home-hero-character-float 7.5s ease-in-out infinite,
    home-hero-character-glitch 420ms steps(1, end);
}

.home-hero__inner,
.home-scroll {
  z-index: 4;
}

.home-rain {
  z-index: 3;
}

@keyframes home-hero-background-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

@keyframes home-hero-character-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -6px, 0); }
}

/* Uses `translate`, not `transform`, so it layers on top of the float. */
@keyframes home-hero-character-glitch {
  0%, 100% { translate: 0; clip-path: none; filter: none; }
  10% { translate: -6px 1px; clip-path: inset(12% 0 52% 0); filter: drop-shadow(5px 0 #ff2e88) drop-shadow(-5px 0 #29e0ff); }
  22% { translate: 7px -1px; clip-path: inset(48% 0 18% 0); filter: drop-shadow(-4px 0 #ff2e88) drop-shadow(4px 0 #29e0ff); }
  36%, 64% { translate: 0; clip-path: none; filter: none; }
  48% { translate: -4px 0; clip-path: inset(30% 0 34% 0); filter: drop-shadow(4px 0 #29e0ff) hue-rotate(40deg); }
  80% { translate: 3px 0; clip-path: inset(70% 0 4% 0); filter: drop-shadow(-3px 0 #ff2e88); }
}

@media (max-width: 920px) {
  .home-hero::before {
    background:
      linear-gradient(90deg, #060609 0%, rgba(6, 6, 9, .96) 30%, rgba(6, 6, 9, .78) 52%, rgba(6, 6, 9, .38) 72%, rgba(6, 6, 9, .14) 100%),
      linear-gradient(180deg, rgba(6, 6, 9, .30), transparent 34%, transparent 62%, rgba(6, 6, 9, .90));
  }

  .home-hero__character {
    z-index: 0;
  }
}

@media (max-width: 760px) {
  .home-hero {
    min-height: 650px;
  }

  .home-hero__background,
  .home-hero__character {
    object-position: 70% 80%;
  }
}