<div class="scroll-driven">
  Scroll-Driven Animations with CSS<br/>
  without JavaScript.
</div>

/* Defines an animation that changes the background color */
@keyframes colorShift {
  0% {
    background-color: #00a4e4; /* Start with a blue background */
  }
  50% {
    background-color: #ff4f81; /* Change to a pink background halfway through */
  }
  100% {
    background-color: #47525d; /* End with a dark gray background */
  }
}

/* Media query applies animation based on user motion preferences */
@media (prefers-reduced-motion: no-preference) {
  /* Executes only if the browser supports scroll-based animations */
  @supports (animation-timeline: scroll()) {
    .scroll-driven {
      animation: colorShift linear both; /* Assigns the colorShift animation */
      animation-timeline: scroll(); /* Triggers animation based on scroll */
    }
  }
}

/* Demo styling layer for demonstration purposes */
@layer demo.scrollEffect {
  body {
    /* Sets the height of the page to create a scrollable area */
    min-height: 200vh; /* Double the height of the viewport */
    margin: 0;
  }
  
  .scroll-driven {
    /* Fixes a centered div in the middle of the screen */
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align:center;
    font-family: Arial;
    font-size: 1.8rem;
    font-weight: bold;
    color: #ffffff; /* Sets text color to white */
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); /* Adds a shadow to text */
  }
}