@import "https://unpkg.com/open-props/easings.min.css";

@media (prefers-reduced-motion: no-preference) {
  html {
    background-image: radial-gradient(
      circle at var(--x) var(--y), 
      black 0 var(--stop1), 
      white 0 var(--stop2), 
      black 0
    );

    animation: 
      stop1 20s var(--ease-spring-5) infinite,
      stop2 10s ease-out infinite,
      x 10s var(--ease-spring-1) infinite,
      y 25s var(--ease-spring-1) infinite,
      size 100s linear infinite,
      position 30s linear infinite;
  }
}

/* 2 animated stop percentages */
@property --stop1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --stop2 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@keyframes stop1 {
  50% {
    --stop1: 50%;
  }
}
@keyframes stop2 {
  50% {
    --stop2: 50%;
  }
}

/* 2 animated x/y lengths */
@property --x {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --y {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@keyframes x {
  50% {
    --x: 100%;
  }
}
@keyframes y {
  50% {
    --y: 100%;
  }
}

/* tile size */
@keyframes size {
  0%, 100% {
    background-size: 10vw 10vh;
  }
  50% {
    background-size: 100vw 100vh;
  }
}

/* tile position */
@keyframes position {
  0%, 100% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 0%;
  }
}






@layer support {
  * {
    box-sizing: border-box;
    margin: 0;
  }

  html {
    block-size: 100%;
    color-scheme: dark light;
  }

  body {
    min-block-size: 100%;
  }
}