:root {
  --night: #020304;
  --panel: #080d12;
  --ice: #e8fbfa;
  --aqua: #63e8ff;
  --pink: #ff4fc8;
  --pearl: #f3f1ea;
  --muted: #8b9ca3;
  --line: rgba(142, 222, 228, .18);
  --coral: #ff6bbb;
  --scroll-progress: 0;
}

html { background: #020304; }

body {
  background: #020304 !important;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: -12vh -8vw;
  pointer-events: none;
  background:
    radial-gradient(ellipse 44% 31% at -5% 20%, rgba(85, 255, 136, .68), transparent 72%),
    radial-gradient(ellipse 41% 30% at 105% 34%, rgba(255, 58, 190, .66), transparent 72%),
    radial-gradient(ellipse 48% 34% at 12% 86%, rgba(57, 218, 255, .7), transparent 72%),
    radial-gradient(ellipse 42% 32% at 88% 93%, rgba(255, 79, 200, .58), transparent 72%);
  opacity: calc(.035 + (var(--scroll-progress) * .68));
  filter: saturate(calc(.9 + (var(--scroll-progress) * .9))) blur(16px);
  transform: scale(calc(1 + (var(--scroll-progress) * .055)));
  transform-origin: center bottom;
  will-change: opacity, filter, transform;
}

body::after {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 0 27%, rgba(2, 3, 4, .08) 48%, rgba(2, 3, 4, .18) 100%),
    url("assets/mycelium-network-study.webp") center bottom / min(1180px, 112vw) auto no-repeat;
  opacity: clamp(0, calc((var(--scroll-progress) - .48) * 1.42), .68);
  filter: saturate(1.55) contrast(1.12) brightness(1.34) drop-shadow(0 0 28px rgba(99, 232, 255, .52));
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(0, 0, 0, .15) 44%, #000 70%);
  mask-image: linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(0, 0, 0, .15) 44%, #000 70%);
  transform: translateY(calc((1 - var(--scroll-progress)) * 7vh)) scale(1.05);
  transform-origin: center bottom;
  will-change: opacity, transform;
}

.nav-wrap, main, footer { position: relative; z-index: 1; }
.hero { background: #020304 !important; }
.manifesto { background: radial-gradient(ellipse at 0 65%, rgba(85, 255, 136, .035), transparent 46%); }
.scales { background: radial-gradient(ellipse at 100% 45%, rgba(99, 232, 255, .055), transparent 48%); }
.art-direction { background: radial-gradient(ellipse at 0 70%, rgba(85, 255, 136, .075), transparent 50%); }
.choice-section { background: linear-gradient(90deg, rgba(85, 255, 136, .07), transparent 35%, transparent 64%, rgba(255, 79, 200, .085)); }
.feature-strip { background: rgba(2, 5, 7, .38); box-shadow: 0 0 90px rgba(99, 232, 255, .06); }
.development { background: rgba(3, 7, 10, .58); box-shadow: inset 0 0 120px rgba(255, 79, 200, .025); }
.creator {
  background:
    linear-gradient(90deg, rgba(2, 3, 4, .88), rgba(2, 3, 4, .55) 48%, rgba(2, 3, 4, .2)),
    radial-gradient(ellipse at 82% 58%, rgba(99, 232, 255, .13), transparent 46%);
  text-shadow: 0 2px 18px rgba(0, 0, 0, .92);
}
.closing {
  background:
    linear-gradient(90deg, rgba(2, 3, 4, .7), rgba(2, 3, 4, .18) 55%, rgba(2, 3, 4, .36)),
    radial-gradient(circle at 20% 55%, rgba(89, 158, 161, .24), transparent 33%);
  text-shadow: 0 2px 24px rgba(0, 0, 0, .95);
}
.media-placeholder { box-shadow: 0 0 55px rgba(57, 218, 255, .035); }
.media-card:nth-child(even) .media-placeholder { border-color: rgba(255, 79, 200, .22); box-shadow: 0 0 55px rgba(255, 79, 200, .045); }
.media-card:nth-child(even) .media-copy > span { color: var(--pink); }
.dominance { color: var(--pink); }
.art-study { box-shadow: 0 0 50px rgba(85, 255, 136, .06); }
.network-study { box-shadow: 0 0 58px rgba(255, 79, 200, .09); }
.bracket-word { color: var(--pink); text-shadow: 0 0 24px rgba(255, 79, 200, .28); white-space: nowrap; }

.creator .section-number,
.creator-copy .lead-small,
.closing .bracket-word,
footer a {
  text-shadow: 0 0 14px currentColor, 0 2px 18px #000;
}

footer {
  background: rgba(2, 3, 4, .5);
  box-shadow: 0 -35px 100px rgba(99, 232, 255, .08);
}

.science-page { background: #020304 !important; }

@media (min-width: 681px) {
  .media-card:nth-child(3) {
    grid-column: 1 / -1;
    width: calc(50% - 2.5vw);
    justify-self: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    will-change: auto;
  }
}

@media (max-width: 680px) {
  body::after {
    background-size: 165vw auto;
    opacity: clamp(0, calc((var(--scroll-progress) - .45) * 1.25), .58);
  }
  .creator {
    background: linear-gradient(180deg, rgba(2, 3, 4, .82), rgba(2, 3, 4, .38));
  }
}