/* URSY.DOMAINS — the aurora field.
   Two layers: (1) the page-wide wash painted as gradients on .site, so colour
   runs the whole page; (2) the hero orb field, blurred and animated.
   iOS/tablet rule: below 1024px blur the FIELD directly and make the veil a
   plain tint — Safari cannot composite backdrop-filter over stacked layers. */
.site{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  background-color:transparent;
  background-image:
    radial-gradient(58% 20% at 12% 12%, var(--w2), transparent 72%),
    radial-gradient(54% 18% at 88% 30%, var(--w1), transparent 72%),
    radial-gradient(58% 18% at 20% 52%, var(--w3), transparent 72%),
    radial-gradient(52% 16% at 80% 70%, var(--w4), transparent 72%),
    radial-gradient(58% 18% at 28% 90%, var(--w1), transparent 72%);
}
.field{ position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.field__washes{ position:absolute; inset:-6% -22%; filter:blur(96px) saturate(112%); opacity:.82;
  animation:hueCycle 120s linear infinite; }
.field__orb{ position:absolute; display:block; border-radius:50%; }
.field__veil{ position:absolute; inset:0; background:var(--scrim);
  backdrop-filter:blur(10px) saturate(108%); -webkit-backdrop-filter:blur(10px) saturate(108%); }
.field__vig{ position:absolute; inset:0; background:var(--vig); }
.field__grain{ position:absolute; inset:-4%; opacity:.045; mix-blend-mode:overlay;
  animation:grainShift 7s steps(4) infinite;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }

@keyframes aurora1{ 0%,100%{transform:translate3d(-14%,-10%,0) scale(1.1) rotate(0deg)} 50%{transform:translate3d(16%,12%,0) scale(1.38) rotate(14deg)} }
@keyframes aurora2{ 0%,100%{transform:translate3d(12%,14%,0) scale(1.28) rotate(0deg)} 50%{transform:translate3d(-16%,-12%,0) scale(1.04) rotate(-16deg)} }
@keyframes hueCycle{ 0%{filter:hue-rotate(0deg) saturate(1.1)} 50%{filter:hue-rotate(180deg) saturate(1.22)} 100%{filter:hue-rotate(360deg) saturate(1.1)} }
@keyframes grainShift{ 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(1%,-1.5%,0)} }
@keyframes rise{ from{opacity:0;transform:translate3d(0,14px,0)} to{opacity:1;transform:none} }
@keyframes caretBlink{ 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes feedIn{ from{opacity:0;transform:translate3d(0,-12px,0)} to{opacity:1;transform:none} }
@keyframes ping{ 0%{opacity:.85;transform:scale(.6)} 70%,100%{opacity:0;transform:scale(2.6)} }

@media (max-width:1024px){
  .field__washes{ filter:blur(64px) saturate(108%); transform:scale(1.14); }
  .field__veil{ backdrop-filter:none; -webkit-backdrop-filter:none; }
}