/* ============================================================================
   Peptide Portal — gradient backdrop (light + dark)
   Modelled on originscience.com: a few large, soft radial glows of the brand
   colour sit behind the whole page, pinned to the viewport, and the panels and
   cards float on top of them as solid surfaces.

   How it works
   - body::before is a fixed, full-viewport layer holding the glows. A fixed layer
     (rather than background-attachment: fixed) keeps the glows the same size on
     every page length and works on iOS Safari, which ignores attachment: fixed.
   - The full-width section "bands" that used to paint page-white are made
     transparent so the glows show between panels. The header and announcement
     strip become frosted glass so the glow reads through them as you scroll.
   - Panels, cards, drawers and inputs are untouched: they stay solid.

   Tune the look with the --dp-glow-* tokens below; everything else follows.
   ============================================================================ */

:root {
  /* Light mode is a FLAT white page: no glows, no sheen, no gradient.
     The glow treatment is dark mode's alone (overridden below). */
  --dp-page:        #FFFFFF;
  --dp-glow-1:      transparent;
  --dp-glow-2:      transparent;
  --dp-glow-3:      transparent;
  --dp-glow-4:      transparent;
  --dp-glow-sheen:  transparent;
  --dp-glass:       rgba(255, 255, 255, .84);          /* header + strip          */
  --dp-glass-menu:  rgba(255, 255, 255, .94);          /* open mobile dropdown    */
  --dp-glass-line:  rgba(46, 36, 30, .06);
}

:root[data-theme="dark"] {
  --dp-page:        #120C08;
  --dp-glow-1:      hsl(13 80% 50% / .40);
  --dp-glow-2:      hsl(14 80% 52% / .24);
  --dp-glow-3:      hsl(16 72% 56% / .13);
  --dp-glow-4:      hsl(37 81% 48% / .20);
  --dp-glow-sheen:  hsl(16 32% 30% / .0);
  --dp-glass:       rgba(22, 16, 12, .8);
  --dp-glass-menu:  rgba(22, 16, 12, .94);
  --dp-glass-line:  rgba(255, 255, 255, .06);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="dark"] {
    --dp-page:        #120C08;
    --dp-glow-1:      hsl(13 80% 50% / .40);
    --dp-glow-2:      hsl(14 80% 52% / .24);
    --dp-glow-3:      hsl(16 72% 56% / .13);
    --dp-glow-4:      hsl(37 81% 48% / .20);
    --dp-glow-sheen:  hsl(16 32% 30% / .0);
    --dp-glass:       rgba(22, 16, 12, .8);
    --dp-glass-menu:  rgba(22, 16, 12, .94);
    --dp-glass-line:  rgba(255, 255, 255, .06);
  }
}

/* --- The glow layer ------------------------------------------------------ */
html { background: var(--dp-page); }
body.dp { background: transparent; }
body.dp::before {
  content: "";
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(170deg, var(--dp-glow-sheen) 0%, transparent 55%),
    radial-gradient(ellipse 80% 60% at 75% -5%,  var(--dp-glow-1) 0%, transparent 58%),
    radial-gradient(ellipse 66% 56% at -6% 80%,  var(--dp-glow-2) 0%, transparent 55%),
    radial-gradient(ellipse 70% 58% at 50% 54%,  var(--dp-glow-3) 0%, transparent 62%),
    radial-gradient(ellipse 56% 48% at 94% 90%,  var(--dp-glow-4) 0%, transparent 52%),
    var(--dp-page);
}

/* --- Let it show between panels ------------------------------------------ */
body.dp :is(.dp-proof, .dp-ruo, .dp-rail, .dp-proc, .dp-textus, .dp-faq,
            .dp-ctab, .dp-coa, .dp-page__hero, .dp-ab__band, .dp-ab__band--alt,
            .dp-main) {
  background-color: transparent;
}

/* Frosted header + announcement strip. */
body.dp .dp-strip,
body.dp .dp-head {
  background-color: var(--dp-glass);
  -webkit-backdrop-filter: saturate(1.6) blur(24px);
          backdrop-filter: saturate(1.6) blur(24px);
}
body.dp .dp-head { box-shadow: 0 1px 0 var(--dp-glass-line); }

/* The mobile nav drops down from the header; give it the same glass so it doesn't
   read as a white slab hanging off a translucent bar. */
@media (max-width: 809px) {
  body.dp .dp-nav {
    background-color: var(--dp-glass-menu, var(--dp-glass));
    -webkit-backdrop-filter: saturate(1.6) blur(44px);
            backdrop-filter: saturate(1.6) blur(44px);
  }
  /* The menu scrim moved into the side drawer itself (.dp-nav::before in
     site.css) when the dropdown became a drawer — a second full-page scrim
     here would sit ABOVE the drawer (z 89 vs 85) and blur the panel too. */
}

/* Panels that were near-white-on-white now sit on a coloured ground: lift the
   light-mode ones to pure white so they read as clean cards, as on Origin. */
:root:not([data-theme="dark"]) body.dp :is(.dp-ruo__panel, .dp-proc__panel, .dp-textus__panel,
  .dp-page__panel, .dp-ab__panel, .dp-ab__ruo, .dp-ab__close, .dp-coa__row) {
  background-color: var(--dpx-bg-ffffff, #FFFFFF);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="dark"] body.dp :is(.dp-ruo__panel, .dp-proc__panel, .dp-textus__panel,
    .dp-page__panel, .dp-ab__panel, .dp-ab__ruo, .dp-ab__close, .dp-coa__row) {
    background-color: var(--dp-surface-alt);
  }
}

@media (prefers-reduced-transparency: reduce) {
  body.dp .dp-strip, body.dp .dp-head, body.dp .dp-nav {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background-color: var(--dp-surface);
  }
}