:root {
  --site-parallax-accent: 255, 122, 0;
  --site-parallax-ink: 10, 10, 10;
}

body.parallax-ready {
  background:
    radial-gradient(circle at top, rgba(var(--site-parallax-accent), 0.08), transparent 30%),
    #ffffff;
  background-attachment: fixed;
}

body.parallax-ready > * {
  position: relative;
  z-index: 1;
}

.site-parallax-bg {
  position: fixed;
  inset: -12vh -8vw;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.site-parallax-bg::before {
  content: '';
  position: absolute;
  inset: 8vh 6vw;
  border-radius: 40px;
  border: 1px solid rgba(var(--site-parallax-ink), 0.04);
  opacity: 0.8;
}

.site-parallax-grid,
.site-parallax-glow,
.site-parallax-orb {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.site-parallax-grid {
  background-image:
    linear-gradient(rgba(var(--site-parallax-ink), 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--site-parallax-ink), 0.035) 1px, transparent 1px);
  background-size: 140px 140px;
  mask-image: radial-gradient(circle at center, black 38%, transparent 88%);
  opacity: 0.25;
}

.site-parallax-glow {
  filter: blur(90px);
  opacity: 0.7;
}

.site-parallax-glow.glow-a {
  background:
    radial-gradient(circle at 18% 22%, rgba(var(--site-parallax-accent), 0.2) 0, transparent 26%),
    radial-gradient(circle at 72% 14%, rgba(255, 255, 255, 0.95) 0, transparent 22%);
}

.site-parallax-glow.glow-b {
  background:
    radial-gradient(circle at 82% 76%, rgba(var(--site-parallax-accent), 0.14) 0, transparent 24%),
    radial-gradient(circle at 26% 74%, rgba(255, 255, 255, 0.75) 0, transparent 20%);
}

.site-parallax-orb {
  inset: auto;
  border-radius: 999px;
  mix-blend-mode: screen;
}

.site-parallax-orb.orb-a {
  top: 18vh;
  left: 8vw;
  width: 26vw;
  height: 26vw;
  min-width: 220px;
  min-height: 220px;
  background: radial-gradient(circle at 35% 35%, rgba(var(--site-parallax-accent), 0.28) 0, rgba(var(--site-parallax-accent), 0.08) 34%, transparent 72%);
  filter: blur(22px);
  opacity: 0.75;
}

.site-parallax-orb.orb-b {
  right: 10vw;
  top: 34vh;
  width: 18vw;
  height: 18vw;
  min-width: 180px;
  min-height: 180px;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.95) 0, rgba(255, 255, 255, 0.18) 42%, transparent 70%);
  filter: blur(16px);
  opacity: 0.52;
}

.site-parallax-orb.orb-c {
  bottom: 4vh;
  left: 34vw;
  width: 34vw;
  height: 34vw;
  min-width: 260px;
  min-height: 260px;
  background: radial-gradient(circle at center, rgba(var(--site-parallax-ink), 0.08) 0, transparent 68%);
  filter: blur(18px);
  opacity: 0.4;
}

.reveal {
  --reveal-y: 44px;
  --parallax-shift: 0px;
  transform: translate3d(0, calc(var(--reveal-y) + var(--parallax-shift)), 0);
}

.reveal.visible {
  --reveal-y: 0px;
  transform: translate3d(0, calc(var(--reveal-y) + var(--parallax-shift)), 0);
}

.parallax-target:not(.reveal) {
  --parallax-shift: 0px;
  transform: translate3d(0, var(--parallax-shift), 0);
  will-change: transform;
}

.reveal.parallax-target {
  transform: translate3d(0, calc(var(--reveal-y) + var(--parallax-shift)), 0);
}

.reveal.visible.parallax-target {
  transform: translate3d(0, calc(var(--reveal-y) + var(--parallax-shift)), 0);
}

.parallax-lift {
  transform-style: preserve-3d;
  filter: drop-shadow(0 18px 40px rgba(var(--site-parallax-ink), 0.06));
}

.parallax-panel {
  position: relative;
  isolation: isolate;
}

.parallax-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.16);
  opacity: 0.55;
  pointer-events: none;
}

.parallax-panel::before {
  content: '';
  position: absolute;
  inset: auto 10% -14%;
  height: 36%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(var(--site-parallax-accent), 0.18) 0, transparent 72%);
  filter: blur(42px);
  transform: translate3d(0, calc(var(--parallax-shift) * -0.35), 0);
  opacity: 0.9;
  z-index: -1;
  pointer-events: none;
}

@media (max-width: 768px) {
  .site-parallax-bg {
    inset: -10vh -18vw;
  }

  .site-parallax-grid {
    background-size: 110px 110px;
    opacity: 0.18;
  }

  .site-parallax-glow {
    filter: blur(72px);
  }

  .site-parallax-orb.orb-a,
  .site-parallax-orb.orb-b,
  .site-parallax-orb.orb-c {
    opacity: 0.45;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.parallax-ready {
    background-attachment: scroll;
  }

  .site-parallax-bg,
  .parallax-panel::before {
    display: none;
  }

  .reveal,
  .reveal.visible,
  .parallax-target {
    --parallax-shift: 0px;
    transform: none;
    filter: none;
  }
}