*,
*::before,
*::after {
  margin     : 0;
  padding    : 0;
  box-sizing : border-box;
}

$dev      : true;
$animated : true;

$dev      : false;
//$animated : false;

@mixin size($w, $h: $w) {
  width  : $w;
  height : $h;
}

@mixin animation($animation, $type : ease) {
  @if ($animated) {
    animation : $animation var(--time, 2500ms) var(--delay, 0ms) infinite $type;
  }
}

@function randomNum($min, $max) {
  $rand : random();
  $randomNum : $min + floor($rand * (($max - $min) + 1));

  @return $randomNum;
}

:root {
  --timing : 2500ms;
}

body {
  display          : grid;
  place-items      : center;
  height           : 100vh;
  overflow         : hidden;
  background-color : #69B6E1;
  font-size        : clamp(0.6rem, calc(1vw + 0.1rem), 1.5rem);

  * {
    position : absolute;

    &::before,
    &::after {
      position : absolute;
    }
  }
}

.playground {
  --bottom-elements : 2.4em;
  --main-width      : 30em;
  @include size(var(--main-width));
}

/* ----- Shadow ----- */
.shadow {
  @include size(calc(var(--main-width) + 5em), 1em);
  border-radius    : 0.5em;
  bottom           : 2em;
  left             : 0.5em;
  background-color : rgba(0, 0, 0, 0.2);
  z-index          : -1;
}

/* ----- Washing machine ----- */
.washing-machine {
  --delay-animation : 500ms;
  @include size(17.5em, 25em);
  @include animation(shake-machine);
  bottom            : var(--bottom-elements);
  left              : 4em;
  border-radius     : 2.5em 2.5em 1em 1em;
  background        : linear-gradient(#F2FBFF 82%, #E5EBEE 82%, #E5EBEE 83%, #F2FBFF 83%);
  box-shadow        : 4.25em 0 #C5C7C8;
  z-index           : 1;

  @keyframes shake-machine {
    @for $i from 0 through 75 {
      @if ($i > 9 and $i < 54) {
        @if ($i % 2 == 0) {
          #{$i}% {
            transform : translateY(-0.125em);
          }
        } @else {
          #{$i}% {
            transform : translateY(0);
          }
        }
      }
    }
  }

  .board {
    @include size(90%, 2.5em);
    display          : flex;
    align-items      : center;
    gap              : 0.5em;
    padding-inline   : 1.5em;
    top              : 2.25em;
    left             : 5%;
    border-radius    : 1em;
    background-color : #E8F1F4;

    .button {
      @include size(1.5em, 0.65em);
      position         : static;
      border-radius    : 0.15em;
      background-color : #D9DDDF;
      box-shadow       : 0.15em 0 #C2C4C6;

      &:nth-of-type(2) {
        margin-right : auto;
      }

      &.circle {
        @include size(1.2em);
        border-radius : 50%;
      }
    }
  }

  .badge {
    @include size(3.25em, 1.85em);
    display          : flex;
    flex-direction   : column;
    align-items      : center;
    justify-content  : space-between;
    padding-block    : 0.35em;
    bottom           : 0.65em;
    right            : 2em;
    background-color : #E5EBEE;
    box-shadow       : -0.15em 0 #C5C7C8;
    border-radius    : 0.25em;

    &::before {
      @include size(1.25em, 0.2em);
      content          : '';
      top              : -0.2em;
      background-color : #D4D8DA;
      border-radius    : 0.05em 0.05em 0 0;
      z-index          : -1;
    }

    .line {
      @include size(65%, 0.175em);
      flex             : none;
      position         : static;
      border-radius    : 0.1em;
      background-color : #D4D8DA;
    }
  }
}

/* ----- Clothes ----- */
.clothes {
  right  : -4em;
  bottom : var(--bottom-elements);

  .shirt {
    --bg          : #FCB900;
    --shadow      : #D59800;
    --extra-bg    : linear-gradient(transparent, transparent);
    --shadow-size : 85%;
    --height      : 0.75em;
    @include size(7em, var(--height));
    position      : static;
    border-radius : calc(var(--height) / 2);
    background    : var(--extra-bg), radial-gradient(circle calc(var(--height) / 2) at var(--shadow-size) 50%, var(--bg) 100%, transparent 0),
    linear-gradient(90deg, var(--bg) var(--shadow-size), var(--shadow) var(--shadow-size));

    &.orange {
      --bg     : #EE6E02;
      --shadow : #C55602;
    }

    &.white {
      @function extra-bg-color($value) {
        @return linear-gradient(90deg, transparent $value, var(--extra-bg-color) $value, var(--extra-bg-color) $value + 3, transparent $value + 3);
      }

      --extra-bg-color : #CCD0D2;
      --bg             : #F7EAEA;
      --shadow         : #CCD0D2;
      --extra-bg       : #{extra-bg-color(60%)}, #{extra-bg-color(65%)};
    }
  }
}

/* ----- Window ----- */
.window {
  --border-color   : #E5EBEE;
  --bg-color       : #6E6D71;
  @include size(12.25em);
  left             : 9em;
  top              : 7em;
  transform        : translateX(-50%);
  border-radius    : 50%;
  box-shadow       : 0.6em 0 #C5C7C8;
  background-color : var(--bg-color);
  overflow         : hidden;
  z-index          : 1;

  &::before {
    @include size(100%);
    --opacity-color : rgba(255, 255, 255, 0.15);
    content         : '';
    box-shadow      : 0 0 0 1.5em var(--border-color) inset;
    border-radius   : 50%;
    z-index         : 10;
    background      : linear-gradient(-45deg, transparent 53%, var(--opacity-color) 53%, var(--opacity-color) 55%, transparent 55%, transparent 59%, var(--opacity-color) 59%, var(--opacity-color) 65%, transparent 65%);
  }

  &::after {
    @include size(4em);
    content          : '';
    right            : -0.55em;
    top              : 50%;
    transform        : translateY(-50%);
    border-radius    : 50%;
    background-color : var(--border-color);
  }
}

.content {
  @include size(100%);
  @include animation(content-rotate, ease-in-out);

  @keyframes content-rotate {
    0%, 55% {
      transform : rotate(-3turn);
    }

    24%, 48% {
      filter : blur(0.075em);
    }

    48% {
      filter : none;
    }

    55% {
      transform : initial;
    }
  }
}

.cat {
  --bg-cat         : #2A2538;
  @include size(4.5em, 6.5em);
  left             : 3.95em;
  bottom           : 1em;
  transform-origin : center top;

  .head {
    @include size(100%, 2em);
    display          : flex;
    justify-content  : center;
    align-items      : center;
    gap              : 0.15em;
    top              : 0.75em;
    border-radius    : 1em;
    background-color : var(--bg-cat);

    .eye {
      @include size(0.75em);
      position      : static;
      margin-top    : -0.325em;
      border-radius : 50%;
      clip-path     : polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
      background    : radial-gradient(circle 0.15em at 50% 50%, black 100%, transparent 0), white;
    }

    .ear {
      --height     : 0.75em;
      --width      : 0.45em;
      --position   : 1.1em;
      width        : 0;
      border-style : solid;
      border-width : 0 var(--width) var(--height) var(--width);
      border-color : transparent transparent var(--bg-cat) transparent;
      top          : calc(var(--height) * -1);
      left         : var(--position);

      &.right {
        left             : initial;
        right            : var(--position);
        z-index          : 5;
        transform-origin : bottom left;
        @include animation(ear-animation);

        @keyframes ear-animation {
          0%, 68%, 78%, 86% {
            transform : skew(0);
          }

          74%, 82% {
            transform : skew(-40deg);
          }
        }
      }
    }
  }

  .body {
    @include size(70%, 3.35em);
    top              : 2.65em;
    left             : 50%;
    transform        : translateX(-50%);
    background-color : var(--bg-cat);
  }

  .feet {
    @include size(4.75em, 1.25em);
    bottom           : 0.7em;
    right            : -0.25em;
    border-radius    : 0.75em;
    background-color : var(--bg-cat);
  }

  .tail {
    @include size(4.5em);
    left          : -2.25em;
    bottom        : 1.25em;
    border-radius : 50%;
    background    : radial-gradient(circle 0.3em at 30% 11.5%, var(--bg-cat) 100%, transparent 0), radial-gradient(circle 1.65em at 50% 50%, var(--bg-color) 100%, transparent 0), conic-gradient(transparent 152deg, var(--bg-cat) 152deg 330deg, transparent 330deg);
    z-index       : -1;
  }
}

.sock {
  --bg-color   : #F8A11E;
  --line-color : #EE6D02;
  --x          : 0;
  --y          : 0;
  --deg        : 0;
  @include size(2.25em, 3em);
  transform    : rotate(var(--deg)) translate(var(--x), var(--y));
  z-index      : 5;

  &::before {
    @include size(1.15em, 1.925em);
    content       : '';
    border-radius : 0.1em 0.1em 0 0.1em;
    background    : linear-gradient(var(--bg-color) 25%, var(--line-color) 25%, var(--line-color) 35%, var(--bg-color) 35%, var(--bg-color) 45%, var(--line-color) 45%);
  }

  &::after {
    @include size(1.15em, 1.75em);
    content          : '';
    background       : radial-gradient(circle 0.55em at 50% 100%, var(--bg-color) 100%, transparent 0), var(--line-color);
    bottom           : -0.2em;
    border-radius    : 0.1em 0 1em 1em;
    transform-origin : center top;
    transform        : rotate(-45deg) translateX(-0.15em);
  }

  &.orange {
    --deg  : 60deg;
    bottom : -0.35em;
    left   : 5em;
    @include animation(sock-falling);

    &::after {
      transform : rotate(-45deg) translate(-0.15em, -0.1em);
    }

    @keyframes sock-falling {
      50% {
        bottom : 10em;
      }

      70%, 73% {
        transform : rotate(60deg);
        left      : 4.75em;
        bottom    : 5em;
      }

      80% {
        transform : rotate(20deg);
      }

      100% {
        bottom    : 0;
        transform : rotate(-80deg);
      }
    }
  }

  &.green {
    --bg-color   : #387D45;
    --line-color : #4BB15F;
    --deg        : 120deg;
    bottom       : -0.15em;
    left         : 2.5em;
  }

  &.red {
    --bg-color   : #EE6B77;
    --line-color : #EA3949;
    --deg        : 45deg;
    bottom       : 0;
    left         : 1.5em;
  }
}

.bubbles {
  @include size(4em, 1em);
  transform : translateX(-50%);
  bottom    : 0;
  z-index   : 5;
  left      : 45%;

  .bubble {
    @include size(var(--size));
    border-radius    : 50%;
    background-color : #fff;
    @include animation(bounce-bubble);

    @keyframes bounce-bubble {
      0%, 15%, 25%, 40% {
        transform : translateY(0);
      }

      10%, 35% {
        transform : translateY(var(--bounce));
      }

      20% {
        transform : translateY(var(--bounce));
      }
    }

    @for $i from 1 through 20 {
      &:nth-of-type(#{$i}) {
        // Me dio hueva hacer una función para esto. Perdonen
        --bounce     : #{randomNum(10, 20) / 10 * -1}em;
        --bounce-two : #{randomNum(10, 20) / 10 * -1}em;
        --size       : #{randomNum(5, 9) / 10}em;
        --delay      : #{$i * 13}ms;
        left         : randomNum(0, 99) * 1%;
      }
    }
  }
}

@if $dev {
  *:not(img, body, html) {
    outline : 1px solid;
    opacity : 0.75;
  }

  .playground {
    outline : 3px solid;
  }

  img {
    position  : absolute;
    top       : 50%;
    left      : 50%;
    transform : translate(-50%, -50%);
    width     : 30em;
  }
} @else {
  img {
    display : none;
  }
}

.dedication {
  color           : white;
  font-family     : sans-serif;
  bottom          : 1rem;
  text-decoration : none;
}

.twitter-button * {
  position : initial;
}