/* A shared print texture ties the five pages to the original home artwork. */
.hero {
  background-image:
    linear-gradient(90deg, rgba(1, 22, 29, .82) 0%, rgba(1, 24, 31, .59) 45%, rgba(1, 24, 31, .38) 100%),
    radial-gradient(circle at 74% 46%, rgba(6, 66, 74, .26), transparent 43%),
    url("assets/andreground-hero-glitch-v1--sha256-2893de7389f0.jpg");
  background-position: center, center, center;
  background-size: cover;
}

.hero-grid {
  opacity: .19;
  background-size: 84px 84px;
  mask-image: linear-gradient(90deg, transparent 12%, #000 70%);
}

.hero-art { isolation: isolate; }
.art-halo { border-color: rgba(231, 222, 202, .36); }
.logo-sound { box-shadow: 22px 22px 0 rgba(1, 24, 31, .64), 23px 23px 0 rgba(216, 180, 126, .54); }
.logo-sound:hover { box-shadow: 28px 28px 0 rgba(1, 24, 31, .68), 29px 29px 0 rgba(216, 180, 126, .62); }
.sound-tag { position: static; display: block; }

.page-hero {
  background-color: var(--deep);
  background-size: cover;
  background-repeat: no-repeat;
}
.page-hero::before { opacity: .56; }
.page-hero::after {
  inset: 0;
  opacity: .52;
  mix-blend-mode: screen;
  background-repeat: no-repeat;
  background-size: cover;
}
.page-hero-inner { z-index: 2; }
.page-hero h1 { text-shadow: 0 2px 28px rgba(0, 12, 18, .3); }

/* Music: deep teal, record grooves and a fine equalizer grid. */
.page-hero-music {
  background-image:
    linear-gradient(90deg, rgba(1, 22, 29, .97), rgba(1, 29, 37, .9) 48%, rgba(4, 48, 56, .6)),
    url("assets/andreground-hero-glitch-v1--sha256-2893de7389f0.jpg");
  background-position: center, 58% 54%;
}
.page-hero-music::after {
  background-image:
    repeating-radial-gradient(circle at 82% 46%, transparent 0 17px, rgba(225, 215, 190, .24) 18px, transparent 19px),
    repeating-linear-gradient(90deg, transparent 0 35px, rgba(96, 179, 183, .13) 36px, transparent 37px);
}

/* Projects: clipped horizontal frames and warm signal interruptions. */
.page-hero-projects {
  background-image:
    linear-gradient(90deg, rgba(1, 22, 29, .98), rgba(6, 31, 37, .87) 46%, rgba(69, 48, 39, .58)),
    url("assets/andreground-hero-glitch-v1--sha256-2893de7389f0.jpg");
  background-position: center, 88% 45%;
}
.page-hero-projects::after {
  background-image:
    repeating-linear-gradient(0deg, transparent 0 52px, rgba(226, 181, 125, .22) 53px, transparent 54px, transparent 108px),
    linear-gradient(90deg, transparent 57%, rgba(217, 151, 102, .24) 57.2%, transparent 57.5%, transparent 76%, rgba(229, 218, 190, .17) 76.2%, transparent 76.5%);
}

/* Story: quiet vertical strata, like a route marked through an archive. */
.page-hero-about {
  background-image:
    linear-gradient(90deg, rgba(1, 22, 29, .98), rgba(5, 32, 39, .89) 48%, rgba(31, 62, 63, .61)),
    url("assets/andreground-hero-glitch-v1--sha256-2893de7389f0.jpg");
  background-position: center, 67% 70%;
}
.page-hero-about::after {
  background-image:
    repeating-linear-gradient(90deg, transparent 0 67px, rgba(208, 222, 210, .16) 68px, transparent 69px, transparent 136px),
    linear-gradient(118deg, transparent 62%, rgba(216, 180, 126, .22) 62.2%, transparent 62.5%);
}

/* Contact: angled transmission rays and a restrained copper pulse. */
.page-hero-contact {
  background-image:
    linear-gradient(90deg, rgba(1, 22, 29, .98), rgba(4, 30, 37, .88) 48%, rgba(68, 44, 37, .61)),
    url("assets/andreground-hero-glitch-v1--sha256-2893de7389f0.jpg");
  background-position: center, 96% 64%;
}
.page-hero-contact::after {
  background-image:
    repeating-linear-gradient(124deg, transparent 0 76px, rgba(225, 177, 131, .19) 77px, transparent 78px, transparent 152px),
    radial-gradient(circle at 83% 54%, transparent 0 80px, rgba(232, 199, 150, .24) 81px, transparent 83px, transparent 154px, rgba(232, 199, 150, .15) 155px, transparent 157px);
}

/* The quieter section treatment extends the same material without crowding content. */
.section-light {
  background-image: radial-gradient(circle at 92% 12%, rgba(143, 112, 76, .09), transparent 36%), repeating-linear-gradient(0deg, transparent 0 5px, rgba(5, 45, 54, .014) 6px, transparent 7px);
}
.section-dark {
  background-image: radial-gradient(circle at 10% 12%, rgba(84, 147, 151, .13), transparent 42%), repeating-linear-gradient(0deg, transparent 0 5px, rgba(240, 235, 222, .018) 6px, transparent 7px);
}
.section-gold, .statement {
  background-image: repeating-linear-gradient(0deg, transparent 0 6px, rgba(1, 26, 34, .035) 7px, transparent 8px);
}
.route-card, .project-card, .video-card, .player-shell, .bandcamp-art {
  border-top: 2px solid rgba(216, 180, 126, .75);
}
.route-card { border-top-color: rgba(5, 45, 54, .43); }
.route-card:hover { border-top-color: var(--gold); }
.video-card { background: linear-gradient(155deg, #0c3d47, #062a33); }
.project-card { background-size: cover, cover; background-repeat: no-repeat; }
.pirates {
  background-image: linear-gradient(180deg, rgba(1, 24, 31, .28), rgba(1, 24, 31, .58) 46%, rgba(1, 24, 31, .96)), url("assets/projects/pirates-band--sha256-f783868ed316.jpg");
  background-position: center, center 48%;
}
.tardigrade {
  background-image: linear-gradient(180deg, rgba(1, 24, 31, .32), rgba(1, 24, 31, .66) 48%, rgba(1, 24, 31, .97)), url("assets/projects/trdgrd-band--sha256-f61492883440.jpg");
  background-position: center, center 42%;
}

@media (max-width: 740px) {
  .hero {
    background-image:
      linear-gradient(180deg, rgba(1, 22, 29, .88), rgba(1, 22, 29, .7) 62%, rgba(1, 22, 29, .48)),
      url("assets/andreground-hero-glitch-v1--sha256-2893de7389f0.jpg");
    background-position: center, 64% center;
  }
  .page-hero { background-position: center, 74% center; }
  .page-hero::after { opacity: .27; }
}