/* Decorative layers move independently of the readable content. */
.hero-glow {
  overflow: hidden;
  transform: translate3d(
    calc(var(--depth-x, 0px) + var(--pointer-x, 0px)),
    calc(var(--depth-y, 0px) + var(--pointer-y, 0px)),
    0
  ) scale(1.12);
  transition: transform 650ms ease-out;
  will-change: transform;
}

.hero-glow::before,
.hero-glow::after {
  content: '';
  position: absolute;
  pointer-events: none;
  opacity: .8;
  mix-blend-mode: screen;
  transform-origin: center;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.hero-glow::before {
  top: -10%;
  left: 28%;
  width: min(68vw, 950px);
  height: min(84vh, 850px);
  background: radial-gradient(ellipse at center, rgba(0, 157, 255, .54) 0%, rgba(0, 137, 255, .34) 30%, rgba(16, 112, 255, .13) 54%, transparent 74%);
  animation: ambient-blue-glow 12s ease-in-out infinite alternate;
}

.hero-glow::after {
  top: 18%;
  left: -2%;
  width: min(62vw, 820px);
  height: min(72vh, 720px);
  background: radial-gradient(ellipse at center, rgba(18, 210, 255, .46) 0%, rgba(18, 202, 255, .27) 34%, rgba(18, 170, 255, .10) 56%, transparent 75%);
  animation: ambient-cyan-glow 16s ease-in-out infinite alternate;
}

.hero-grid {
  transform: translate3d(
    calc(var(--depth-x-small, 0px) + var(--pointer-x-small, 0px)),
    calc(var(--depth-y-small, 0px) + var(--pointer-y-small, 0px)),
    0
  ) scale(1.05);
  transition: transform 850ms ease-out;
  animation: depth-drift-reverse 26s ease-in-out infinite alternate;
  will-change: transform, translate;
}

.services,
.work,
.photo-showcase,
.ideas-section,
.process,
.quotes-section {
  position: relative;
  isolation: isolate;
}

.services::after,
.work::after,
.photo-showcase::after,
.ideas-section::after,
.process::after,
.quotes-section::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--depth-light);
  opacity: .8;
  transform: translate3d(var(--depth-x, 0px), var(--depth-y, 0px), 0);
  transition: transform 250ms ease-out;
}

.services > *,
.work > *,
.photo-showcase > *,
.ideas-section > *,
.process > *,
.quotes-section > * {
  position: relative;
  z-index: 1;
}

.services {
  --depth-light: radial-gradient(ellipse 55% 42% at 12% 24%, rgba(22, 133, 240, .13), transparent 78%);
}

.work {
  --depth-light: radial-gradient(ellipse 52% 50% at 85% 43%, rgba(45, 184, 219, .10), transparent 78%);
}

.photo-showcase {
  --depth-light: radial-gradient(ellipse 52% 48% at 82% 38%, rgba(25, 145, 225, .14), transparent 78%);
}

.ideas-section {
  --depth-light: radial-gradient(ellipse 45% 48% at 13% 65%, rgba(32, 130, 237, .15), transparent 78%);
}

.process {
  --depth-light: radial-gradient(ellipse 53% 55% at 84% 40%, rgba(39, 158, 255, .13), transparent 78%);
}

.quotes-section {
  --depth-light: radial-gradient(ellipse 47% 44% at 18% 52%, rgba(35, 145, 244, .13), transparent 78%);
}

.contact-glow {
  transform: translate3d(var(--depth-x, 0px), var(--depth-y, 0px), 0);
  transition: transform 250ms ease-out;
}

/* Idle drift keeps the decorative light moving when the page is still. */
.services::after,
.photo-showcase::after,
.ideas-section::after,
.quotes-section::after,
.contact-glow {
  animation: depth-drift 24s ease-in-out infinite alternate;
}

.work::after,
.process::after {
  animation: depth-drift-reverse 28s ease-in-out infinite alternate;
}

@keyframes ambient-blue-glow {
  from { transform: translate3d(-18vw, -6vh, 0) scale(.86); opacity: .7; }
  to { transform: translate3d(15vw, 7vh, 0) scale(1.12); opacity: 1; }
}

@keyframes ambient-cyan-glow {
  from { transform: translate3d(16vw, 6vh, 0) scale(.9); opacity: .5; }
  to { transform: translate3d(-14vw, -7vh, 0) scale(1.12); opacity: .96; }
}

@keyframes depth-drift {
  from { translate: -16px -9px; }
  to { translate: 16px 9px; }
}

@keyframes depth-drift-reverse {
  from { translate: 14px -8px; }
  to { translate: -14px 8px; }
}

@media (max-width: 600px) {
  .hero-glow {
    transform: translate3d(
      calc(var(--depth-x, 0px) + var(--pointer-x, 0px)),
      calc(var(--depth-y, 0px) + var(--pointer-y, 0px)),
      0
    ) scale(1.22);
  }

  .hero-glow::before {
    top: -2%;
    left: -4%;
    width: 116vw;
    height: 60vh;
    animation-duration: 12s;
  }

  .hero-glow::after {
    top: 27%;
    left: -24%;
    width: 118vw;
    height: 54vh;
    animation-duration: 16s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-glow,
  .hero-glow::before,
  .hero-glow::after,
  .hero-grid,
  .services::after,
  .work::after,
  .photo-showcase::after,
  .ideas-section::after,
  .process::after,
  .quotes-section::after,
  .contact-glow {
    transform: none;
    translate: none;
    animation: none;
    transition: none;
  }
}