/* Purely decorative hero layers: dot grid, diagonal hatch, glows, corner marks. */

.hero__layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__layer--dots {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 36px 36px;
}

.hero__layer--hatch {
  background-image: repeating-linear-gradient(115deg,
    rgba(255, 255, 255, 0.025) 0px, rgba(255, 255, 255, 0.025) 1px,
    transparent 1px, transparent 90px);
}

.hero__glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.hero__glow--tr {
  top: -15%;
  right: -10%;
  width: 55%;
  height: 70%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
}

.hero__glow--bl {
  bottom: -10%;
  left: -5%;
  width: 40%;
  height: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.035) 0%, transparent 70%);
}

/* Corner registration marks */
.hero__mark {
  position: absolute;
  width: 22px;
  height: 22px;
  pointer-events: none;
  --mark: 1px solid rgba(255, 255, 255, 0.35);
}

.hero__mark--tl {
  top: 40px;
  left: 40px;
  border-block-start: var(--mark);
  border-inline-start: var(--mark);
}

.hero__mark--tr {
  top: 40px;
  right: 40px;
  border-block-start: var(--mark);
  border-inline-end: var(--mark);
}

.hero__mark--bl {
  bottom: 70px;
  left: 40px;
  border-block-end: var(--mark);
  border-inline-start: var(--mark);
}

.hero__mark--br {
  bottom: 70px;
  right: 40px;
  border-block-end: var(--mark);
  border-inline-end: var(--mark);
}

@media (max-width: 720px) {
  .hero__mark { display: none; }
}