/* ==========================================================================
   SCROLL-DRIVEN SECTION REVEALS (View Timeline)
   ========================================================================== */
@keyframes section-in-view {
 0% {
  opacity: 0.9;
  transform: scale(0.90);
 }

 10% {
  opacity: 0.95;
  transform: scale(0.95);
 }

 20% {
  opacity: 1;
  transform: scale(1);
 }

 80% {
  opacity: 1;
  transform: scale(1);
 }

 90% {
  opacity: 0.95;
  transform: scale(0.95);
 }

 100% {
  opacity: 0.9;
  transform: scale(0.90);
 }
}

/*main article section:first-of-type::before*/
main article section {
 transform-origin: left center;
 animation: section-in-view linear both;
 animation-timeline: view(10vh 40vh);
 animation-range: cover;
}

/* ==========================================================================
   REDUCED MOTION ACCESSIBILITY
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
 article section {
  animation: none;
  opacity: 1;
  transform: none;
 }
}


/* ==========================================================================
   DEBUGGING OVERLAY (Uncomment to visualize your view() detection window)
   ========================================================================== */
/* Creates a visual overlay of your view() detection window */
/*html::before {
 content: "";*/
/* Fixed positioning keeps it locked to the glass of the screen */
/*position: fixed;
 left: 0;
 width: 100%;
 top: 10vh;
 bottom: 40vh;*/
/* Styling for the demonstration overlay */
/*background-color: rgba(0, 255, 0, 0.15);*/ /* Transparent green band */
/*border-top: 2px dashed #00ff00;
 border-bottom: 2px dashed #00ff00;
 color: #00cc00;*/
/* Design tweaks to center the label text */
/*display: flex;
 align-items: center;
 justify-content: center;
 font-family: sans-serif;
 font-weight: bold;
 font-size: 14px;
 letter-spacing: 1px;*/
/* Crucial: lets clicks pass right through to your actual content */
/*pointer-events: none;*/
/* Ensures it sits on top of your background but behind modals */
/*z-index: 9999;
}*/