.about-page {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background-color: #fafaf9;
  background-image: none;
  background-size: cover, auto calc(100vh - 64px);
  background-position: center, right bottom;
  background-repeat: no-repeat;
  background-attachment: scroll, fixed;
}

.about-explosion {
  position: absolute; top: 0; right: -2%; width: min(1000px, 90vw); aspect-ratio: 1;
  z-index: -1; pointer-events: none; opacity: .9; mix-blend-mode: multiply;
  filter: saturate(1.25);
  mask-image: linear-gradient(90deg, transparent, #000 35%, #000 92%, transparent), linear-gradient(180deg, #000 82%, transparent 100%);
  mask-composite: intersect;
}
.exploded-part {
  position: absolute; width: 50%; height: 50%;
  background-image: url('/assets/dablsync-parts-atlas.png');
  background-size: 400% 200%; background-repeat: no-repeat;
  mix-blend-mode: multiply;
  animation: exploded-drift 22s ease-in-out infinite alternate;
  will-change: transform;
}
.exploded-part:nth-child(1) { background-position: 0 0; width: 65%; height: 65%; left: 22%; top: -13%; --dx: 10px; --dy: -42px; --turn: -.8deg; }
.exploded-part:nth-child(2) { background-position: 33.333% 0; width: 36%; height: 36%; left: 2%; top: 20%; --dx: -46px; --dy: -12px; --turn: -1.6deg; animation-duration: 37s; }
.exploded-part:nth-child(3) { background-position: 66.667% 0; left: 12%; top: 22%; --dx: -22px; --dy: -20px; --turn: -.5deg; animation-duration: 41s; }
.exploded-part:nth-child(4) { background-position: 100% 0; left: 42%; top: 22%; --dx: 12px; --dy: -25px; --turn: .7deg; animation-duration: 35s; }
.exploded-part:nth-child(5) { background-position: 0 100%; width: 36%; height: 36%; left: 70%; top: 20%; --dx: 48px; --dy: -16px; --turn: 1.8deg; animation-duration: 39s; }
.exploded-part:nth-child(6) { background-position: 33.333% 100%; left: 32%; top: 43%; --dx: 7px; --dy: 22px; --turn: .6deg; animation-duration: 43s; }
.exploded-part:nth-child(7) { background-position: 66.667% 100%; width: 65%; height: 65%; left: 23%; top: 60%; --dx: -14px; --dy: 38px; --turn: -.6deg; animation-duration: 45s; }
.exploded-part:nth-child(8) { background-position: 100% 100%; width: 36%; height: 36%; left: 68%; top: 73%; --dx: 43px; --dy: 37px; --turn: 1.4deg; animation-duration: 40s; }
@keyframes exploded-drift { from { transform: translate(0,0) rotate(0); } to { transform: translate(var(--dx),var(--dy)) rotate(var(--turn)); } }
html[data-theme=soft-dark] .about-explosion { mix-blend-mode: screen; opacity: .46; }
html[data-theme=soft-dark] .exploded-part { filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; }
@media(max-width:1023px) { .about-explosion { width: 850px; right: -280px; opacity: .6; } }
@media(prefers-reduced-motion:reduce) { .exploded-part { animation: none; will-change: auto; } }

.about-page .hero-surface {
  min-height: 700px;
  background: transparent;
}

.about-page .hero-title-plate {
  transform: none;
  background: transparent;
}

.about-page .hero-text-glow {
  display: none;
}

.about-page :is(.muted-copy, .editorial-label, h1, h2, h3, blockquote) {
  text-shadow: 0 1px 2px rgba(250, 250, 249, .8);
}

.exploded-part:nth-child(2) { animation-duration: 25s; }
.exploded-part:nth-child(3) { animation-duration: 28s; }
.exploded-part:nth-child(4) { animation-duration: 24s; }
.exploded-part:nth-child(5) { animation-duration: 26s; }
.exploded-part:nth-child(6) { animation-duration: 29s; }
.exploded-part:nth-child(7) { animation-duration: 30s; }
.exploded-part:nth-child(8) { animation-duration: 27s; }

.about-page .story-grid {
  gap: 32px;
}

.about-page .story-grid > article,
.about-page .founders-column {
  padding: 32px;
  border: 1px solid rgba(226, 232, 240, .8);
  border-radius: 20px;
  background: transparent;
}

.about-page .founder-card {
  background: rgba(250, 250, 249, .18);
  box-shadow: none;
}

html[data-theme=soft-dark] .about-page {
  background-color: #020617;
  background-image: none;
}

html[data-theme=soft-dark] .about-page .hero-surface {
  background: transparent;
}

html[data-theme=soft-dark] .about-page .hero-text-glow,
html[data-theme=soft-dark] .about-page .story-grid > article,
html[data-theme=soft-dark] .about-page .founders-column {
  background: transparent;
  border-color: #1e293b;
}

html[data-theme=soft-dark] .about-page .founder-card { background: rgba(2, 6, 23, .18); }
html[data-theme=soft-dark] .about-page :is(.muted-copy, .editorial-label, h1, h2, h3, blockquote) {
  text-shadow: 0 1px 2px rgba(2, 6, 23, .8);
}

@media (max-width: 1023px) {
  .about-page {
    background-size: cover, auto 850px;
    background-position: center, center top;
    background-attachment: scroll;
  }

  .about-page .hero-surface {
    min-height: auto;
  }

  .about-page .story-grid > article,
  .about-page .founders-column {
    padding: 24px;
  }
}

@media (max-width: 640px) {
  body > header {
    gap: 8px;
    padding-inline: 10px;
  }

  #closePage > span {
    display: none;
  }

  #siteNav + div {
    gap: 6px;
  }

  .cart-btn-plate {
    padding: 6px 9px;
  }
}