/* ============================================
   SITE BACKGROUND — sticky viewport + scroll parallax
   iOS-safe (no position: fixed on background)
   ============================================ */

.site-bg {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: -webkit-fill-available;
  margin-bottom: -100vh;
  margin-bottom: -100dvh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;
  contain: layout style paint;
}

.site-bg__base,
.site-bg__noise,
.site-bg__orbs {
  position: absolute;
  inset: 0;
}

.site-bg__base {
  background-color: var(--aura-bg);
}

.site-bg__noise {
  background-image: var(--aura-noise);
  background-size: cover;
  opacity: 1;
}

.site-bg__orbs {
  overflow: hidden;
}

.site-bg__orb-track {
  position: absolute;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.site-bg__orb {
  display: block;
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  -webkit-filter: blur(70px);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  animation: aura-orb-drift 18s ease-in-out infinite;
}

/* Orb 1 — top left */
.site-bg__orb-track--1 {
  top: -18%;
  left: -12%;
  width: 65vw;
  height: 65vw;
  max-width: 560px;
  max-height: 560px;
}

.site-bg__orb-track--1 .site-bg__orb {
  inset: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(200, 169, 110, 0.1) 0%, transparent 65%);
}

/* Orb 2 — bottom right */
.site-bg__orb-track--2 {
  right: -8%;
  bottom: -8%;
  width: 48vw;
  height: 48vw;
  max-width: 420px;
  max-height: 420px;
}

.site-bg__orb-track--2 .site-bg__orb {
  inset: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(200, 169, 110, 0.07) 0%, transparent 65%);
  animation-duration: 26s;
  animation-delay: 5s;
  animation-direction: reverse;
}

/* Orb 3 — mid */
.site-bg__orb-track--3 {
  bottom: 10%;
  left: 20%;
  width: 40vw;
  height: 40vw;
  max-width: 360px;
  max-height: 360px;
}

.site-bg__orb-track--3 .site-bg__orb {
  inset: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(200, 169, 110, 0.06) 0%, transparent 70%);
  animation-duration: 22s;
  animation-delay: 3s;
}

@keyframes aura-orb-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33% { transform: translate3d(20px, -24px, 0) scale(1.04); }
  66% { transform: translate3d(-14px, 16px, 0) scale(0.97); }
}

/* Scroll-driven parallax (strict CSS) */
@keyframes site-bg-scroll-parallax-1 {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -8vh, 0); }
}

@keyframes site-bg-scroll-parallax-2 {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -14vh, 0); }
}

@keyframes site-bg-scroll-parallax-3 {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -20vh, 0); }
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .site-bg__orb-track--1 {
      animation: site-bg-scroll-parallax-1 linear both;
      animation-timeline: scroll(root block);
    }

    .site-bg__orb-track--2 {
      animation: site-bg-scroll-parallax-2 linear both;
      animation-timeline: scroll(root block);
    }

    .site-bg__orb-track--3 {
      animation: site-bg-scroll-parallax-3 linear both;
      animation-timeline: scroll(root block);
    }
  }
}

@media (hover: none) and (pointer: coarse) {
  .site-bg__orb-track--1,
  .site-bg__orb-track--2,
  .site-bg__orb-track--3 {
    animation: none;
  }
}

@media (max-width: 767px) {
  .site-bg__orb {
    filter: blur(48px);
    -webkit-filter: blur(48px);
  }

  .site-bg__orb-track--2 .site-bg__orb {
    filter: blur(40px);
    -webkit-filter: blur(40px);
  }
}

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

  .site-bg__orb-track--1,
  .site-bg__orb-track--2,
  .site-bg__orb-track--3 {
    animation: none;
  }
}