@property --a0 { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@property --a1 { syntax: '<angle>'; inherits: true; initial-value: 90deg; }
@property --a2 { syntax: '<angle>'; inherits: true; initial-value: 180deg; }
@property --a3 { syntax: '<angle>'; inherits: true; initial-value: 270deg; }
@property --a4 { syntax: '<angle>'; inherits: true; initial-value: 360deg; }
@property --x { syntax: '<percent>'; inherits: true; initial-value: 50%; }
@property --y { syntax: '<percent>'; inherits: true; initial-value: 50%; }

body::after {
  content: "";
  background:
    conic-gradient(
      at var(--x,50%) var(--y,50%),
      #ff4b00 var(--a0) var(--a1),
      #149200 var(--a1) var(--a2),
      #101010 var(--a2) var(--a3),
      #dbdbdb var(--a3) var(--a4)
    );

  transition:
    --a0 1600ms ease-out,
    --a1 1600ms ease-out,
    --a2 1600ms ease-out,
    --a3 1600ms ease-out,
    --a4 1600ms ease-out,
    --x 1600ms ease-out,
    --y 1600ms ease-out;
  position: fixed;
  inset: 0;
  mix-blend-mode: darken;
}