.Profile
  .Profile-shadow
  .Profile-pane
    .Profile-clip
      .Pizza
        .Cheese
          - for (var x = 0; x < 5; x++)
            div(class="neg" data-index=x+1)
          - for (var x = 0; x < 3; x++)
            div(class="salami" data-index=x+1)
          - for (var x = 0; x < 2; x++)
            div(class="olive" data-index=x+1)
          - for (var x = 0; x < 2; x++)
            svg(class="onion" viewbox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" data-index=x+1)
              path(fill="#FED86E" fill-rule="nonzero" d="M7 12c2.76 0 5-2.24 5-5S9.76 2 7 2 2 4.24 2 7s2.24 5 5 5zm0 2c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z")
        svg(class="Crust" viewbox="0 0 388 388" xmlns="http://www.w3.org/2000/svg")
          circle(cx="194" cy="194" r="184" fill="none" stroke="#F96C4A" stroke-width="20" stroke-linecap="round")

// ==========
// VARIABLES
// ==========
$grey: #F4F4F4;
$white: #ffffff;
$lavender: #b08ff8;
$cheese: #f9e6b4;
$salami: #fc401e;
$olive: #273339;

$size: 440px;
$rad: $size*0.5;
$border: 26px;


// ==========
// MIXINS
// ==========
@mixin neg-space($i, $w, $x, $y) {
  &[data-index="#{$i}"] {
    width: $w;
    left: $x;
    transform: translate(0, $y);
    border-radius: 0 0 50px 50px;
    animation-delay: random(100)+100+ms;
  }
}

@mixin salami($i, $x, $y, $size) {
  &[data-index="#{$i}"] {
    top: $y;
    left: $x;
    width: $size;
    height: $size;
    border-radius: $size;
    animation-delay: random(50)+50+ms;
  }
}

@mixin olive($i, $x, $y, $size) {
  &[data-index="#{$i}"] {
    top: $y;
    left: $x;
    width: $size;
    height: $size;
    border: 12px solid transparent;
    border-radius: 50%;
    animation-delay: random(50)+50+ms;
    @content;
  }
}

@mixin onion($i, $x, $y, $size) {
  &[data-index="#{$i}"] {
    top: $y;
    left: $x;
    width: $size;
    height: $size;
    animation-delay: random(50)+50+ms;
  }
}

// ==========
// STYLES
// ==========
html,
body {
  overflow: hidden;
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: $grey;
}

.Profile {
  width: $size;
  height: $size;
  position: relative;
}

.Profile-shadow,
.Profile-pane {
  position: absolute;
  width: $size;
  height: $size;
}
.Profile-shadow {
  width: 300vw;
  background-color: darken($grey, 3%);
  border-radius: $rad 0 0 $rad;
  transform-origin: $rad $rad;
  transform: rotate(45deg);
}

.Profile-pane {
  box-sizing: border-box;
  background-color: $white;
  border-radius: $rad;
  padding: $border;
}

.Profile-clip {
  width: 100%;
  height: 100%;
  position: relative;
  background: $lavender;
  clip-path: circle(50% at 50% 50%);
  border-radius: 50%;
  overflow: hidden;
}

.Pizza {
  width: 50%;
  height: 100%;
  position: absolute;

  transform: translate(50%, -30%);
  animation: pizza 1.5s infinite;
}

.Crust {
  position: absolute;
  width: 200%;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  stroke-dasharray: 60%;
  stroke-dashoffset: 294;
}

.Cheese {
  width: 100%;
  height: 100%;
  background-color: $cheese;
  position: relative;
  clip-path: circle(50% at 50% 60%);
}

// ==========
// TOPPINGS
// ==========

// === Negative Space
.neg {
  background-color: $lavender;
  position: absolute;
  height: 100%;
  animation: cheese 1.5s infinite;

  @include neg-space(1, 6%,  6%,  -25%);
  @include neg-space(2, 12%, 25%, -40%);
  @include neg-space(3, 8%,  45%, -50%);
  @include neg-space(4, 12%, 65%, -42%);
  @include neg-space(5, 6%,  85%, -30%);
}

// === Salami
.salami {
  background-color: $salami;
  position: absolute;
  animation: toppings 1.5s infinite;

  @include salami(1, 45%, 60%, 22px);
  @include salami(2, 20%, 72%, 28px);
  @include salami(3, 65%, 80%, 30px);
}

// === Olives
.olive {
  position: absolute;
  animation: toppings 1.5s infinite;

  @include olive(1, 54%, 66%, 12px) {
    border-right-color: $olive;
    border-bottom-color: $olive;
  }
  @include olive(2, 34%, 82%, 16px) {
    border-left-color: $olive;
    border-top-color: $olive;
  }
}

// === Onions
.onion {
  position: absolute;
  animation: toppings 1.5s infinite;

  @include onion(1, 36%, 67%, 18px);
  @include onion(2, 16%, 83%, 20px);
}

// ==========
// ANIMATIONS
// ==========
@keyframes pizza {
  0%    {transform: translate(50%, -30%);}
  20%   {transform: translate(50%, -60%);}
  40%   {transform: translate(50%, -23%);}
  60%   {transform: translate(50%, -35%);}
  100%  {transform: translate(50%, -30%);}
}

@keyframes cheese {
  0%    {height: 100%;}
  20%   {height: 20%;}
  40%   {height: 110%;}
  60%   {height: 95%;}
  100%  {height: 100%;}
}

@keyframes toppings {
  0%    {transform: translate(0%, 0%);}
  20%   {transform: translate(0%, -80%);}
  40%   {transform: translate(0%, 10%);}
  60%   {transform: translate(0%, -10%);}
  100%  {transform: translate(0%, -0%);}
}

// WOW NO JS!?