/*
 * 40 — Textured surfaces
 * The "chalkboard", "soil", paper and gradient backgrounds from the Figma.
 * Texture photos live in ../images/textures/.
 */

/* Chalkboard: green board with a faint ruled-line overlay. */
.surface-chalkboard {
  position: relative;
  background-color: var(--chalk);
  background-image: linear-gradient(rgba(10, 48, 44, 0.2), rgba(10, 48, 44, 0.42)), url('../images/textures/chalkboard.jpg');
  background-size: cover;
  background-position: center;
  color: #f7f3e8;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.16), inset 0 -1px rgba(6, 36, 33, 0.65), inset 0 0 100px rgba(5, 35, 32, 0.2);
}
.surface-chalkboard::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 47px, rgba(245, 240, 220, 0.035) 48px);
  mix-blend-mode: screen;
}
.surface-chalkboard > * { position: relative; z-index: 1; }

/* Soil: dark green textured band; the background layer is parallax-driven. */
.surface-soil { background-color: var(--soil); isolation: isolate; overflow: hidden; }
.surface-soil__bg {
  position: absolute;
  inset: -84px 0;
  z-index: -1;
  background-image: linear-gradient(rgba(13, 59, 47, 0.7), rgba(15, 55, 47, 0.82)), url('../images/textures/soil.jpg');
  background-position: center;
  background-size: cover;
  will-change: transform;
}
.surface-soil__inner { position: relative; z-index: 1; }
.benefits__silhouette { opacity: 0.03; }

.surface-events {
  background-color: #eaf2eb;
  background-image:
    linear-gradient(105deg, rgba(32, 120, 64, 0.075), transparent 44%),
    radial-gradient(circle at 88% 10%, rgba(30, 104, 194, 0.055), transparent 25rem),
    repeating-linear-gradient(to bottom, transparent 0, transparent 39px, rgba(28, 43, 69, 0.04) 40px, transparent 40px);
  border-block: 1px solid rgba(32, 120, 64, 0.1);
}

.surface-consortium {
  background-color: #e8f1ea;
  background-image:
    linear-gradient(105deg, rgba(32, 120, 64, 0.08), transparent 42%),
    repeating-linear-gradient(to bottom, transparent 0, transparent 39px, rgba(28, 43, 69, 0.045) 40px);
  border-bottom: 1px solid var(--border);
}

/*
 * State seal watermark
 * The New Jersey Department of Education seal is used ONLY as a faint, blurred background
 * texture (decorative, aria-hidden, never a link or a label). It signals connection to the
 * state system without suggesting the site is run by, or speaks for, the agency.
 * Image: wp-content/uploads/2026/11/njdoe-seal.png
 */
.seal-watermark,
.surface-chalkboard > .seal-watermark {
  position: absolute;
  z-index: 0;
  aspect-ratio: 1;
  background: url('../../../../uploads/2026/11/njdoe-seal.png') center / contain no-repeat;
  filter: blur(3px) saturate(0.7);
  pointer-events: none;
}
.seal-watermark--bar { left: 6%; top: 50%; width: 11rem; translate: 0 -50%; opacity: 0.1; filter: blur(2px) saturate(0.6); }
.seal-watermark--footer { right: 4%; bottom: -9rem; width: 34rem; opacity: 0.09; }
.seal-watermark--hero { right: 7%; top: 50%; width: 30rem; translate: 0 -50%; opacity: 0.1; }
@media (max-width: 48rem) {
  .seal-watermark--footer { right: -8rem; width: 24rem; }
  .seal-watermark--hero { right: -9rem; width: 22rem; }
  .seal-watermark--bar { left: -3rem; }
}