/* Detailed hero composition: canvas strands, masks, glow, then UI. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #030405;
}

.hero-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 99.3% 50.5%, rgba(255,250,235,.22) 0 1px, rgba(229,192,125,.10) 3%, transparent 18%),
    linear-gradient(90deg,
      rgba(3,4,5,1) 0%,
      rgba(3,4,5,.995) 17%,
      rgba(3,4,5,.96) 27%,
      rgba(3,4,5,.79) 36%,
      rgba(3,4,5,.42) 44%,
      rgba(3,4,5,.10) 54%,
      rgba(3,4,5,0) 65%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.10), transparent 15%, transparent 83%, rgba(0,0,0,.20)),
    radial-gradient(ellipse at 99% 51%, rgba(255,238,198,.08), transparent 23%);
}

.hero-copy {
  position: relative;
  z-index: 3;
}

@media (min-width: 1101px) {
  .hero {
    min-height: 510px;
    height: 510px;
    padding: 81px 0 77px 112px;
  }

  .hero-copy { width: 610px; }
}

@media (max-width: 1100px) {
  .hero::after {
    background:
      linear-gradient(90deg,
        rgba(3,4,5,1) 0%,
        rgba(3,4,5,.97) 34%,
        rgba(3,4,5,.66) 50%,
        rgba(3,4,5,.08) 74%,
        transparent 100%);
  }
}

@media (max-width: 760px) {
  .hero-art {
    top: 225px;
    height: calc(100% - 185px);
    transform: scale(1.42);
    transform-origin: 82% 52%;
    opacity: .86;
  }

  .hero::after {
    background:
      linear-gradient(180deg,
        rgba(3,4,5,1) 0%,
        rgba(3,4,5,.98) 35%,
        rgba(3,4,5,.66) 62%,
        rgba(3,4,5,.12) 100%);
  }
}