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

@media (prefers-reduced-motion: no-preference) {
  html {
    background-size: 10vw 10vh;
    background-image: linear-gradient(
      var(--angle), 
      black 0 var(--stop1), 
      white 0 var(--stop2), 
      black 0
    );

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

/* rotation angle */
@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes spin1 {
  to { --angle: 1turn }
}

/* animated stops */
@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%;
  }
}

/* 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%;
  }
}