@import url(https://fonts.bunny.net/css?family=noto-sans-mono:400);
@layer base, mouse, demo;

@layer demo{
  @property --page-offset {
    syntax: "<number>";
    inherits: true;
    initial-value: 75;
  }
  :root {
    --cta: rgb(94, 165, 0);
    --mouse-color: var(--cta);
		--first-word-color: var(--cta);
    --letter-spacing: 1ch;
    --f-size: clamp(1rem, 2.5vw + .045rem,  1.5rem);
  }

  body {
    height: 800svh;
    font-family: 'Noto Sans Mono', monospace;    
  }
  
  .scramble {
    --count: sibling-count();
    position: fixed;
    left: 50%;
    top: 0%;
    translate: -50% -50%;
    display: flex;
    align-items: top;
    flex-wrap: wrap;
    gap: 1ch;
		
		animation: --page-scroll 1s linear;
    animation-timeline: scroll(root block);
    animation-timing-function: steps(100);
  }
.scrambleMe {
    --count: sibling-count();
    position: fixed;
    left: 50%;
    top: 40%;
    translate: -50% -50%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1ch;
		
		animation: --page-scroll 1s linear;
    animation-timeline: scroll(root block);
    animation-timing-function: steps(100);
  }
  
  .scramble > * {
    perspective: 300px;
    transform-style: preserve-3d;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0;
  }

  .scramble > *:nth-child(2){
    color: var(--first-word-color);
  }

  .scramble > * > span {
    --i: sibling-index();
    --dir: calc(1 - 2 * mod(var(--i), 2));
    --rand: calc(mod((var(--i) * 7 + 20), 4) - 4);
    --wave: sin(calc(var(--i) * 17deg));
    
    /* y position */
    --start-y: calc(
      (var(--rand) + var(--wave) )
      * var(--dir)
      * var(--page-offset)
      * 1px
    );
    
    /* depth */
    --z: calc(abs(var(--rand) * 2 + var(--wave)));
    --depth-factor: calc(var(--page-offset) * 0.02);
    --start-z: calc(var(--z) * var(--depth-factor) * 13px);
  
    transform:
    translate3d(
      0,
      var(--start-y),
      var(--start-z)
    );
    
    display: inline-block;
    position: relative;
    font-size: var(--f-size);
  }
	
	@keyframes --page-scroll {
    to {
      --page-offset: 0;
    }
  }
}