/* ==========================================================================
   Makhmal — Global ambient background
   One fixed canvas behind the whole document. Sections stay transparent so
   the page reads as a single continuous surface instead of stacked colour
   bands. Built from layered radial gradients rather than blurred DOM nodes:
   a gradient is soft by construction and costs no filter rasterisation, so
   the whole thing paints once and then only rides the compositor.
   ========================================================================== */

:root {
  --mk-bg-base: #FAF8FF;
}

body {
  background-color: var(--mk-bg-base);
}

.mk-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* deliberately larger than the viewport so the parallax shift never exposes
   an edge */
.mk-bg__wash {
  position: absolute;
  inset: -30vh -12vw;
  background-color: var(--mk-bg-base);
  background-image:
    radial-gradient(46vw 40vw at 86% 6%,  rgba(232, 226, 255, 0.95), transparent 62%),
    radial-gradient(42vw 38vw at 4% 26%,  rgba(219, 230, 255, 0.95), transparent 62%),
    radial-gradient(38vw 34vw at 94% 52%, rgba(124, 143, 255, 0.30), transparent 62%),
    radial-gradient(34vw 32vw at 20% 66%, rgba(169, 87, 255, 0.20), transparent 62%),
    radial-gradient(30vw 28vw at 62% 82%, rgba(79, 203, 174, 0.16), transparent 60%),
    radial-gradient(40vw 36vw at 12% 96%, rgba(219, 230, 255, 0.85), transparent 64%);
  will-change: transform;
}

/* fine dot grain — breaks up the banding wide gradients leave on flat colour */
.mk-bg__grain {
  position: absolute;
  inset: 0;
  opacity: 0.45;
  background-image: radial-gradient(rgba(36, 30, 61, 0.06) 0.5px, transparent 0.5px);
  background-size: 3px 3px;
}

/* the canvas drifts against the scroll so sections feel like they move
   through one continuous space; compositor-driven, no repaint per frame */
@supports (animation-timeline: scroll()) {
  .mk-bg__wash {
    animation: mk-bg-parallax linear both;
    animation-timeline: scroll(root block);
  }

  /* translate only — a scale would re-rasterise the whole gradient stack on
     every scroll frame; a pure 3D translate stays on the compositor */
  @keyframes mk-bg-parallax {
    to { transform: translate3d(0, -22vh, 0); }
  }
}

/* ---- Chrome that has to sit on the shared canvas ---- */
.mk-header {
  background: rgba(250, 248, 255, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border-bottom-color: rgba(207, 207, 255, 0.55);
}

.mk-footer {
  background: linear-gradient(180deg, rgba(232, 226, 255, 0) 0%, rgba(232, 226, 255, 0.6) 42%);
  border-top: none;
}

@media (prefers-reduced-motion: reduce) {
  .mk-bg__wash {
    animation: none;
  }
}