/* Ray Studio's abstract backdrop. Visual only; content remains above this layer. */
.ray-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  contain: strict;
  background: #11141c;
}

.ray-ambient__field {
  position: absolute;
  inset: -3%;
  overflow: hidden;
  transform: translate3d(var(--ray-x, 0px), var(--ray-y, 0px), 0);
  transition: transform 1.1s cubic-bezier(.2,.65,.2,1);
}

.ray-ambient__light {
  position: absolute;
  border-radius: 50%;
}
.ray-ambient__light--violet {
  width: min(78vw, 1030px);
  height: min(86vh, 860px);
  top: -27%;
  left: -22%;
  background: radial-gradient(ellipse at center, #6d51af67 0%, #52418730 30%, #30284812 53%, transparent 72%);
  animation: ray-drift-violet 23s ease-in-out infinite alternate;
}
.ray-ambient__light--blue {
  width: min(80vw, 1120px);
  height: min(94vh, 950px);
  top: 2%;
  right: -25%;
  background: radial-gradient(ellipse at center, #295b797a 0%, #274b6a38 30%, #20283c12 53%, transparent 72%);
  animation: ray-drift-blue 28s ease-in-out -8s infinite alternate;
}
.ray-ambient__light--lime {
  width: min(58vw, 820px);
  height: min(66vh, 660px);
  bottom: -36%;
  left: 20%;
  background: radial-gradient(ellipse at center, #8a9d4d45 0%, #64783d1c 36%, transparent 70%);
  animation: ray-drift-lime 25s ease-in-out -5s infinite alternate;
}

.ray-ambient__grid {
  position: absolute;
  inset: 0;
  opacity: .13;
  background-image: linear-gradient(#b9b5dc2e 1px, transparent 1px), linear-gradient(90deg, #b9b5dc2e 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse 77% 70% at 76% 20%, #000, transparent 85%);
}

.ray-ambient__linework {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .6;
  overflow: visible;
}
.ray-ambient__linework .orbit { transform-origin: 76% 30%; animation: ray-orbit 34s ease-in-out infinite alternate; }
.ray-ambient__linework .orbit--two { transform-origin: 15% 75%; animation: ray-orbit-reverse 42s ease-in-out -7s infinite alternate; }
.ray-ambient__linework .beam { opacity: .5; }

.ray-ambient__mote {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size, 3px);
  height: var(--size, 3px);
  border-radius: 50%;
  background: var(--color, #dfd3ff);
  opacity: .55;
  box-shadow: 0 0 9px var(--color, #dfd3ff);
  animation: ray-mote var(--duration, 8s) ease-in-out var(--delay, 0s) infinite alternate;
}

@keyframes ray-drift-violet { from { transform: translate3d(-1%, 0, 0) scale(.93); } to { transform: translate3d(9%, 7%, 0) scale(1.07); } }
@keyframes ray-drift-blue { from { transform: translate3d(4%, -2%, 0) scale(.93); } to { transform: translate3d(-8%, 6%, 0) scale(1.06); } }
@keyframes ray-drift-lime { from { transform: translate3d(-5%, 1%, 0) scale(.94); } to { transform: translate3d(8%, -5%, 0) scale(1.06); } }
@keyframes ray-orbit { from { transform: rotate(-3deg); } to { transform: rotate(4deg); } }
@keyframes ray-orbit-reverse { from { transform: rotate(3deg); } to { transform: rotate(-5deg); } }
@keyframes ray-mote { from { opacity: .27; transform: translate3d(0, 3px, 0); } to { opacity: .7; transform: translate3d(0, -9px, 0); } }

@media (max-width: 700px) {
  .ray-ambient__light--violet { width: 110vw; height: 65vh; top: -12%; left: -47%; }
  .ray-ambient__light--blue { width: 120vw; height: 65vh; right: -55%; top: 24%; }
  .ray-ambient__light--lime { width: 85vw; height: 50vh; left: -30%; bottom: -18%; }
  .ray-ambient__grid { background-size: 64px 64px; opacity: .1; }
  .ray-ambient__linework { width: 145%; left: -25%; opacity: .43; }
  .ray-ambient__mote { box-shadow: 0 0 6px var(--color, #dfd3ff); }
}

/* Without JavaScript, the browser preference remains the fallback. */
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) .ray-ambient *,
  html:not([data-motion="full"]) .ray-ambient *::before,
  html:not([data-motion="full"]) .ray-ambient *::after { animation: none !important; transition: none !important; }
  html[data-motion="full"] .ray-ambient__light--violet { animation: ray-drift-violet 23s ease-in-out infinite alternate !important; }
  html[data-motion="full"] .ray-ambient__light--blue { animation: ray-drift-blue 28s ease-in-out -8s infinite alternate !important; }
  html[data-motion="full"] .ray-ambient__light--lime { animation: ray-drift-lime 25s ease-in-out -5s infinite alternate !important; }
  html[data-motion="full"] .ray-ambient__linework .orbit { animation: ray-orbit 34s ease-in-out infinite alternate !important; }
  html[data-motion="full"] .ray-ambient__linework .orbit--two { animation: ray-orbit-reverse 42s ease-in-out -7s infinite alternate !important; }
  html[data-motion="full"] .ray-ambient__mote { animation: ray-mote var(--duration, 8s) ease-in-out var(--delay, 0s) infinite alternate !important; }
}
html[data-motion="reduced"] .ray-ambient *,
html[data-motion="reduced"] .ray-ambient *::before,
html[data-motion="reduced"] .ray-ambient *::after { animation: none !important; transition: none !important; }