:root {
  --dk-route-hero-image: none;
  --dk-route-hero-position: center;
  --dk-route-hero-opacity: 0.72;
  --dk-route-hero-accent: rgba(201, 13, 18, 0.34);
}

#root main > section[data-dk-route-hero] {
  background: #000 !important;
  isolation: isolate;
  position: relative;
}

#root main > section[data-dk-route-hero]::before {
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.62) 42%, rgba(0, 0, 0, 0.18) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.58) 100%),
    var(--dk-route-hero-image);
  background-position: center, center, var(--dk-route-hero-position);
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  filter: saturate(1.14) contrast(1.05);
  inset: 0;
  opacity: var(--dk-route-hero-opacity);
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

#root main > section[data-dk-route-hero]::after {
  background:
    radial-gradient(circle at 74% 34%, var(--dk-route-hero-accent), transparent 22rem),
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.08), transparent 18rem),
    linear-gradient(180deg, transparent 58%, rgba(0, 0, 0, 0.72) 100%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

#root main > section[data-dk-route-hero] > .absolute,
#root main > section[data-dk-route-hero] > .fixed,
#root main > section[data-dk-route-hero] > .sticky {
  z-index: 2;
}

#root main > section[data-dk-route-hero] > :not(.absolute):not(.fixed):not(.sticky) {
  position: relative;
  z-index: 3;
}

#root main > section[data-dk-route-hero='home'] {
  --dk-route-hero-image: url("/darkkevn/page-heroes/home-studio.png");
  --dk-route-hero-position: center right;
  --dk-route-hero-opacity: 0.64;
  --dk-route-hero-accent: rgba(201, 13, 18, 0.36);
}

#root main > section[data-dk-route-hero='services'] {
  --dk-route-hero-image: url("/darkkevn/page-heroes/services-matrix.png");
  --dk-route-hero-position: center;
  --dk-route-hero-opacity: 0.76;
  --dk-route-hero-accent: rgba(248, 113, 113, 0.32);
}

#root main > section[data-dk-route-hero='process'] {
  --dk-route-hero-image: url("/darkkevn/page-heroes/process-path.png");
  --dk-route-hero-position: center;
  --dk-route-hero-opacity: 0.8;
  --dk-route-hero-accent: rgba(201, 13, 18, 0.38);
}

#root main > section[data-dk-route-hero='app-development'] {
  --dk-route-hero-image: url("/darkkevn/page-heroes/app-development-systems.png");
  --dk-route-hero-position: center right;
  --dk-route-hero-opacity: 0.78;
  --dk-route-hero-accent: rgba(236, 72, 153, 0.38);
}

#root main > section[data-dk-route-hero='nft-deploy'] {
  --dk-route-hero-image: url("/darkkevn/page-heroes/nft-deploy-vault.png");
  --dk-route-hero-position: center right;
  --dk-route-hero-opacity: 0.82;
  --dk-route-hero-accent: rgba(56, 189, 248, 0.35);
}

#root main > section[data-dk-route-hero='start-project'] {
  --dk-route-hero-image: url("/darkkevn/page-heroes/start-project-intake.png");
  --dk-route-hero-position: center right;
  --dk-route-hero-opacity: 0.78;
  --dk-route-hero-accent: rgba(248, 113, 113, 0.34);
}

@media (max-width: 767px) {
  #root main > section[data-dk-route-hero]::before {
    background-image:
      linear-gradient(180deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.42) 44%, rgba(0, 0, 0, 0.78) 100%),
      var(--dk-route-hero-image);
    background-position: center, var(--dk-route-hero-position);
  }
}