<h1>Scroll this page</h1>
<div class="chicken-head">
  <div class="comb">
    <div class="comb-part comb-spike-left"></div>
    <div class="comb-part comb-main"></div>
    <div class="comb-part comb-spike-right"></div>
  </div>
  <div class="face"></div>
  <div class="eye left">
    <div class="eye-shine"></div>
    <div class="eye-shine-small"></div>
  </div>
  <div class="eye right">
    <div class="eye-shine"></div>
    <div class="eye-shine-small"></div>
  </div>
  <div class="blush left"></div>
  <div class="blush right"></div>
  <div class="beak"></div>
</div>

@import url("https://fonts.googleapis.com/css2?family=Pacifico&display=swap");

@layer presentation, chicken, scroll;

:root {
  --chicken-face: #fff9e3;
  --chicken-face-border: #d9cbb8;
  --comb-color: #ffb366;
  --comb-border: #e69c59;
  --eye-color: #4d1a00;
  --eye-border: #3a1400;
  --eye-shine: white;
  --blush-color: #ffb3b3;
  --beak-color: #ff9966;
  --beak-border: #e67e4d;
  --bg-color: #f5f5f5;
  --title-color: rebeccapurple;
  --head-size: 200px;
  --face-size: 160px;
  --transition-speed: 0.2s;

  scrollbar-color: var(--comb-color) var(--chicken-face);
  scrollbar-width: thin;
}

@layer scroll {
  .is-scrolling {
    .chicken-head {
      animation-play-state: running;
    }
    .eye {
      height: 5px;
      border-radius: 50%;
      background-color: var(--eye-border);
      transform: translateY(14px);
    }
    .beak {
      transform: scaleY(0.8) translateY(2px);
    }
    .eye-shine,
    .eye-shine-small {
      opacity: 0;
    }

    .blush {
      height: 5px;
      margin-top: 10px;
      opacity: 0.3;
    }
  }
}

@layer chicken {
  .chicken-head {
    position: fixed;
    top: 50%;
    translate: 0 -50%;
    width: var(--head-size);
    height: var(--head-size);
    cursor: pointer;
    transition: transform var(--transition-speed) ease;
    animation: wobble 0.5s infinite alternate linear;
    animation-play-state: paused;
  }

  .face {
    position: absolute;
    width: var(--face-size);
    height: var(--face-size);
    background-color: var(--chicken-face);
    border: 2px solid var(--chicken-face-border);
    border-radius: 50%;
    top: 40px;
    left: 20px;
    z-index: 1;
  }

  .comb {
    position: absolute;
    top: 0;
    left: 58px;
    z-index: 0;
    .comb-part {
      position: absolute;
      background-color: var(--comb-color);
      border: 1px solid var(--comb-border);
    }
    .comb-main {
      width: 40px;
      height: 50px;
      border-radius: 50% 50% 0 0;
      top: 15px;
      left: 20px;
    }
    .comb-spike-left {
      width: 25px;
      height: 35px;
      border-radius: 50% 50% 0 50%;
      transform: rotate(-20deg);
      top: 10px;
      left: 0;
    }
    .comb-spike-right {
      width: 30px;
      height: 40px;
      border-radius: 50% 50% 50% 0;
      transform: rotate(20deg);
      top: 5px;
      left: 55px;
    }
  }

  .eye {
    position: absolute;
    width: 28px;
    height: 32px;
    background-color: var(--eye-color);
    border: 1px solid var(--eye-border);
    border-radius: 50%;
    top: 80px;
    z-index: 2;
    transition: height var(--transition-speed) ease,
      background-color var(--transition-speed) ease;

    &.left {
      left: 55px;
    }

    &.right {
      right: 55px;
    }
    .eye-shine,
    .eye-shine-small {
      position: absolute;
      background-color: var(--eye-shine);
      border-radius: 50%;
      transition: opacity var(--transition-speed) ease;
    }
    .eye-shine {
      width: 10px;
      height: 10px;
      top: 5px;
      left: 5px;
    }
    .eye-shine-small {
      width: 5px;
      height: 5px;
      top: 17px;
      left: 15px;
    }
  }

  .blush {
    position: absolute;
    width: 30px;
    height: 15px;
    background-color: var(--blush-color);
    border-radius: 50%;
    top: 110px;
    opacity: 0.7;
    transition: opacity var(--transition-speed) ease;
    z-index: 2;
    &.left {
      left: 35px;
    }
    &.right {
      right: 35px;
    }
  }

  .beak {
    position: absolute;
    width: 22px;
    height: 16px;
    background-color: var(--beak-color);
    border: 1px solid var(--beak-border);
    border-radius: 40% 40% 60% 60%;
    top: 115px;
    left: 89px;
    z-index: 2;
    transition: transform var(--transition-speed) ease;
  }
}

@layer presentation {
  body {
    display: flex;
    justify-content: center;
    height: 500vh;
    font-family: "Pacifico", sans-serif;
    background-color: var(--bg-color);
    margin: 0;
  }

  h1 {
    color: var(--title-color);
    font-size: 2.4rem;
  }

  @keyframes wobble {
    0% {
      transform: rotate(-5deg);
    }
    100% {
      transform: rotate(8deg);
    }
  }
}

const isScrollEndSupported = "onscrollend" in window;

document.addEventListener("scroll", function () {
  document.body.classList.add("is-scrolling");

  if (!isScrollEndSupported) {
    // Fallback for browsers without scrollend support
    clearTimeout(window.scrollEndTimer);
    window.scrollEndTimer = setTimeout(function () {
      document.body.classList.remove("is-scrolling");
    }, 100);
  }
});

// Progressive enhancement scrollend
if (isScrollEndSupported) {
  document.addEventListener("scrollend", function () {
    document.body.classList.remove("is-scrolling");
  });
}