/* Interactive gradient drift — shared across all pages */

html {
  background-color: #14132b;
}

.gradient-drift {
  --gd-stop: 46%;
  --gd-x: 0%;
  --gd-y: 0%;
  --gd-angle: 0deg;
  --gd-scale: 1.05;
  --gd-transition: 1.4s;

  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #14132b;
}

.gradient-drift::before {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to top left, #3A3A6C 0%, #14132b var(--gd-stop));
  transform: translate(var(--gd-x), var(--gd-y)) rotate(var(--gd-angle)) scale(var(--gd-scale));
  transition: transform var(--gd-transition) cubic-bezier(0.16, 0.9, 0.22, 1);
  will-change: transform;
}

.gradient-drift--radial::before {
  background: radial-gradient(120% 90% at 50% 0%, #24234a 0%, #14132b 60%);
}

header.gradient-drift {
  --gd-stop: 60%;
  --gd-x: 0px;
  --gd-y: 0px;
}

header.gradient-drift::before {
  transform: translate(var(--gd-x), var(--gd-y)) scale(var(--gd-scale));
}

@media (prefers-reduced-motion: reduce) {
  .gradient-drift::before {
    transform: scale(var(--gd-scale)) !important;
    transition: none !important;
  }
}