// Variables
$C-Black: #000;
$C-BG-Red: #EC173A;
$C-BG-White: #ECEDDC;
$C-Brain: pink;
$C-Skin: #60BFAB;
$C-Skin-New: #fcc;
$C-Skin-Old: #ccc;
$C-Skin-Shadow: #388B79;
$C-Tooth: #E6D5CD;
$C-Tounge: #682A43;
$C-Eye: #EAD387;
$C-Eye-Iris-Colour: #B0FF57;
$C-Eye-Pupil-Colour: #222;
$C-Radiation: #66FF00;
$C-Highlight: rgba(255,255,255,0.2);
$C-Shadow: rgba(0,0,0,0.2);

$D-Width: 500px;
$D-Eye-Iris-Size: 50px;
$D-Eye-Iris-Depth: 20px;
$D-Eye-Iris-Movement: $D-Eye-Iris-Depth / 3;
$D-Eye-Iris-Position: 40%;

$D-Brain-Size: 90px;

$CS-Outline: 5px solid $C-Black;
$CS-Hair: 3px solid $C-Black;

// Mixins

@mixin eyePosition($value, $shadow_left, $shadow_top, $position_left, $position_top) {
  .option__eye[value="#{$value}"]:checked ~ .eye::after {
    box-shadow: inset $shadow_left $shadow_top 0 $D-Eye-Iris-Depth $C-Eye-Iris-Colour;
    transform: translate($position_left, $position_top);
  }
}

@mixin jawPosition($value, $position, $opacity) {
  .option__jaw[value="#{$value}"]:checked ~ .jaw {
    bottom: $position;
    opacity: $opacity;
  }
}

@mixin skin {
  background: $C-Skin;
  transition: background-color ease .3s;
}

@mixin ageColour($value, $colour) {
  .option__age[value="#{$value}"]:checked ~ & {
    background-color: $colour;
  }
}

// Styles
body {
  background: #888;
  font-family: Copperplate, 'Copperplate Gothic Light', fantasy;
  font-size: 0;
}

#party:target {
  background: 
    linear-gradient(135deg, $C-BG-White 25%, transparent 25%) -50px 0,
    linear-gradient(225deg, $C-BG-White 25%, transparent 25%) -50px 0,
    linear-gradient(315deg, $C-BG-White 25%, transparent 25%),
    linear-gradient(45deg, $C-BG-White 25%, transparent 25%);	
  background-size: 100px 100px;
  background-color: $C-BG-Red;
}

.frame {
  height: 500px;
  margin: 0 auto;
  overflow: hidden;
  padding-left: $D-Width;
  position: relative;
  text-align: left;
  width: $D-Width / 2;
}

.block {
  background: #333;
  height: 100%;
  float: left;
  margin-right: -100%;
  width: 100%;
}

.option {
  display: none;
  
  &__title {
    color: #fff;
    font-size: 1.2rem;
    font-weight: normal;
    margin: 20px 10px 10px;
    text-align: left;
  }
  
  &__link,
  &__label {
    background: #aaa;
    box-shadow: -2px -2px 1px rgba(0,0,0,.25) inset, 2px 2px 1px white inset;
    color: #666;
    display: inline-block;
    font-size: 1.1rem;
    font-weight: bold;
    margin: 5px 0 5px 10px;
    padding: 5px 10px;
    text-decoration: none;
    text-shadow: 0px 1px 0px rgba(255,255,255,.5), 0px -1px 0px rgba(0,0,0,.7);
    
    &:hover,
    &:active,
    &:focus {
      color: $C-BG-Red;
    }
  }
  
  #party:not(:target) &__link--normal,
  #party:target &__link--party,
  input:checked + &__label {
    background: #999;
    box-shadow: 2px 2px 1px rgba(0,0,0,.25) inset, -2px -2px 1px white inset;
    color: $C-BG-Red;
  }
}

.tooth {
  background: $C-Tooth;
  border: $CS-Outline;
  position: absolute;
}

.spot {
  background: $C-Shadow;
  border-radius: 100%;
  position: absolute;
}

.hair {
  position: absolute;
}

.ear {
  @include skin;
  @include ageColour('new', $C-Skin-New);
  @include ageColour('old', $C-Skin-Old);
  
  border: $CS-Outline;
  border-radius: 100%;
  height: 120px;
  position: absolute;
  width: 90px;
  
  &--left {
    left: 20px;
    top: 230px;
    transform: rotate(-20deg);
  }
  
  &--right {
    left: 393px;
    top: 230px;
    transform: rotate(20deg);
  }
  
  &__inner {
    background: $C-Shadow;
    border-top: $CS-Outline;
    border-radius: 100%;
    left: 10%;
    position: absolute;
    height: 80%;
    top: 10%;
    width: 80%;
  }
}

.face {
  @include skin;
  @include ageColour('new', $C-Skin-New);
  @include ageColour('old', $C-Skin-Old);
  
  border: $CS-Outline;
  border-radius: 50% 50% 50% 50%;
  height: 300px;
  left: 72px;
  position: absolute;
  top: 30px;
  width: 356px;
  
  &::after {
    background: $C-Highlight;
    border-radius: 100%;
    content: ' ';
    height: 40px;
    left: 135px;
    position: absolute;
    top: 6px;
    transform: rotate(7deg);
    width: 140px;
  }
  
  &__spot {
    
    &--1 {
      left: 28px;
      height: 16px;
      top: 80px;
      transform: rotate(45deg);
      width: 10px;
    }
    
    &--2 {
      left: 43px;
      height: 4px;
      top: 84px;
      width: 4px;
    }
    
    &--3 {
      height: 8px;
      right: 108px;
      top: 54px;
      transform: rotate(-45deg);
      width: 12px;
    }
    
    &--4 {
      border-radius: 100% 50% 100% 100%;
      height: 16px;
      right: 82px;
      top: 54px;
      transform: rotate(-15deg);
      width: 25px;
    }
    
    &--5 {
      height: 8px;
      right: 60px;
      top: 37px;
      width: 5px;
    }
    
    &--6 {
      height: 3px;
      right: 55px;
      top: 43px;
      width: 3px;
    }
  }
  
  &__hair {
    z-index: 4;
    
    &--1 {
      border-top: $CS-Hair;
      border-radius: 60% 10% 0 0;
      height: 40px;
      left: -25px;
      top: 105px;
      transform: rotate(25deg);
      width: 45px;
    }
    
    &--2 {
      border-top: $CS-Hair;
      border-radius: 40% 10% 0 0;
      height: 20px;
      left: -5px;
      top: 95px;
      transform: rotate(25deg);
      width: 25px;
    }
    
    &--3 {
      border-right: $CS-Hair;
      border-radius: 0 40% 0 0 / 0 60% 0 0;
      height: 30px;
      left: 175px;
      top: -18px;
      transform: rotate(-8deg);
      width: 25px;
    }
    
    &--4 {
      border-left: $CS-Hair;
      border-radius: 40% 0 0 10% / 40% 0 0 5%;
      height: 20px;
      left: 208px;
      top: -10px;
      transform: rotate(5deg);
      width: 25px;
    }
    
    &--5 {
      border-right: $CS-Hair;
      border-radius: 0 40% 0 0 / 0 60% 0 0;
      height: 30px;
      left: 235px;
      top: -16px;
      transform: rotate(-2deg);
      width: 25px;
    }
    
    &--6 {
      border-left: $CS-Hair;
      border-radius: 20% 0 0 10% / 90% 0 0 5%;
      height: 30px;
      left: 266px;
      top: -8px;
      transform: rotate(18deg);
      width: 25px;
    }
    
    &--7 {
      border-left: $CS-Hair;
      border-radius: 60% 0 0 10% / 70% 0 0 5%;
      height: 20px;
      left: 272px;
      top: 5px;
      transform: rotate(30deg);
      width: 25px;
    }
    
    &--8 {
      border-left: $CS-Hair;
      border-radius: 30% 0 0 30% / 60% 0 0 40%;
      height: 50px;
      left: 345px;
      top: 116px;
      transform: rotate(84deg);
      width: 30px;
    }
    
    &--9 {
      border-left: $CS-Hair;
      border-radius: 50% 0 0 50% / 60% 0 0 70%;
      height: 35px;
      left: 350px;
      top: 125px;
      transform: rotate(94deg);
      width: 15px;
    }
  }
}
  
.hole {
  background: $C-Black;
  border: $CS-Outline;
  border-radius: 100%;
  position: absolute;
  
  &::before,
  &::after {
    border-radius: 100%;
    content: ' ';
    position: absolute;
  }
  
  &::before {
    border-top: 2px solid $C-Black;
  }
  
  &::after {
    border-left: 3px solid $C-Black;
  }
  
  &--1 {
    box-shadow: inset 0 8px 0 darken($C-Skin, 30);
    height: 20px;
    left: 132px;
    top: 67px;
    transform: rotate(-30deg);
    width: 60px;

    .option__age[value="new"]:checked ~ & {
      box-shadow: inset 0 8px 0 darken($C-Skin-New, 30);
    }

    .option__age[value="old"]:checked ~ & {
      box-shadow: inset 0 8px 0 darken($C-Skin-Old, 30);
    }
    
    &::before {
      left: -4px;
      height: 100%;
      top: -12px;
      width: 100%;
    }
    
    &::after {
      bottom: -9px;
      left: -14px;
      height: 170%;
      transform: rotate(-24deg);
      width: 70%;
    }
    
  }
  
  &--2 {
    box-shadow: inset -8px 0 0 darken($C-Skin, 30);
    height: 45px;
    left: 374px;
    top: 92px;
    transform: rotate(-20deg);
    width: 25px;

    .option__age[value="new"]:checked ~ & {
      box-shadow: inset -8px 0 0 darken($C-Skin-New, 30);
    }

    .option__age[value="old"]:checked ~ & {
      box-shadow: inset -8px 0 0 darken($C-Skin-Old, 30);
    }
    
  }
}
  
.lip {
  bottom: 125px;
  height: 100px;
  left: 80px;
  position: absolute;
  width: 350px;
  z-index:3;

  &::after {
    @include skin;
    @include ageColour('new', $C-Skin-New);
    @include ageColour('old', $C-Skin-Old);

    border: $CS-Outline;
    border-radius: 80%;
    bottom: 0;
    box-shadow: inset 0 -5px 0 0 $C-Shadow;
    content: ' ';
    height: 100px;
    left: 0;
    position: absolute;
    width: 100%;  
  }

  .tooth {
    border-radius: 0 0 30% 30%;
    box-shadow: inset -2px -3px 0 $C-Shadow;

    &:nth-child(1) {
      bottom: -15px;
      height: 50px;
      left: 30px;
      transform: rotate(10deg);
      width: 50px;
    }

    &:nth-child(2) {
      bottom: -27px;
      height: 50px;
      left: 110px;
      width: 30px;
    }

    &:nth-child(3) {
      border-radius: 0 0 20% 20%;
      bottom: -20px;
      height: 50px;
      left: 170px;
      transform: rotate(-4deg);
      width: 35px;
    }

    &:nth-child(4) {
      bottom: -20px;
      height: 50px;
      left: 230px;
      transform: rotate(-4deg);
      width: 25px;
    }

    &:nth-child(5) {
      bottom: -26px;
      height: 50px;
      right: 30px;
      transform: rotate(-8deg);
      width: 40px;
    }
  }
}

.cheek {
  @include skin;
  @include ageColour('new', $C-Skin-New);
  @include ageColour('old', $C-Skin-Old);

  border: $CS-Outline;
  border-radius: 40%;
  height: 80px;
  position: absolute;
  width: 60px;
  z-index: 4;

  &::before,
  &::after {
    @include skin;
    @include ageColour('new', $C-Skin-New);
    @include ageColour('old', $C-Skin-Old);

    content: ' ';
    height: 50px;
    position: absolute;
    width: 60px;
  }

  &--left {
    bottom: 180px;
    left: 75px;
    transform: rotate(-45deg);

    &::before {
      bottom: 40px;
      left: 38px;
      transform: rotate(45deg);
    }

    &::after {
      bottom: -23px;
      left: 10px;
      transform: rotate(45deg);
    }
  }

  &--right {
    bottom: 180px;
    border-right: $CS-Outline;
    right: 315px;
    transform: rotate(45deg);

    &::before {
      bottom: 30px;
      right: 25px;
      transform: rotate(45deg);
    }

    &::after {
      bottom: -20px;
      left: 10px;
      transform: rotate(45deg);
    }
  }
}

.nose {
  @include skin;
  @include ageColour('new', $C-Skin-New);
  @include ageColour('old', $C-Skin-Old);
  height: 75px;
  left: 212px;
  overflow: hidden;
  position: absolute;
  top: 255px;
  width: 80px;
  z-index: 4;
  
  &__hole {
    background: $C-Black;
    border-radius: 40px;
    height: 60px;
    position: absolute;
    width: 25px;
    
    &--top {
      left: 50%;
      margin-left: -10px;
      top: 0;
    }
    
    &--left {
      bottom: -2px;
      left: 12px;
      transform: rotate(40deg);
    }
    
    &--right {
      bottom: -4px;
      right: 15px;
      transform: rotate(-45deg);
    }
    
    &--bottom {
      bottom: -15px;
      right: 30px;
      transform: rotate(-90deg);
    }
    
    &--side {
      bottom: 0px;
      right: 13px;
      transform: rotate(-25deg);
    }
  }
  
  &__cover {
    background-color: inherit;
    position: absolute;
    
    &--left {
      border-radius: 100%;
      left: -4px;
      height: 50px;
      top: 4px;
      transform: rotate(40deg);
      width: 30px;
    }
    
    &--bottom {
      border-radius: 30%;
      left: 12px;
      height: 50px;
      top: 64px;
      transform: rotate(50deg);
      width: 50px;
    }
    
    &--right {
      border-radius: 100%;
      height: 50px;
      right: 3px;
      top: 3px;
      transform: rotate(-25deg);
      width: 20px;
    }
  }
}

.jaw {
  @include skin;
  @include ageColour('new', $C-Skin-New);
  @include ageColour('old', $C-Skin-Old);

  border: $CS-Outline;
  border-radius: 0 0 15% 15%;
  bottom: 30px;
  height: 200px;
  left: 98px;
  position: absolute;
  transition-property: background-color, bottom, opacity;
  transition-duration: .3s;
  transition-timing-function: ease;
  width: 310px;
  
  &::before,
  &::after {
    @include skin;
    @include ageColour('new', $C-Skin-New);
    @include ageColour('old', $C-Skin-Old);
      
    border: $CS-Outline;
    bottom: -23px;
    box-shadow: inset 0 -5px 0 $C-Shadow;
    content: ' ';
    height: 150px;
    position: absolute;
    width: 150px;
  }
  
  &::before {
    border-radius: 30% 10% 45% 45% / 70% 0 15% 45%;
    left: -12px;
  }
  
  &::after {
    border-radius: 10% 30% 45% 45% / 0 70% 45% 15%;
    right: -12px;
  }
  
  &__spot--left {
    bottom: 9px;
    height: 5px;
    right: 8px;
    transform: rotate(-45deg);
    width: 12px;
    z-index: 4;
  }
  
  &__spot--right {
    bottom: 18px;
    height: 4px;
    right: 3px;
    transform: rotate(-45deg);
    width: 8px;
    z-index: 4;
  }
  
  &__hair--1 {
      border-left: $CS-Hair;
      border-radius: 50% 0 0 50%;
      height: 40px;
      left: 10px;
      top: 205px;
      transform: rotate(15deg);
      width: 20px;
  }
  
  &__hair--2 {
      border-right: $CS-Hair;
      border-radius: 0 50% 50% 0;
      height: 20px;
      left: 1px;
      top: 195px;
      transform: rotate(55deg);
      width: 7px;
  }
  
  &__line--1 {
    border-radius: 0 0 0 90%;
    box-shadow: -2px 2px 0 $C-Black;
    height: 55px;
    left: 18px;
    position: absolute;
    top: 135px;
    width: 70px;
  }
  
  &__line--2 {
    border-radius: 0 0 90% 0;
    box-shadow: 2px 2px 0 $C-Black;
    height: 55px;
    left: 218px;
    position: absolute;
    top: 137px;
    width: 70px;
    z-index: 2;
  }
  
  &__middle {
    background: inherit;
    bottom: 0px;
    left: 50%;
    height: 10px;
    margin-left: -15px;
    position: absolute;
    width: 30px;
    z-index: 10;
  }
}

@include jawPosition("closed", 90px, 1);
@include jawPosition("gone", -300px, 0);

.mouth {
  background: $C-Black;
  border: $CS-Outline;
  border-radius: 0 0 50% 50%;
  bottom: 10px;
  height: 100px;
  left: 30px;
  overflow: hidden;
  position: absolute;
  width: 240px;
  z-index: 2;
  
  &__tounge {
    background: $C-Tounge;
    border-radius: 100%;
    bottom: -100px;
    height: 150px;
    left: 50%;
    margin-left: -110px;
    position: absolute;
    width: 220px;
    
    &::after {
      background: $C-Highlight;
      border-radius: 100%;
      content: ' ';
      height: 20px;
      left: 50%;
      margin-left: -40px;
      position: absolute;
      top: 10px;
      width: 80px;
    }
    
    &-spot:nth-child(1) {
      height: 7px;
      left: 65px;
      top: 35px;
      width: 14px;
    }
    
    &-spot:nth-child(2) {
      height: 5px;
      left: 78px;
      top: 43px;
      width: 10px;
    }
    
    &-spot:nth-child(3) {
      height: 5px;
      left: 136px;
      top: 42px;
      width: 10px;
    }
  }
  
  &__tooth--left {
    border-radius: 40% 40% 5% 0 / 30% 60% 20% 0;
    bottom: -10px;
    height: 30px;
    left: 40px;
    transform: rotate(8deg);
    width: 20px;
  }
  
  &__tooth--right {
    border-radius: 40% 100% 100% 0 / 30% 60% 100% 0;
    bottom: -10px;
    height: 30px;
    right: 40px;
    transform: rotate(-20deg);
    width: 30px;
  }
}

.eye {
  background-color: $C-Eye;
  border: $CS-Outline;
  box-shadow: inset 0 -5px 0 0 $C-Shadow, 0 10px 0 0 $C-Shadow;
  overflow: hidden;
  position: absolute;
  z-index: 5;
  
  &::after {
    background: $C-Eye-Pupil-Colour;
    border: $CS-Outline;
    border-radius: 50%;
    box-shadow: inset 0 0 0 $D-Eye-Iris-Depth $C-Eye-Iris-Colour;
    content: ' ';
    height: $D-Eye-Iris-Size;
    left: 50%;
    margin: (0 - ($D-Eye-Iris-Size / 2)) 0 0 (0 - ($D-Eye-Iris-Size / 2));
    position: absolute;
    top: 50%;
    transition: transform .3s ease, box-shadow .3s ease;
    width: $D-Eye-Iris-Size;
  }
  
  &--left {
    border-radius: 80% 65% 75% 50%;
    height: 140px;
    left: 110px;
    top: 140px;
    width: 125px;
  }
  
  &--right {
    border-radius: 70% 70% 80% 80%;
    height: 120px;
    left: 280px;
    top: 170px;
    width: 110px;
  }
  
  &__lid {
    border-top: $CS-Outline;
    border-radius: 70% 70% 80% 80%;
    height: 130px;
    left: 280px;
    overflow: hidden;
    position: absolute;
    top: 170px;
    width: 120px;
    z-index: 5;
    
    &::before {
      border-top: $CS-Outline;
      border-radius: 100%;
      box-shadow: 0 0 0 50px darken($C-Skin, 10);
      content: ' ';
      position: absolute;
      height: 200%;
      left: -110%;
      top: 35%;
      transform: rotate(10deg);
      transition: box-shadow ease .3s;
      width: 300%;
      
      .option__age[value="new"]:checked ~ & {
        box-shadow: 0 0 0 50px darken($C-Skin-New, 10);
      }
      
      .option__age[value="old"]:checked ~ & {
        box-shadow: 0 0 0 50px darken($C-Skin-Old, 10);
      }
    }
    
    &::after {
      background: $C-Highlight;
      border-radius: 100%;
      content: ' ';
      position: absolute;
      height: 20px;
      left: 7px;
      top: 10px;
      transform: rotate(-16deg);
      width: 60px;
      z-index: 6;
    }
  }
}

@include eyePosition("left", -$D-Eye-Iris-Movement, 0, -$D-Eye-Iris-Position, 0);
@include eyePosition("right", $D-Eye-Iris-Movement, 0, $D-Eye-Iris-Position, 0);
@include eyePosition("top", 0, -$D-Eye-Iris-Movement, 0, -$D-Eye-Iris-Position);
@include eyePosition("bottom", 0, $D-Eye-Iris-Movement, 0, $D-Eye-Iris-Position);

.lines {
  list-style: none;
  margin: 0;
  padding: 0;
}

.line {
  position: absolute;
  
  &--nose-top {
    border-radius: 100%;
    box-shadow: 0 -4px 0 1px $C-Black;
    height: 50px;
    left: 238px;
    top: 243px;
    width: 32px;
  }
  
  &--nose-left {
    border-radius: 100%;
    box-shadow: 0 4px 0 1px $C-Black;
    height: 60px;
    left: 202px;
    top: 283px;
    transform: rotate(45deg);
    width: 38px;
    z-index: 3;
  }
  
  &--nose-right {
    border-radius: 100%;
    box-shadow: 0 4px 0 1px $C-Black;
    height: 60px;
    left: 258px;
    top: 283px;
    transform: rotate(-45deg);
    width: 38px;
    z-index: 3;
  }
  
  &--eyebrow-left {
    border-radius: 100%;
    box-shadow: 0 -8px 0 0 $C-Black;
    height: 150px;
    left: 108px;
    top: 118px;
    transform: rotate(15deg);
    width: 148px;
    z-index: 3;
  }
  
  &--eyebrow-highlight-left {
    border-radius: 100%;
    box-shadow: 0 -12px 0 0 $C-Highlight;
    height: 100px;
    left: 118px;
    top: 136px;
    transform: rotate(1deg);
    width: 128px;
    z-index: 3;
  }
  
  &--eyebrow-right {
    border-radius: 100%;
    box-shadow: 0 -8px 0 0 $C-Black;
    height: 100px;
    left: 268px;
    top: 143px;
    transform: rotate(-15deg);
    width: 128px;
    z-index: 3;
  }
  
  &--eyebrow-highlight-right {
    border-radius: 100%;
    box-shadow: 0 -9px 0 0 $C-Highlight;
    height: 80px;
    left: 278px;
    top: 156px;
    transform: rotate(-7deg);
    width: 116px;
    z-index: 3;
  }
}