/* Probably there are many easy wins and more clever solutions to be explored,
 * but I'll give myself a break...
 * not the best code you'll see today. */
body {
  --progress: 0;
  --clippy-fade-speed: 10;
  height: 100dvh;
  margin: 0;
  overflow: hidden;
  background: url("https://assets.codepen.io/25387/xp-1.webp") center center no-repeat;
  background-size: cover;
}

.macintosh .macintosh-error {
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 9999999;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(
      ellipse 180% 90% at 40% 80%,
      chartreuse,
      green 40%,
      transparent 40%
    ),
    linear-gradient(
      to top,
      mediumblue,
      royalblue
    );
}

.macintosh-error p {
  width: max-content;
  margin: 0;
  line-height: 100dvh;
  font-size: 20dvh;
  font-family: "comic sans ms";
  font-weight: bold;
  text-align: center;
  text-shadow: 15px 15px 0 red;
  color: pink;
  white-space: pre;
  transform: translateX(15%);
  animation: macintosh-is-broken 12s linear infinite;
}

@keyframes macintosh-is-broken {
  to {
    transform: translateX(-100%);
  }
}

.fg {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 3;
}

.grass {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.clippy-container {
  position: absolute;
  bottom: 5%;
  right: 5%;
  opacity: 0;

  .bubble {
    --bg-color: #fefdbf;
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% -100%;
    width: max-content;
    max-width: 160px;
    padding: .5em 1em;
    background: var(--bg-color);
    font-family: system-ui, sans-serif;
    border-radius: 8px;
    font-size: min(1em, 2dvw);

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 66%;
      translate: -50% 100%;
      width: 18px;
      height: 15px;
      background: var(--bg-color);
      clip-path: polygon(0 0, 100% 0, 50% 100%);
    }
  }

  img {
    position: relative;
    width: 15dvw;
  }
}

body:not(.like-humans-do) .clippy-keys {
  opacity: calc(1 - var(--progress) * var(--clippy-fade-speed));
}

body:not(.like-humans-do) .clippy-likes-you-walk,
.keep.walking.even.if.you.listen.music.bubble {
  opacity: calc(
    sin( clamp(0, 2, (var(--progress) - .75)) * pi ) * var(--clippy-fade-speed)
  );
}

.clippy-music {
  opacity: 0;
}

.like-humans-do .clippy-music {
  opacity: calc(
    sin( clamp(0, 2, (var(--progress) + .1)) * pi / 2 ) * var(--clippy-fade-speed)
  );
}

.clippy-something-special {
  opacity: calc(
    sin( clamp(0, .5, (var(--progress) - 2.5)) * pi ) * var(--clippy-fade-speed)
  );
  z-index: 1;

  :has(:checked) & {
    opacity: 0;
    z-index: 0;
  }

  input {
    display: none;
  }

  label {
    padding: .25em .4em;
    border: 1px solid #0003;
    border-radius: 3px;

    &:has(:active) {
      background: #0001;
    }
  }
}

.clippy-something-special .bubble {
  padding-bottom: 1em;
}

.clippy-wants-you-go-insane {
  opacity: calc(
    sin( clamp(0, .5, (var(--progress) - 2.5)) * pi ) * var(--clippy-fade-speed)
  );

  body:not(:has(:checked)) & {
    opacity: 0;
  }
}

.icons {
  position: absolute;
  top: 0;
  right: 2%;

  .icon {
    --icon-url: url();
    display: block;
    width: 64px;
    height: 42px;
    padding-top: 55px;
    margin-top: 28px;
    text-align: center;
    background: var(--icon-url) center top no-repeat;
    background-size: 52px 52px;
    font-family: system-ui;
    font-size: .9em;
    cursor: default;
    user-select: none;

    &.link {
      color: inherit;
      cursor: pointer;

      &:hover {
        text-decoration: none;
      }
    }

    &.song {
      --icon-url: url(https://assets.codepen.io/25387/Windows+Media+Player+9.png);
    }

    &.game {
      --icon-url: url(https://assets.codepen.io/25387/Pinball.png);
      scale: 0;
      transition: all .66s;

      img {
        --base-filter: blur(2px) contrast(3) saturate(10);
        width: 80%;
        position: absolute;
        top: 0;
        left: 50%;
        mix-blend-mode: plus-lighter;
        translate: -50% -1%;
        filter: var(--base-filter);
        animation:
          spin 3s linear infinite,
          hue 5s linear infinite;
      }

      :has(:checked) & {
        scale: 1;
      }
    }

    &.trash {
      --icon-url: url(https://assets.codepen.io/25387/Recycle+Bin+%28full%29.png);
    }
  }
}

@keyframes spin {
  to {
    rotate: 1turn;
  }
}

@keyframes hue {
  to {
    filter:
      var(--base-filter)
      hue-rotate(1turn);
  }
}

.windows-media-player {
  display: none;
  position: absolute;
  top: 5%;
  left: 50%;
  width: 40dvw;
  aspect-ratio: 1.265/1;
  background: url(https://assets.codepen.io/25387/WMP8-bg.png) center center no-repeat;
  background-size: cover;

  .like-humans-do & {
    display: block;
  }

  .visualiser {
    position: absolute;
    top: 25.7%;
    left: 13.9%;
    width: 54.85%;
    aspect-ratio: 1.47/1;
  }

  .progress-notch {
    position: absolute;
    bottom: 7.2%;
    left: 33%;
    width: 1.2%;
    height: 3%;
    background: url(https://assets.codepen.io/25387/WMP-progress-notch.png) center center no-repeat;
    background-size: auto;
    background-size: contain;
    animation: notch 214s steps(150) 1 forwards;
  }

  .close-btn {
    appearance: none;
    border: none;
    background: none;
    position: absolute;
    top: .9%;
    right: .85%;
    width: 3.5%;
    aspect-ratio: 1;
    text-indent: -999vw;
    cursor: pointer;
    
    &:hover {
      backdrop-filter: brightness(1.2);
    }
  }
}

@keyframes notch {
  to {
    left: 51%;
  }
}

/* not very good. both base class and the first instance in one place
due to foggy brain after too many tweaks. also lacks good open-closed extensibility */
.human {
  --head-width: 20%;
  --head-height: 12.5%;
  --head-left: calc(50% - var(--head-width) / 2);

  --head-width--walking: 22.5%;
  --head-left--walking: calc(50% - var(--head-width--walking) / 2);

  --body-width: 50%;
  --body-height: calc(40% + var(--random-1) * 10%);
  --body-left: calc(50% - var(--body-width) / 2);

  --body-width--walking: 33.33%;
  --body-left--walking: calc(50% - var(--body-width--walking) / 2);

  --arm-width: 15%;
  --arm-height: 36%;

  --leg-width: 15%;
  --leg-height: calc(100% - var(--head-height) - var(--body-height));

  --skin-color: hsl(
    calc(10 + var(--random-2) * 20),
    calc(30% + var(--random-2) * 20%),
    calc(20% + var(--random-2) * 80%)
  );
  --amplitude: calc(90dvw * (1 - var(--progress)));
  position: absolute;
  bottom: min(47dvh, calc(var(--progress) * 46dvh));
  left: calc(30dvw + sin(var(--progress) * 5 / pi) * var(--amplitude));
  width: calc(15dvmin - var(--progress) * 14.5dvmin);
  height: calc(30dvmin - var(--progress) * 29dvmin);

  .head, .body, .arm, .leg {
    position: absolute;
    border-radius: 2px;
    transition: all .3s;
  }

  .head {
    left: var(--head-left);
    width: var(--head-width);
    height: var(--head-height);
    background: var(--skin-color);
  }

  .direction-fwd & .head,
  .direction-back & .head {
    left: var(--head-left--walking);
    width: var(--head-width--walking);
    z-index: 1;
  }

  .body, .arm {
    top: var(--head-height);
  }

  .body {
    left: var(--body-left);
    width: var(--body-width);
    height: var(--body-height);
    background: darkviolet;
  }

  .direction-fwd & .body,
  .direction-back & .body {
    left: var(--body-left--walking);
    width: var(--body-width--walking);
    z-index: 1;
  }

  .arm {
    width: var(--arm-width);
    height: var(--arm-height);
    transform-origin: top center;

    &.left {
      left: var(--body-left);
      background: linear-gradient(
        to bottom,
        springgreen 40%,
        var(--skin-color) 40.1%);
      transform: rotate(25deg);
    }

    &.right {
      left: calc(var(--body-left) + var(--body-width) - var(--arm-width));
      background: linear-gradient(
        to bottom,
        darkcyan 40%,
        var(--skin-color) 40.1%);
      transform: rotate(-25deg);
    }
  }

  .direction-fwd & .arm,
  .direction-back & .arm {
    left: calc(50% - var(--arm-width) / 2);
  }

  .direction-fwd & .right.arm,
  .direction-back & .left.arm {
    animation: arm infinite .5s;
  }

  .direction-fwd & .left.arm,
  .direction-back & .right.arm {
    z-index: 2;
    animation: arm infinite .5s -.25s;
  }

  .leg {
    top: calc(var(--head-height) + var(--body-height));
    width: var(--leg-width);
    height: var(--leg-height);
    transform-origin: top center;

    &.left {
      left: calc(var(--body-left) + var(--leg-width) / 4);
      background: springgreen;
      transform: rotate(10deg);
    }

    &.right {
      left: calc(var(--body-left) + var(--body-width) - var(--leg-width) - var(--leg-width) / 4);
      background: darkcyan;
      transform: rotate(-10deg);
    }
  }

  :where(.direction-fwd, .direction-back) & .leg {
    left: calc(50% - var(--leg-width) / 2);
  }

  .direction-fwd & .right.leg,
  .direction-back & .left.leg {
    animation: leg infinite .5s -.25s;
  }

  .direction-fwd & .left.leg,
  .direction-back & .right.leg {
    z-index: 2;
    animation: leg infinite .5s;
  }
}

@keyframes arm {
  from, to { transform: rotate(33deg) }
  50%      { transform: rotate(-33deg) }
}

@keyframes leg {
  from, to { transform: rotate(25deg) }
  50%      { transform: rotate(-25deg) }
}

.human-2 {
  --initial-pos: -160%;
  --cutoff: -25%;
  --amplitude: 200%;
  --frequency: calc(15 / pi);
  position: absolute;
  left: 0;
  bottom: 0;
  
  translate:
    min(
      var(--cutoff),
      calc(
        var(--initial-pos) +
        /*
          anchored to a fixed phase range (won't loop)
          phase range size 2 = anchor at max wave height
          (or something like that...)
        */
        sin( clamp(0, 1, var(--progress) - 1) * var(--frequency) ) *
        var(--amplitude)
      )
    )
    0;
  rotate: 30deg;
  width: 25dvmin;
  height: 50dvmin;
}


.human-3 {
  --initial-pos: -150%;
  --cutoff: -50%;
  --amplitude: 400%;
  --frequency: calc(12 / pi);
  --base-rotate: 180deg;
  --swing: 20deg;
  position: absolute;
  top: 0;
  left: 40%;
  rotate: calc(
    var(--base-rotate) +
    sin(var(--progress) * var(--frequency) * 10) *
    var(--swing)
  );
  translate:
    -50%
    min(
      var(--cutoff),
      calc(
        var(--initial-pos) +
        /* no clamp means this will loop */
        sin( max(0, var(--progress) - 1.5) * var(--frequency) ) *
        var(--amplitude)
      )
    );
  width: 10dvmin;
  height: 20dvmin;
}

.human-4 {
  --initial-pos: -150%;
  --cutoff: -40%;
  --amplitude: 400%;
  --frequency: calc(11 / pi);
  --base-rotate: 170deg;
  --swing: 35deg;
  position: absolute;
  top: 0;
  left: 10%;
  rotate: calc(
    var(--base-rotate) +
    sin(var(--progress) * var(--frequency) * 10) *
    var(--swing)
  );
  translate:
    -50%
    min(
      var(--cutoff),
      calc(
        var(--initial-pos) +
        sin( max(0, var(--progress) - 1.6) * var(--frequency) ) *
        var(--amplitude)
      )
    );
  width: 10dvmin;
  height: 20dvmin;
}

.human-5 {
  --initial-pos: -150%;
  --cutoff: -60%;
  --amplitude: 400%;
  --frequency: calc(15 / pi);
  --base-rotate: 190deg;
  --swing: 25deg;
  position: absolute;
  top: 0;
  left: 70%;
  rotate: calc(
    var(--base-rotate) +
    sin(var(--progress) * var(--frequency) * 10) *
    var(--swing)
  );
  translate:
    -50%
    min(
      var(--cutoff),
      calc(
        var(--initial-pos) +
        sin( max(0, var(--progress) - 1.7) * var(--frequency) ) *
        var(--amplitude)
      )
    );
  width: 10dvmin;
  height: 20dvmin;
}

.human-6 {
  --initial-pos: 150%;
  --cutoff: -35%;
  --amplitude: 110dvw;
  --frequency: calc(1 / pi);
  --base-rotate: 5deg;
  --swing: 6deg;
  position: absolute;
  bottom: 0;
  left: 0;
  rotate: calc(
    var(--base-rotate) +
    sin(var(--progress) * var(--frequency) * 10) *
    var(--swing)
  );
  translate:
    min(
      600dvw,
      calc(
        -150% +
        sin( max(0, var(--progress) - 1.8) * var(--frequency) ) *
        var(--amplitude)
      )
    )
    -500%;
  width: 3dvmin;
  height: 6dvmin;
}

.human-7 {
  --initial-pos: -200%;
  --cutoff: 99999%;
  --amplitude: 200dvw;
  --frequency: calc(10 / pi);
  position: absolute;
  top: 5%;
  left: 0;
  rotate: calc(5turn * var(--progress));
  translate:
    min(
      var(--cutoff),
      calc(
        var(--initial-pos) +
        sin( max(0, var(--progress) - 2) * var(--frequency) ) *
        var(--amplitude)
      )
    )
    0;
  width: 20dvmin;
  height: 40dvmin;
  z-index: 1;
}

.human-8,
.human-9,
.human-10,
.human-11,
.human-12,
.human-13,
.human-14 {
  --initial-pos: -150%;
  --cutoff: 600dvw;
  --amplitude: 110dvw;
  --frequency: calc(1 / pi);
  --base-rotate: 90deg;
  --swing: 3deg;
  --progress-delay: 2.5;
  --offset-factor: calc(1/10);
  position: absolute;
  top: calc(20% + var(--flock-member-id) * 1.5%);
  left: 0;
  width: 1.5dvmin;
  height: 3dvmin;
  rotate: calc(
    var(--base-rotate) +
    sin(var(--progress) * var(--frequency) * 10) *
    var(--swing)
  );
  translate:
    min(
      var(--cutoff),
      calc(
        var(--initial-pos) +
        sin(
          clamp(
            0,
            var(--progress-delay) + 1.5,
            var(--progress) - var(--progress-delay) -
            var(--flock-member-offset) * var(--offset-factor)
          ) *
          var(--frequency)
        ) *
        var(--amplitude)
      )
    )
    calc(sin(var(--progress) * var(--frequency) * (20 + var(--flock-member-offset) / 2)) * 50%);
}

.human-8 {
  --flock-member-id: 0;
  --flock-member-offset: 0;
}

.human-9 {
  --flock-member-id: 1;
  --flock-member-offset: 1;
}

.human-10 {
  --flock-member-id: -1;
  --flock-member-offset: 1;
}

.human-11 {
  --flock-member-id: 2;
  --flock-member-offset: 2;
}

.human-12 {
  --flock-member-id: -2;
  --flock-member-offset: 2;
}

.human-13 {
  --flock-member-id: 3;
  --flock-member-offset: 3;
}

.human-14 {
  --flock-member-id: -3;
  --flock-member-offset: 3;
}

.human-colossal-titan {
  position: absolute;
  top: 200%;
  left: -200%;
  /* My pink matter works better in early AM hours? */
  translate:
    calc(var(--progress) * 40dvw)
    max(-220%, calc(var(--progress) * -40%));
  width: 40dvmin;
  height: 80dvmin;
}