/**
 * `@property` is required for the animation to work.
 * Without it, the angle values won’t interpolate properly.
 *
 * @see https://dev.to/afif/we-can-finally-animate-css-gradient-kdk
 */
@property --bg-angle {
  inherits: false;
  initial-value: 0deg;
  syntax: "<angle>";
}

/**
 * To animate the gradient, we set the custom property to 1 full
 * rotation. The animation starts at the default value of `0deg`.
 */
@keyframes spin {
  to {
    --bg-angle: 360deg;
  }
}


article {
  /* add the animation, but pause it by default */
  animation: spin 2.5s infinite linear paused;
  
  /**
   * Using `background-origin` we can create a “border” using two gradients. And to
   * make the gradients better-looking, we use OKLCH.
   *
   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin
   * @see https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl
   */
  background:
    /* Background colors don’t work with `background-origin`, so use a gradient. */
    linear-gradient(
        to bottom,
        oklch(0.1 0.2 240 / 0.95),
        oklch(0.1 0.2 240 / 0.95)
      )
      padding-box, /* ends at inner border edges */
    conic-gradient(
        from var(--bg-angle) in oklch longer hue,
        oklch(0.85 0.37 0) 0 0
      )
      border-box; /* extends to outer border edges */
  
  /* a clear border lets the background gradient shine through */
  border: 6px solid transparent;

  /* unpause the animation on hover */
  &:hover {
    animation-play-state: running;
  }
}

/******************************************************************
 * Other styles to make the demo look nice
 ******************************************************************/

* {
  box-sizing: border-box;
}

html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 18px;
  line-height: 1.45;
}

body {
  margin: 0;
}

main {
  background: 
    radial-gradient(
        circle, 
        oklch(0.15 0.2 330 / 0), 
        oklch(0.15 0.2 330 / 1)
      ),
    linear-gradient(
        344deg in oklch,
        oklch(0.3 0.37 310),
        oklch(0.35 0.37 330),
        oklch(0.3 0.37 310)
      );
  display: grid;
  height: 100svh;
  place-items: center;
}

article {
  border-radius: 1rem;
  box-shadow: 0.125rem 0.25rem 0.25rem 0.5rem oklch(0.1 0.37 315 / 0.25);
  color: white;
  padding: 1rem;
  width: min(400px, 90vw);

  & h1 {
    line-height: 1.1;
    margin: 0;
  }

  & p {
    margin: 0.75rem 0 0;
  }
}