@import url(https://fonts.bunny.net/css?family=jura:300,500);
@layer base, controls, mouse, demo;

@layer demo {

  body{
    height: 1000vh;
    font-family: "Jura", sans-serif;
  }
  @property --x{
    syntax: "<percentage>";
    inherits: true;
    initial-value: 0%;
  }
  .optical{
    position: fixed;
    inset: 0;
    margin: auto;
    width: 400px;
    aspect-ratio: 1;
    background-size: cover;
    background-repeat: no-repeat;
  
    animation-name: --body-scroll;
    animation-duration: 1ms;
    animation-timing-function: linear;
    animation-timeline: scroll();
    
    /* ground level */
    &::before{
      content: '';
      position: absolute;
      inset:auto -50px var(--ground-y, 0);
      height: 1px;
      background: radial-gradient(#555, #0000 );
      z-index: 2;
    }
    /* stripes */
    &::after{
      content: '';
      position: absolute;
      inset: 0;
      background-image: linear-gradient(
        90deg,
        var(--clr-bg) 0 80%,
        transparent 0 100%
      );
      background-size: var(--stripe-px) 100%;
      background-repeat: repeat;
      background-position-x: var(--x);
    }
  }

  @keyframes --body-scroll {
    from { --x: 0%; }
    to   { --x: 100%; }
  }

  
  body:has(#option-1:checked) .optical{
    --stripe-px:6px;
    --ground-y: -1px;
    aspect-ratio: 1;
    background-image: url("https://raw.githubusercontent.com/cbolson/assets/refs/heads/main/codepen/optical/man-running.png");
  }
  body:has(#option-2:checked) .optical{
     --stripe-px:7.2px;
    --ground-y: 30px;
    aspect-ratio: 6/4;
    background-image: url("https://raw.githubusercontent.com/cbolson/assets/refs/heads/main/codepen/optical/cat-running.png");
  }
  body:has(#option-3:checked) .optical{
     --stripe-px:7px;
    --ground-y: 10px;
    aspect-ratio: 6/4;
    background-image: url("https://raw.githubusercontent.com/cbolson/assets/refs/heads/main/codepen/optical/bmx.png");
  }
}

@layer controls{
  .controls{
    position: fixed;
    bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: .8rem;
    border: 1px solid rgb(98, 116, 142);
    padding: .25em 1em;
    background-color: rgb(226, 232, 240); 
    border-radius:3px;
    label{
      display: flex;
      align-items: center;
      gap: .25rem;
      transition: color 150ms ease-in-out;
      &:hover{
        color: dodgerblue;
      }
    }
  }
}
@layer mouse{
  
  .mouse {
		position: fixed;
		bottom:4rem;
		left: 50%;
    translate: -50% 0;
		display: block;
		width: 50px;
		height: 50px;
		opacity: 1;
    color: rgb(98, 116, 142);
     display: none;
		animation-name: mouse;
		animation-duration: 1s;
		animation-timing-function: linear;
		animation-fill-mode: forwards;
		animation-timeline: scroll();
    @supports  (animation-timeline: scroll()) {
      display: block;
    }
	}
	@keyframes mouse {
		75% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}
}
  
  
  /* general styling not relevant for this demo */
@layer base {
	* {
		box-sizing: border-box;
	}
	:root {
    --clr-bg: rgb(248, 244, 238);
	}
 
	body {
		min-height: 100svh;
		margin: 0;
		padding: 2rem;
		background-color: var(--clr-bg);
		font-family: system-ui, sans-serif;
		font-size: 1rem;
		color: black;
		line-height: 1.5;
    display: grid;
    place-items: center;
    
		@supports not  (animation-timeline: scroll()) {
			&::before {
				content:"Sorry, your browser doesn't support animation-timeline";
				position: fixed;
				top: 1rem;
				left: 50%;
				translate: -50% 0;
				font-size: 0.8rem;
        color: red;
			}
		}
	}
}