/* Polygon grounds, site-wide — taken from the DP27 post.
   One continuous white triangle field is painted on the page root, so it
   runs unbroken from the header to the footer on every page; light
   sections go transparent to let it through, and navy bands carry the same
   triangles in very dark navy. polygons.js keeps the header and the navy
   bands registered to the root's grid, so every line runs straight through
   each seam and only changes colour. Replaces the quilted-wave pattern. */

html {
  background: url(../img/poly-white.svg?v=4) repeat center top / 1800px 1100px #fff;
}

body {
  background: transparent !important;
}

/* ---------- light sections: transparent onto the white field ---------- */
.background-color-seashell,
.background-color-antique-white,
.background-color-white,
.background-color-peach,
.section-our-services,
.section-callout,
.header-callout,
.callout_component,
.apply-landing-section,
.main-wrapper,
.section-hero.hero-quilt,
.hero-quilt .hero-spiral,
.ab-intro,
.ab-story,
.ab-countdown,
.exec-section,
.st-sec,
.st-photos,
.cx-section-white,
.th-issues-head,
.footer {
  background: transparent !important;
}

/* the footer's rule would draw a line across the field */
.footer {
  border-top: 0;
}

/* ---------- navy bands ---------- */
.ab-stats,
.ab-panel,
.vp-stats {
  background: url(../img/poly-navy.svg?v=4) repeat var(--poly-x, 50%) var(--poly-y, 0px) / 1800px 1100px #011a45 !important;
}

/* stats bands: no rules above the figures, the polygons do the dividing */
.ab-stat {
  border-top: 0;
}

/* ---------- header: a window onto the same white field ----------
   no frosted glass, hairline or shadow at the top of the page */
.navbar-logo-left-container.w-nav,
body.mundp-scrolled .navbar-logo-left-container.w-nav {
  background: url(../img/poly-white.svg?v=4) repeat var(--poly-x, 50%) var(--poly-y, 0px) / 1800px 1100px #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 0;
  box-shadow: none;
}

/* once content scrolls underneath, only a whisper of a shadow separates it */
body.mundp-scrolled .navbar-logo-left-container.w-nav {
  box-shadow: 0 10px 28px -22px rgba(1, 26, 69, 0.28);
}

/* ---------- logo heroes (home, About, Story, Executive Committee,
   Registration): the shattering triangle mark from hero-spiral.js ---------- */

/* lighter veil behind the hero type now that the ground is flat white; it
   fades out toward the hero's bottom so shards crossing that edge don't
   suddenly change tone */
.hero-quilt .hero-float-scrim {
  background:
    linear-gradient(102deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.2) 38%, rgba(255, 255, 255, 0) 64%);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 90%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 90%);
}

/* no film grain: the rest of the page has none, so it drew a grey box
   ending in a hard line at the hero's bottom edge */
.hero-quilt .hero-float-grain {
  display: none;
}

/* the hero clips sideways only (no horizontal scroll) so shards can leave
   it; sections after it stack above, so shards pass behind their text and
   under the navy bands */
.section-hero.hero-quilt,
.hero-quilt .hero-spiral {
  overflow-x: clip;
  overflow-y: visible;
}

.hero-quilt ~ :is(section, header),
.footer {
  position: relative;
  z-index: 1;
}

/* the positioner is only a geometry reference now; the shards live in
   their own layer in hero coordinates, each a pair of canvases with its
   photo, tint, triangle and slice of the logo mask painted in */
.hero-spiral-pos {
  visibility: hidden;
}

.hero-spiral-shards {
  position: absolute;
  inset: 0;
  animation: hero-spiral-in 1.4s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

/* only transforms and opacities change while scrolling */
.hero-spiral-tri {
  position: absolute;
  display: block;
  will-change: transform, opacity;
}

.hero-spiral-tri canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* small screens: the ghosted watermark treatment moves to the shards */
@media (max-width: 900px) {
  .hero-quilt .hero-spiral-shards {
    opacity: 0.34;
  }
}