//- Container
.container

  //-- Social links
  .social
    ul.socialList
      li.socialList__item
        a.socialList__link(href="https://github.com/Kerthin?tab=overview&from=2021-05-01&to=2021-05-05" target="_blank")
          svg.socialList__icon(viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round")
            path(d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22")
      li.socialList__item
        a.socialList__link(href="https://codepen.io/Astap" target="_blank")
          svg.socialList__icon(viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round")
            polygon(points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2")
            line(x1="12" y1="22" x2="12" y2="15.5")
            polyline(points="22 8.5 12 15.5 2 8.5")
            polyline(points="2 15.5 12 8.5 22 15.5")
            line(x1="12" y1="2" x2="12" y2="8.5")

  //-- Home section
  section.home

    //--- Illustration
    .illustration

      //---- Illustration Blob Circle
      svg#blob-js.illustrationBlob(viewBox="0 0 1000 1000")
        path#blob__path-js.illustrationBlob__path

      //---- Illustration Bubbles Wrap
      ul.illustrationBubblesWrap
        - for (var n = 0; n < 12; n++)
          li.illustrationBubble

      //---- Illustration Dashed Frame
      - var n = 1;
      while n <= 3
        .illustrationDashedFrame(class=`dashedFrame_type${n++}`)

      //---- Illustration Circle Charts
      - var n = 1;
      while n <= 2
        .illustrationCircleChart(class=`illustrationCircleChart_type${n++}`)

      //---- Illustration Stickers
      - var n = 1;
      while n <= 2
        .illustrationSticker(class=`illustrationSticker_type${n++}`)
          ul.illustrationSticker__lineWrap
            - for (var j = 0; j < 3; j++)
              li.illustrationSticker__line

      //---- Illustration Site Layout
      .illustrationSiteLayout
        .illustrationSiteLayout__codeWrap
          .illustrationSiteLayout__scrollBox
            ul.illustrationSiteLayout__codeList
              - for (var n = 0; n < 4; n++)
                li.illustrationSiteLayout__codeItem
                  - for (var j = 0; j < 7; j++)
                    .illustrationSiteLayout__codeLine

      //---- Illustration Dialog
      ul.illustrationDialog
        - for (var n = 0; n < 5; n++)
          li.illustrationDialog__line

      //---- Illustration Folder
      .illustrationFolder
        ul.illustrationFolder__file
          - for (var n = 0; n < 5; n++)
            li.illustrationFolder__line

      //---- Illustration Books
      .illustrationBooks
        .illustrationBooks__book
        .illustrationBooks__book
        .illustrationBooks__book
          - for (var n = 0; n < 4; n++)
            .illustrationBooks__binding

      //---- Illustration Analytics
      .illustrationAnalytics
        .illustrationAnalyticsPanel
          .illustrationAnalyticsPanel__buttonsWrap
            each val, index in ['exit', 'minimize', 'screen']
              .illustrationAnalyticsPanel__button(class=`__button_${val}`)

        //----- Illustration Analytics  Page
        .illustrationAnalyticsPage
          .illustrationAnalyticsPage__container

            //------ Illustration Analytics Diagram
            ul.illustrationAnalyticsPage__diagramWrap
              - for (var n = 0; n < 4; n++)
                li.illustrationAnalyticsPage__diagram

            //------ Illustration Analytics Banner
            .illustrationAnalyticsPage__banner

              //------- Illustration Analytics Description
              ul.illustrationAnalyticsPage__lineWrap
                - for (var n = 0; n < 8; n++)
                  li.illustrationAnalyticsPage__line

              //------- Illustration Analytics Product List
              ul.illustrationAnalyticsPage__productList
                - for (var n = 0; n < 4; n++)
                  li.illustrationAnalyticsPage__productItem
                    .illustrationAnalyticsPage__productImg
                    ul.illustrationAnalyticsPage__productLineWrap
                      - for (var j = 0; j < 3; j++)
                        li.illustrationAnalyticsPage__productLine

      //---- Illustration Imac
      .illustrationImac
        //----- Illustration Imac Display
        .illustrationImac__display

          //------ Illustration Imac Editor
          .illustrationImacEditor
            .illustrationImacEditorPanel

            //------- Illustration Imac Editor Code
            .illustrationImacEditorCodeWrap
              .illustrationImacEditorCodeWrap__scrollBox
                - for (var n = 0; n < 2; n++)
                  ul.illustrationImacEditorCodeWrap__codeList
                    - for (var j = 0; j < 6; j++)
                      li.illustrationImacEditorCodeWrap__codeItem
                        - for (var x = 0; x < 10; x++)
                          .illustrationImacEditorCodeWrap__codeLine

          //------ Illustration Imac Browser
          .illustrationImacBrowser

            //------- Illustration Imac Browser Panel
            .illustrationImacBrowserPanel
              .illustrationImacBrowserPanel__buttonsWrap
                each val, index in ['exit', 'minimize', 'screen']
                  .illustrationImacBrowserPanel__button(class=`__button_${val}`)

            //------- Illustration Imac Browser Page
            .illustrationImacBrowserPage
              .illustrationImacBrowserPage__container

                //-------- Illustration Imac Browser Header
                header.illustrationImacBrowserPage__header
                  ul.illustrationImacBrowserPage__nav
                    - for (var n = 0; n < 4; n++)
                      li.illustrationImacBrowserPage__navItem

                //-------- Illustration Imac Browser Main
                section.illustrationImacBrowserPage__main
                  .illustrationImacBrowserPage__banner
                    .illustrationImacBrowserPage__img
                    ul.illustrationImacBrowserPage__lineWrap
                      - for (var n = 0; n < 4; n++)
                        li.illustrationImacBrowserPage__line

                //-------- Illustration Imac Browser Footer
                footer.illustrationImacBrowserPage__footer
                  ul.illustrationImacBrowserPage__productList
                    - for (var n = 0; n < 3; n++)
                      li.illustrationImacBrowserPage__productItem
                        .illustrationImacBrowserPage__productImg
                        ul.illustrationImacBrowserPage__productLineWrap
                          - for (var j = 0; j < 2; j++)
                            li.illustrationImacBrowserPage__productLine

          //------ Picture
          .picture
            .picture__dayWrap
              .picture__sun
              .picture__moon
            .picture__mountainsWrap
              - for (var n = 0; n < 3; n++)
                .picture__mountain

          //------ Avatar
          .avatarWrap
            .avatar

              //------- Head
              .headWrap
                //-------- Hair
                .hair
                  .hair__leftSide
                    - for (var n = 0; n < 3; n++)
                      .blink
                  .hair__rightSide

                //-------- Ears
                .ears
                  .ear
                  .ear

                //-------- Face
                .face
                  //--------- Top Face
                  .eyebrows
                    .eyebrows__brow
                    .eyebrows__brow
                    .eyebrows__shadow
                  //--------- Middle Face
                  .eyes
                  .glasses
                    each val, index in ['left', 'right']
                      div(class=`${val}`)
                        .lens
                          .shine
                  //--------- Bottom Face
                  .nose
                  .arm
                    each val, index in ['pharynx', 'tooth', 'tongue']
                      div(class=`arm__${val}`)

                //-------- Neck
                .neck

              //------- Body
              .bodyWrap
                .bodyWrap__body
                  .collar
                    .shirt
                    .button
                    .button
                //-------- Bow
                .bowWrap
                  each val, index in ['bowShadow', 'bow', 'crease']
                    div(class=`bowWrap__${val}`)

        //----- Illustration Imac Panel
        .illustrationImac__panel
          .illustrationImac__panelButton

        //----- Illustration Imac Stand
        .illustrationImac__stand
          .illustrationImac__standShadow
          .illustrationImac__standBase

      //---- Illustration Presentation
      .illustrationPresentation
        //----- Illustration Presentation Panel
        .illustrationPresentationPanel
          .illustrationPresentationPanel__buttonsWrap
            each val, index in ['exit', 'minimize', 'screen']
              .illustrationPresentationPanel__button(class=`__button_${val}`)

        //----- Illustration Presentation Page
        .illustrationPresentationPage
          .illustrationPresentationPage__container

            //------ Illustration Presentation Banner
            .illustrationPresentationPage__banner
              .illustrationPresentationPage__img
                //------- Picture
                .picture
                  .picture__dayWrap
                    .picture__sun
                    .picture__moon
                  .picture__mountainsWrap
                    - for (var n = 0; n < 3; n++)
                      .picture__mountain
              ul.illustrationPresentationPage__lineWrap
                - for (var n = 0; n < 6; n++)
                  li.illustrationPresentationPage__line

            //------ Illustration Presentation Form
            .illustrationPresentationPage__form
              .illustrationPresentationPage__input
              .illustrationPresentationPage__input

      //---- Illustration Settings
      .illustrationSettings
        .illustrationSettings__container

          //----- Illustration Settings Gear
          .illustrationSettings__gearWrap
            .illustrationSettings__gear
              svg(viewBox="-208 -208 300 300")
                defs
                  line#tooth(x1="-2" x2="26")
                g.teeth
                  - var n = 0;
                  - var angle = 45;
                  while n < 8
                    g(transform=`rotate(${n++ * angle})`)
                      use(xlink:href="#tooth" x="85")
            .illustrationSettings__gearCircle

          //----- Illustration Settings Line
          ul.illustrationSettings__lineWrap
            - for (var n = 0; n < 4; n++)
              li.illustrationSettings__line

/*____________________________________________________________

# @import
  ## @import reset.scss
# Variables
  ## Regular color variables
  ## Compound color variables
  ## Screen size variables
# Extends
  ## Position centering extends
# Mixins
  ## Media queries mixin
  ## Animation delay mixin
# Auxiliary styles
# Container
  ## Social links
  ## Home section
    ### Illustration
      #### Illustration Blob Circle
      #### Illustration Bubbles Wrap
      #### Illustration Dashed Frame
      #### Illustration Circle Charts
      #### Illustration Stickers
      #### Illustration Site Layout
      #### Illustration Dialog
      #### Illustration Folder
      #### Illustration Books
      #### Illustration Analytics
        ##### Illustration Analytics Page
          ###### Illustration Analytics Diagram
          ###### Illustration Analytics Banner
            ####### Illustration Analytics Description
            ####### Illustration Analytics Product List
      #### Illustration Imac
        ##### Illustration Imac Display
          ###### Illustration Imac Editor
            ####### Illustration Imac Editor Code
          ###### Illustration Imac Browser
            ####### Illustration Imac Browser Panel
            ####### Illustration Imac Browser Page
              ######## Illustration Imac Browser Header
              ######## Illustration Imac Browser Main
              ######## Illustration Imac Browser Footer
          ###### Avatar
            ####### Head
              ######## Hair
              ######## Ears
              ######## Face
                ######### Top Face
                ######### Middle Face
                ######### Bottom Face
              ######## Neck
            ####### Body
              ######## Bow
        ##### Illustration Imac Panel
        ##### Illustration Imac Stand
      #### Illustration Presentation  
        ##### Illustration Presentation Panel
        ##### Illustration Presentation Page
          ###### Illustration Presentation Banner
            ####### Picture
          ###### Illustration Presentation Form
      #### Illustration Settings
        ##### Illustration Settings Gear
        ##### Illustration Settings Line
# Animation Pack

____________________________________________________________*/

/*____________________________________________________________
# @import
____________________________________________________________*/
/*____________________________________________________________
## @import reset.scss
____________________________________________________________*/
// @import '../../bower_components/reset-scss/reset.scss';
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
}
// HTML5 display-role reset for older browsers
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*____________________________________________________________
# Variables
____________________________________________________________*/
/*____________________________________________________________
## Regular color variables
____________________________________________________________*/
// First number color
$x-color-black: #000;
$x-color-dark-blue: #01243a;
$x-color-dark-greenish-blue: #0b3442;
$x-color-blackish-blue: #171b25;
$x-color-dark-grey-blue: #272f3a;
$x-color-lime-green: #29c740;
$x-color-granite: #2a333c;
$x-color-dark-cyanide: #2c8291;
$x-color-cyanide: #37a4b8;
$x-color-slate-grey: #3e4955;
$x-color-graphite-grey: #4c5259;
$x-color-wet-asphalt: #626a73;
$x-color-aquamarine: #7dcbd8;
$x-color-deep-red-brown: #480a16;
$x-color-flea-belly: #4d160e;
$x-color-marengo: #4d5c68;
$x-color-moderate-turquoise: #57c2cb;
$x-color-falun-red: #5f140e;
$x-color-dark-red: #732124;
$x-color-pearl-ruby: #7a1635;
$x-color-manatee: #889ea6;
$x-color-coral-red: #8c250e;
$x-color-vinous: #9b2d30;

// First letter color
$x-color-snow-blue: #a3d9e3;
$x-color-cadet-blue: #a4b4ba;
$x-color-niagara: #b0b7c6;
$x-color-silver: #c0c0c0;
$x-color-grideperlevy: #c3cdd1;
$x-color-grey-silk: #c6b69d;
$x-color-deep-orange: #c74b16;
$x-color-light-cyanide: #cceaf0;
$x-color-periwinkle: #cfdce5;
$x-color-light-cherry: #dd3e62;
$x-color-gainsborough: #e1e6e8;
$x-color-tomato: #ee6648;
$x-color-beige: #f7e0b5;
$x-color-lemon-cream: #fafac3;
$x-color-shiny-orange: #febc2e;
$x-color-amber: #fec712;
$x-color-orange-dawn: #ff5f56;
$x-color-white: #fff;

/*____________________________________________________________
## Compound color variables
____________________________________________________________*/
$palette-primary: $x-color-vinous;
$palette-secondary: $x-color-beige;
$palette-tertiary: $x-color-aquamarine;

$palette-button-exit: $x-color-orange-dawn;
$palette-button-minimize: $x-color-shiny-orange;
$palette-button-screen: $x-color-lime-green;

$palette-bubble-type-1: $x-color-aquamarine;
$palette-bubble-type-2: $x-color-granite;
$palette-bubble-type-3: $x-color-tomato;

$palette-chart-type-1: $x-color-tomato;
$palette-chart-type-2: $x-color-granite;

$palette-window-line: $x-color-light-cyanide;

$palette-folder-shadow: $x-color-dark-cyanide;

$palette-settings-elements: $x-color-dark-cyanide;

$palette-analytics-elements: $x-color-snow-blue;

$palette-dialog: $x-color-snow-blue;

$palette-site-layout: $x-color-snow-blue;

$palette-imac-display-gradient: $x-color-snow-blue;
$palette-imac-browser-elements: $x-color-silver;
$palette-imac-browser-line: $x-color-granite;

$palette-program-panel: $x-color-granite;

$palette-skin: $x-color-deep-orange;
$palette-skin-shadow: $x-color-falun-red;
$palette-hair-blink: $x-color-dark-greenish-blue;
$palette-hair-shadow: $x-color-dark-blue;
$palette-costume-elements: $x-color-marengo;
$palette-bow-elements: $x-color-dark-red;

/*____________________________________________________________
## Screen size variables
____________________________________________________________*/
$media-screen-1824: 1824px;
$media-screen-1680: 1680px;
$media-screen-1600: 1600px;
$media-screen-1440: 1440px;
$media-screen-1366: 1366px;
$media-screen-1280: 1280px;
$media-screen-1120: 1120px;
$media-screen-1024: 1024px;

$media-screen-960: 960px;
$media-screen-848: 848px;
$media-screen-768: 768px;
$media-screen-720: 720px;
$media-screen-642: 642px;
$media-screen-480: 480px;

$media-screen-410: 410px;
$media-screen-375: 375px;
$media-screen-360: 360px;
$media-screen-320: 320px;

/*____________________________________________________________
# Extends
____________________________________________________________*/
/*____________________________________________________________
## Position centering extends
____________________________________________________________*/
%verticalCentering {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

%horizontalCentering {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

%centering {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*____________________________________________________________
# Mixins
____________________________________________________________*/
/*____________________________________________________________
## Media queries mixin
____________________________________________________________*/
@mixin media-screen($media) {
  @if $media == 1824 {
    @media only screen and (max-width: $media-screen-1824) { @content; }
  }
  @else if $media == 1680 {
    @media only screen and (max-width: $media-screen-1680) { @content; }
  }
  @else if $media == 1600 {
    @media only screen and (max-width: $media-screen-1600) { @content; }
  }
  @else if $media == 1440 {
    @media only screen and (max-width: $media-screen-1440) { @content; }
  }
  @else if $media == 1366 {
    @media only screen and (max-width: $media-screen-1366) { @content; }
  }
  @else if $media == 1280 {
    @media only screen and (max-width: $media-screen-1280) { @content; }
  }
  @else if $media == 1120 {
    @media only screen and (max-width: $media-screen-1120) { @content; }
  }
  @else if $media == 1024 {
    @media only screen and (max-width: $media-screen-1024) { @content; }
  }

  @else if $media == 960 {
    @media only screen and (max-width: $media-screen-960) { @content; }
  }
  @else if $media == 848 {
    @media only screen and (max-width: $media-screen-848) { @content; }
  }
  @else if $media == 768 {
    @media only screen and (max-width: $media-screen-768) { @content; }
  }
  @else if $media == 720 {
    @media only screen and (max-width: $media-screen-720) { @content; }
  }
  @else if $media == 642 {
    @media only screen and (max-width: $media-screen-642) { @content; }
  }
  @else if $media == 480 {
    @media only screen and (max-width: $media-screen-480) { @content; }
  }
  
  @else if $media == 414 {
    @media only screen and (max-width: $media-screen-410) { @content; }
  }
  @else if $media == 375 {
    @media only screen and (max-width: $media-screen-375) { @content; }
  }
  @else if $media == 360 {
    @media only screen and (max-width: $media-screen-360) { @content; }
  }
  @else if $media == 320 {
    @media only screen and (max-width: $media-screen-320) { @content; }
  }
}

/*____________________________________________________________
## Animation delay mixin
____________________________________________________________*/
@mixin animDelayChild($nthChild, $delay) {
  &:nth-child(#{$nthChild}) {
    &:after {
      animation-delay: #{$delay}s;
    }
  }
}

/*____________________________________________________________
# Auxiliary styles
____________________________________________________________*/
::-webkit-scrollbar {
  width: 0;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.__button_exit {
  background-color: $palette-button-exit;
}
.__button_minimize {
  background-color: $palette-button-minimize;
}
.__button_screen {
  background-color: $palette-button-screen;
}

/*____________________________________________________________
# Container
____________________________________________________________*/
.container {
  width: 100%;
}

/*____________________________________________________________
## Social links
____________________________________________________________*/
.social {
  position: fixed;
  left: 40px;
  bottom: 0;
  width: 20px;
  height: 100px;
  z-index: 10;
}
.socialList {
  width: 100%;
  
  &:after {
    content: '';
    display: block;
    margin: 0 auto;
    width: 1px;
    height: 40px;
    background: #f7e0b5;
  }
}
.socialList__item {
  margin-bottom: 10px;
  width: 20px;
  height: 20px;
  transition: transform .2s;
  
  &:hover {
    transform: translateY(-3px);
    
    .socialList__icon {
      stroke: #7dcbd8;
    }
  }
}

.socialList__icon {
  fill: none;
  stroke: #f7e0b5;
}

/*____________________________________________________________
## Home section
____________________________________________________________*/
.home {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: $palette-primary;
}

/*____________________________________________________________
### Illustration
____________________________________________________________*/
.illustration {
  @extend %centering;
  width: 893px;
  height: 600px;
  overflow: hidden;

  &:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 3px;
    border-radius: 3px;
    background-color: $x-color-granite;
  }
}

/*____________________________________________________________
#### Illustration Blob Circle
____________________________________________________________*/
.illustrationBlob {
  position: absolute;
  width: 893px;
  height: 893px;
}
.illustrationBlob__path {
  position: absolute;
  fill: $palette-secondary;
}

/*____________________________________________________________
#### Illustration Bubbles Wrap
____________________________________________________________*/
.illustrationBubblesWrap {
  width: 100%;
  height: 100%;
}

.illustrationBubble  {
  position: absolute;
  border-radius: 50%;
  background-color: $palette-tertiary;
  animation: levitation 5s linear infinite;

  @mixin bubbleChild($nthChild, $top, $left, $width, $height, $bg, $delay) {
    &:nth-child(#{$nthChild}) {
      top: #{$top}px;
      left: #{$left}px;
      width: #{$width}px;
      height: #{$height}px;
      background-color: #{$bg};
      animation-delay: #{$delay}s;
    }
  }

  @include bubbleChild(1, 535, 310, 16, 16, $palette-bubble-type-1, 0);
  @include bubbleChild(2, 370, 150, 12, 12, $palette-bubble-type-1, .3);
  @include bubbleChild(3, 240, 50, 16, 16, $palette-bubble-type-2, .6);
  @include bubbleChild(4, 180, 2, 10, 2, $palette-bubble-type-1, 0);
  @include bubbleChild(5, 140, 275, 20, 20, transparent, 1.2);
  @include bubbleChild(6, 50, 420, 12, 12, $palette-bubble-type-1, 1.5);
  @include bubbleChild(7, 10, 510, 10, 10, $palette-bubble-type-1, 1.8);
  @include bubbleChild(8, 30, 640, 6, 6, $palette-bubble-type-2, 2.1);
  @include bubbleChild(9, 75, 700, 10, 2, $palette-bubble-type-1, 2.4);
  @include bubbleChild(10, 220, 780, 16, 16, $palette-bubble-type-1, 2.7);
  @include bubbleChild(11, 300, 730, 6, 6, $palette-bubble-type-3, 3);
  @include bubbleChild(12, 550, 630, 10, 2, $palette-bubble-type-2, 3.3);

  &:nth-child(4) {
    animation: none;
  }

  &:nth-child(4),
  &:nth-child(9),
  &:nth-child(12) {
    border-radius: 1px;
  }

  &:nth-child(4):before,
  &:nth-child(9):before,
  &:nth-child(12):before {
    content: '';
    position: absolute;
    top: -4px;
    left: 4px;
    width: 2px;
    height: 10px;
    border-radius: 1px;
    background-color: $palette-bubble-type-1;
  }

  &:nth-child(5) {
    border: 3px solid $palette-bubble-type-1;
  }

  &:nth-child(12):before {
    background-color: $palette-bubble-type-2;
  }
}


/*____________________________________________________________
#### Illustration Dashed Frame
____________________________________________________________*/
.illustrationDashedFrame {
  position: absolute;
  border: 2px dashed $x-color-cyanide;
  border-radius: 5px;
}

@mixin dashedFrameType($nthType, $top, $left, $width, $height) {
  .dashedFrame_type#{$nthType} {
    top: #{$top}px;
    left: #{$left}px;
    width: #{$width}px;
    height: #{$height}px;
  }
}

@include dashedFrameType(1, 292, 130, 116, 243);
@include dashedFrameType(2, 100, 210, 130, 130);
@include dashedFrameType(3, 210, 673, 170, 210);

/*____________________________________________________________
#### Illustration Circle Charts
____________________________________________________________*/
.illustrationCircleChart,
.illustrationCircleChart_type1:before,
.illustrationCircleChart_type2,
.illustrationCircleChart_type2:before,
.illustrationCircleChart_type2:after {
  position: absolute;
  border-radius: 50%;
}

.illustrationCircleChart_type1 {
  top: 250px;
  left: 90px;
  border-right: 30px solid transparent;
  border-top: 30px solid $palette-tertiary;
  border-left: 30px solid $palette-tertiary;
  border-bottom: 30px solid $palette-tertiary;
  animation: rotateRays 7s linear infinite;

  &:before {
    content: '';
    top: -30px;
    left: -24px;
    border-right: 30px solid $palette-chart-type-1;
    border-top: 30px solid transparent;
    border-left: 30px solid transparent;
    border-bottom: 30px solid transparent;
  }
}

.illustrationCircleChart_type2 {
  top: 280px;
  right: 30px;
  border-right: 35px solid transparent;
  border-top: 35px solid $x-color-tomato;
  border-left: 35px solid transparent;
  border-bottom: 35px solid $x-color-tomato;
  animation: rotateRays 7s linear infinite;

  &:before {
    content: '';
    top: -35px;
    left: -30px;
    border-right: 35px solid $palette-chart-type-2;
    border-top: 35px solid transparent;
    border-left: 35px solid transparent;
    border-bottom: 35px solid transparent;
  }
  &:after {
    content: '';
    top: -35px;
    right: -30px;
    border-right: 35px solid transparent;
    border-top: 35px solid transparent;
    border-left: 35px solid $palette-chart-type-2;
    border-bottom: 35px solid transparent;
  }
}

/*____________________________________________________________
#### Illustration Stickers
____________________________________________________________*/
.illustrationSticker {
  position: absolute;
  padding: 10px 7px;
  width: 60px;
  height: 35px;
  overflow: hidden;

  &:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-width: 0 16px 16px 0;
    border-style: solid;
    display: block;
    width: 0;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
                -1px 1px 1px rgba(0, 0, 0, 0.2);
  }
}


@mixin stickerType($nthType, $top, $left, $bg) {
  .illustrationSticker_type#{$nthType} {
    top: #{$top}px;
    left: #{$left}px;
    background-color: #{$bg};

    &:before {
      border-color: #f7e0b5 #f7e0b5 #{$bg} #{$bg};
    }
  }
}

@include stickerType(1, 125, 320, $palette-tertiary);
@include stickerType(2, 75, 300, $x-color-tomato);

.illustrationSticker_type1 {
  transform: rotate(10deg);
}

.illustrationSticker__lineWrap {
  width: 28px;
  height: 15px;
  list-style: none;
}
.illustrationSticker__line {
  position: relative;
  margin-bottom: 3px;
  width: 100%;
  height: 3px;
  overflow: hidden;

  &:nth-child(2) {
    &:after {
      animation-delay: .1s;
    }
  }
  &:nth-child(3) {
    &:after {
      animation-delay: .2s;
    }
  }

  &:last-child {
    margin-bottom: 0;
    width: 70%;
  }
  &:after {
    content: '';
    position: absolute;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: $x-color-white;
    animation: slide 3.5s ease infinite;
  }
}

/*____________________________________________________________
#### Illustration Site Layout
____________________________________________________________*/
.illustrationSiteLayout {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 90px;
  height: 85px;
  border: 2px solid $palette-site-layout;
  border-radius: 5px;
  animation: levitation 5s linear infinite 3.2s;

  &:before,
  &:after {
    content: '';
    position: absolute;
    border: solid $palette-site-layout;
  }
  &:before {
    width: 100%;
    height: 20px;
    border-width: 0 0 2px 0;
  }
  &:after {
    top: 20px;
    width: 20px;
    height: calc(100% - 20px);
    border-width: 0 2px 0 0;
  }
}

.illustrationSiteLayout__codeWrap {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 3px 6px 3px 8px;
  width: calc(100% - 20px);
  height: calc(100% - 22px);
}

.illustrationSiteLayout__scrollBox {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.illustrationSiteLayout__codeList {
  position: absolute;
  width: 100%;
  list-style: none;
  animation: scrollCode .9s linear infinite;
}
.illustrationSiteLayout__codeItem {
  position: relative;
  margin-bottom: 2px;
  width: 100%;
  height: 18px;
}
.illustrationSiteLayout__codeLine {
  position: absolute;
  height: 2px;
  background-color: $palette-site-layout;
  overflow: hidden;

  @mixin siteLayoutLineChild($nthChild, $top, $left, $width) {
    &:nth-child(#{$nthChild}) {
      top: #{$top}px;
      left: #{$left};
      width: #{$width};
    }
  }

  @include siteLayoutLineChild(1, 0, 0, 90%);
  @include siteLayoutLineChild(2, 4, 0, 70%);
  @include siteLayoutLineChild(3, 8, 0, 50%);
  @include siteLayoutLineChild(4, 12, 0, 20%);
  @include siteLayoutLineChild(5, 12, 30%, 60%);
  @include siteLayoutLineChild(6, 16, 0, 50%);
  @include siteLayoutLineChild(7, 16, 60%, 15%);
}

/*____________________________________________________________
#### Illustration Dialog
____________________________________________________________*/
.illustrationDialog {
  position: absolute;
  top: 90px;
  right: 170px;
  padding: 8px 14px;
  width: 78px;
  height: 45px;
  background-color: $palette-dialog;
  animation: levitation 5s linear infinite .8s;

  &:before {
    content: '';
    position: absolute;
    left: 10px;
    bottom: -10px;
    width: 0; 
    height: 0;
    border-top: 10px solid $palette-dialog;
    border-right: 10px solid transparent;
  }
}
.illustrationDialog__line {
  position: relative;
  margin-bottom: 3px;
  width: 100%;
  height: 3px;
  overflow: hidden;

  &:nth-child(2) {
    width: 70%;
  }
  &:nth-child(4) {
    width: 60%;
  }
  &:nth-child(5) {
    width: 90%;
  }
  &:last-child {
    margin-bottom: 0;
  }

  &:after {
    content: '';
    position: absolute;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: $x-color-white;
    animation: slide 3.5s ease infinite;
  }

  @include animDelayChild(2, .1);
  @include animDelayChild(3, .2);
  @include animDelayChild(4, .3);
  @include animDelayChild(5, .35);
}

/*____________________________________________________________
#### Illustration Folder
____________________________________________________________*/
.illustrationFolder {
  position: absolute;
  top: 350px;
  left: 50px;
  width: 47px;
  height: 31px;
  border-radius: 1px 0 1px 1px;
  background-color: $palette-folder-shadow;
  animation: levitation 5s linear infinite 1.4s;

  &:before {
    content: '';
    position: absolute;
    top: -4px;
    right: 0;
    width: 10px;
    height: 4px;
    border-radius: 1px 1px 0 0;
    background-color: $palette-folder-shadow;
  }
  &:after {
    content: '';
    position: absolute;
    left: -5px;
    bottom: 0;
    width: 47px;
    height: 31px;
    border-radius: 1px;
    background-color: $palette-tertiary;
    animation: openFolder 3.5s ease infinite;
  }
}

.illustrationFolder__file {
  position: absolute;
  left: 4px;
  bottom: 0;
  padding: 4px 2px;
  width: 29px;
  height: 35px;
  border-radius: 1px;
  background-color: $x-color-white;
  animation: openFile 3.5s ease infinite;
}
.illustrationFolder__line {
  position: relative;
  margin-bottom: 2px;
  width: 100%;
  height: 1px;
  overflow: hidden;

  &:after {
    content: '';
    position: absolute;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: $x-color-granite;
    animation: slide 3.5s ease infinite;
  }

  @include animDelayChild(2, .1);
  @include animDelayChild(3, .2);
  @include animDelayChild(4, .3);
  @include animDelayChild(5, .4);
}

/*____________________________________________________________
#### Illustration Books
____________________________________________________________*/
.illustrationBooks {
  position: absolute;
  left: 70px;
  bottom: 0;
  width: 164px;
  height: 86px;
}
.illustrationBooks__book {
  position: absolute;

  &:nth-child(1) {
    left: 5px;
    width: 132px;
    height: 28px;
    border: solid $x-color-tomato;
    border-width: 4px 0 4px 4px;
    border-radius: 20px 0 0 20px;
    background: repeating-linear-gradient(0deg, $x-color-white, $x-color-white 4px, #e6e6e6 4px, #e6e6e6 5px);
  }
  &:nth-child(2) {
    top: 28px;
    right: 0;
    width: 146px;
    height: 31px;
    border: solid $palette-tertiary;
    border-width: 4px 4px 4px 0;
    border-radius: 0 20px 20px 0;
    background: repeating-linear-gradient(0deg, $x-color-white, $x-color-white 4px, #e6e6e6 4px, #e6e6e6 5px);
  }
  &:nth-child(3) {
    bottom: 0;
    width: 132px;
    height: 27px;
    background-color: $x-color-tomato;
  }
}

.illustrationBooks__binding {
  position: absolute;
  width: 6px;
  height: 100%;
  background-color: $x-color-coral-red;

  &:nth-child(1) {
    left: 10px;
  }
  &:nth-child(2) {
    left: 20px;
  }
  &:nth-child(3) {
    right: 20px;
  }
  &:nth-child(4) {
    right: 10px;
  }
}

/*____________________________________________________________
#### Illustration Analytics
____________________________________________________________*/
.illustrationAnalytics {
  position: absolute;
  bottom: 25px;
  right: 10px;
  width: 215px;
  height: 180px;
  border-radius: 2px;
  background-color: $x-color-white;
  overflow: hidden;
  animation: levitation 5s linear infinite;
}

.illustrationAnalyticsPanel {
  position: relative;
  width: 100%;
  height: 20px;
  background-color: $palette-program-panel;
}
.illustrationAnalyticsPanel__buttonsWrap {
  position: absolute;
  top: 6px;
  left: 10px;
  height: 8px;
}
.illustrationAnalyticsPanel__button {
  float: left;
  margin-right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/*____________________________________________________________
##### Illustration Analytics Page
____________________________________________________________*/
.illustrationAnalyticsPage {
  padding: 8px;
  width: 100%;
  height: calc(100% - 20px);
}
.illustrationAnalyticsPage__container {
  width: 100%;
  height: 100%;
}

/*____________________________________________________________
###### Illustration Analytics Diagram
____________________________________________________________*/
.illustrationAnalyticsPage__diagramWrap  {
  float: left;
  padding-top: 20%;
  margin-right: 10px;
  width: 90px;
  height: 100%;
  list-style: none;
}
.illustrationAnalyticsPage__diagram {
  position: relative;
  float: left;
  margin-right: 10px;
  width: 15px;
  height: 100%;
  border-radius: 1px;
  overflow: hidden;

  &:last-child {
    margin-right: 0;
  }

  &:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 10%;
    background-color: $palette-analytics-elements;
    animation: lineDiagram 2.8s ease infinite;
  }

  @include animDelayChild(2, .6);
  @include animDelayChild(3, .3);
  @include animDelayChild(4, .9);
}

/*____________________________________________________________
###### Illustration Analytics Banner
____________________________________________________________*/
.illustrationAnalyticsPage__banner {
  float: left;
  width: calc(100% - 100px);
  height: 100%;
}

/*____________________________________________________________
####### Illustration Analytics Description
____________________________________________________________*/
.illustrationAnalyticsPage__lineWrap {
  margin-bottom: 17px;
  width: 100%;
  height: 87px;
  list-style: none;
}
.illustrationAnalyticsPage__line {
  position: relative;
  margin-bottom: 5px;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  overflow: hidden;

  &:first-child {
    width: 60%;
    height: 6px;
    margin-bottom: 8px;
  }
  &:nth-child(5),
  &:nth-child(6),
  &:nth-child(7) {
    width: 70%;
  }
  &:last-child {
    height: 27px;
    margin-bottom: 0;
    border-radius: 1px;
    background-color: $palette-window-line;
  }

  &:after {
    content: '';
    position: absolute;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: $palette-window-line;
    animation: slide 3.5s ease infinite;
  }

  @include animDelayChild(1, .1);
  @include animDelayChild(2, .2);
  @include animDelayChild(3, .3);
  @include animDelayChild(4, .35);
  @include animDelayChild(5, .4);
  @include animDelayChild(6, .45);
  @include animDelayChild(7, .5);

  &:last-child {
    &:after {
      animation: none;
    }
  }
}

/*____________________________________________________________
####### Illustration Analytics Product List
____________________________________________________________*/
.illustrationAnalyticsPage__productList {
  width: 100%;
  height: calc(100% - 104px);
  list-style: none;
}

.illustrationAnalyticsPage__productItem {
  float: left;
  margin-bottom: 10px;
  margin-right: 5px;
  width: 47px;
  height: 15px;

  &:nth-child(2n)  {
    margin-right: 0;
  }

  &:nth-child(3),
  &:nth-child(4) {
    .illustrationAnalyticsPage__productImg {
      background-color: $palette-analytics-elements;
    }
  }
}

.illustrationAnalyticsPage__productImg {
  float: left;
  margin-right: 5px;
  width: 15px;
  height: 15px;
  border-radius: 1px;
  background-color: $palette-window-line;
}

.illustrationAnalyticsPage__productLineWrap {
  float: left;
  width: calc(100% - 20px);
  height: 15px;
  list-style: none;
}
.illustrationAnalyticsPage__productLine {
  position: relative;
  margin-bottom: 3px;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  overflow: hidden;

  &:nth-child(2),
  &:last-child {
    width: 70%;
  }
  &:last-child {
    margin-bottom: 0;
  }

  &:after {
    content: '';
    position: absolute;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: $palette-window-line;
    animation: slide 3.5s ease infinite;
  }

  @include animDelayChild(1, .1);
  @include animDelayChild(2, .2);
  @include animDelayChild(3, .3);
}

/*____________________________________________________________
#### Illustration Imac
____________________________________________________________*/
.illustrationImac {
  @extend %horizontalCentering;
  bottom: 147px;
  width: 482px;
  height: 266px;
}

/*____________________________________________________________
##### Illustration Imac Display
____________________________________________________________*/
.illustrationImac__display {
  position: relative;
  width: 100%;
  height: 100%;
  border: 9px solid $x-color-granite;
  border-radius: 10px 10px 0 0;
  background: repeating-linear-gradient(90deg, $palette-tertiary, $palette-tertiary 24px, $palette-imac-display-gradient 24px, $palette-imac-display-gradient 34px);
}

/*____________________________________________________________
###### Illustration Imac Editor
____________________________________________________________*/
.illustrationImacEditor {
  position: absolute;
  bottom: 9px;
  left: 30px;
  width: 180px;
  height: 116px;
  background-color: $x-color-white;
}

.illustrationImacEditorPanel {
  width: 100%;
  height: 10px;
  background-color: $palette-program-panel;
}

/*____________________________________________________________
####### Illustration Imac Editor Code
____________________________________________________________*/
.illustrationImacEditorCodeWrap {
  position: relative;
  padding: 6px;
  width: 100%;
  height: calc(100% - 10px);
  background-color: $x-color-graphite-grey;
}
.illustrationImacEditorCodeWrap__scrollBox {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

@mixin editorCodeLineChild($nthChild, $top, $side, $sideInent, $width, $bg) {
  &:nth-child(#{$nthChild}) {
    top: #{$top}px;
    #{$side}: #{$sideInent}px;
    width: #{$width}px;
    background-color: #{$bg};
  }
}
.illustrationImacEditorCodeWrap__codeList {
  position: absolute;
  width: 50%;
  list-style: none;
  animation: scrollCode .9s linear infinite;

  &:first-child {
    border-right: 1px solid $x-color-wet-asphalt;

    .illustrationImacEditorCodeWrap__codeLine {
      @include editorCodeLineChild(1, 0, left, 0, 20, $x-color-tomato);
      @include editorCodeLineChild(2, 0, left, 24, 45, $x-color-tomato);
      @include editorCodeLineChild(3, 4, left, 10, 21, $x-color-white);
      @include editorCodeLineChild(4, 4, left, 35, 25, $x-color-white);
      @include editorCodeLineChild(5, 8, left, 0, 22, #78dbe2);
      @include editorCodeLineChild(6, 8, left, 26, 14, #78dbe2);
      @include editorCodeLineChild(7, 12, right, 40, 22, #ADFF2F);
      @include editorCodeLineChild(8, 12, right, 16, 20, #ADFF2F);
      @include editorCodeLineChild(9, 16, right, 18, 30, $x-color-white);
      @include editorCodeLineChild(10, 16, right, 6, 8, $x-color-white);
    }
  }
  &:last-child {
    right: 0;
    animation-duration: 1.3s;

    .illustrationImacEditorCodeWrap__codeLine {
      @include editorCodeLineChild(1, 0, left, 6, 36, $x-color-white);
      @include editorCodeLineChild(2, 0, left, 46, 20, #ff4765);
      @include editorCodeLineChild(3, 4, left, 12, 30, #29b87d);
      @include editorCodeLineChild(4, 4, left, 46, 18, #ff4765);
      @include editorCodeLineChild(5, 8, left, 18, 24, transparent);
      @include editorCodeLineChild(6, 8, left, 46, 16, #ff4765);
      @include editorCodeLineChild(7, 12, right, 35, 15, #feb021);
      @include editorCodeLineChild(8, 12, right, 6, 25, #feb021);
      @include editorCodeLineChild(9, 16, right, 10, 30, #78dbe2);
      @include editorCodeLineChild(10, 16, right, 0, 6, #78dbe2);
    }
  }
}

.illustrationImacEditorCodeWrap__codeItem {
  position: relative;
  margin-bottom: 2px;
  width: 100%;
  height: 18px;
}
.illustrationImacEditorCodeWrap__codeLine {
  position: absolute;
  height: 2px;
  background-color: $x-color-tomato;
  overflow: hidden;
}

/*____________________________________________________________
###### Illustration Imac Browser
____________________________________________________________*/
.illustrationImacBrowser {
  position: absolute;
  top: 12px;
  left: 16px;
  width: 180px;
  height: 116px;
  background-color: $x-color-white;
}

/*____________________________________________________________
####### Illustration Imac Browser Panel
____________________________________________________________*/
.illustrationImacBrowserPanel {
  width: 100%;
  height: 10px;
  background-color: $palette-program-panel;
}
.illustrationImacBrowserPanel__buttonsWrap {
  position: absolute;
  top: 3px;
  left: 6px;
  height: 4px;
}
.illustrationImacBrowserPanel__button {
  float: left;
  margin-right: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
}

/*____________________________________________________________
####### Illustration Imac Browser Page
____________________________________________________________*/
.illustrationImacBrowserPage {
  width: 100%;
  height: calc(100% - 10px);
}
.illustrationImacBrowserPage__container {
  width: 100%;
  height: 100%;
}

/*____________________________________________________________
######## Illustration Imac Browser Header
____________________________________________________________*/
.illustrationImacBrowserPage__header {
  position: relative;
  padding-top: 9px;
  width: 100%;
  height: 27px;
}

.illustrationImacBrowserPage__nav {
  position: relative;
  padding-top: 4px;
  margin: 0 auto;
  width: 100px;
  height: 10px;
  background-color: $palette-imac-browser-elements;
}
.illustrationImacBrowserPage__navItem {
  position: relative;
  float: left;
  margin-left: 10px;
  width: 15px;
  height: 2px;
  overflow: hidden;

  &:first-child {
    margin-left: calc(10px / 2);
  }

  &:after {
    content: '';
    position: absolute;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: $palette-imac-browser-line;
    animation: slide 3.5s ease infinite;
  }

  &:nth-child(2) {
    &:after {
      animation-delay: .1s;
    }
  }
  &:nth-child(3) {
    &:after {
      animation-delay: .2s;
    }
  }
  &:nth-child(4) {
    &:after {
      animation-delay: .3s;
    }
  }
}

/*____________________________________________________________
######## Illustration Imac Browser Main
____________________________________________________________*/
.illustrationImacBrowserPage__main {
  position: relative;
  padding: 8px;
  width: 100%;
  height: 37px;
  background-color: $x-color-tomato;
}

.illustrationImacBrowserPage__banner {
  width: 100%;
  height: 100%;
}
.illustrationImacBrowserPage__img {
  position: relative;
  float: left;
  margin-right: 10px;
  width: 44px;
  height: 22px;
  overflow: hidden;

  &:after {
    content: '';
    position: absolute;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: $x-color-white;
    animation: slide 3.5s ease infinite;
  }
}

.illustrationImacBrowserPage__lineWrap {
  float: left;
  width: calc(100% - 54px);
  height: 20px;
}
.illustrationImacBrowserPage__line {
  position: relative;
  margin-bottom: 3px;
  width: 100%;
  height: 2px;
  overflow: hidden;

  &:last-child {
    width: calc(100% / 2);
  }

  &:after {
    content: '';
    position: absolute;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: $palette-imac-browser-line;
    animation: slide 3.5s ease infinite;
  }

  &:nth-child(1) {
    &:after {
      animation-delay: .1s;
    }
  }
  &:nth-child(2) {
    &:after {
      animation-delay: .2s;
    }
  }
  &:nth-child(3) {
    &:after {
      animation-delay: .3s;
    }
  }
  &:nth-child(4) {
    &:after {
      animation-delay: .35s;
    }
  }
}

/*____________________________________________________________
######## Illustration Imac Browser Footer
____________________________________________________________*/
.illustrationImacBrowserPage__footer {
  position: relative;
  padding: 7px 8px;
  width: 100%;
  height: 42px;
}

.illustrationImacBrowserPage__productList {
  list-style: none;
  width: 100%;
  height: 100%;
}

.illustrationImacBrowserPage__productItem {
  position: relative;
  float: left;
  margin-right: 16px;
  width: 44px;
  height: 100%;

  &:last-child {
    margin-right: 0;
  }
}

.illustrationImacBrowserPage__productImg {
  position: relative;
  margin-bottom: 2px;
  width: 100%;
  height: 22px;
  overflow: hidden;

  &:after {
    content: '';
    position: absolute;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: $palette-imac-browser-elements;
    animation: slide 3.5s ease infinite;
  }
}

.illustrationImacBrowserPage__productLineWrap {
  width: 100%;
  height: 6px;
}
.illustrationImacBrowserPage__productLine {
  position: relative;
  float: left;
  margin-bottom: 2px;
  width: 100%;
  height: 2px;
  overflow: hidden;

  &:after {
    content: '';
    position: absolute;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: $palette-imac-browser-line;
    animation: slide 3.5s ease infinite;
  }

  &:nth-child(1) {
    &:after {
      animation-delay: .1s;
    }
  }
  &:nth-child(2) {
    &:after {
      animation-delay: .2s;
    }
  }
}

/*____________________________________________________________
###### Avatar
____________________________________________________________*/
.avatarWrap {
  position: absolute;
  bottom: 0;
  right: 30px;
  width: 250px;
  height: 356px;
}

/*____________________________________________________________
####### Head
____________________________________________________________*/
.headWrap {
  position: relative;
  width: 100%;
  height: 249px;
}

/*____________________________________________________________
######## Hair
____________________________________________________________*/
.hair {
  @extend %horizontalCentering;
  width: 140px;
  height: 44px;
}
.hair__leftSide {
  position: absolute;
  width: 120px;
  height: 44px;
  border-radius: 60px 0 30px 0;
  background-color: $x-color-black;
  z-index: 9;

  .blink {
    position: absolute;
    height: 5.5px;
    border-radius: 5px;
    background-color: $palette-hair-blink;

    &:nth-child(1) {
      top: 29px;
      left: 25px;
      width: 26px;
    }
    &:nth-child(2) {
      top: 12px;
      left: 40px;
      width: 63px;
    }
    &:nth-child(3) {
      top: 26px;
      right: 10px;
      width: 26px;
    }
  }

  &:after {
    content: '';
    position: absolute;
    bottom: -40px;
    width: 40px;
    height: 40px;
    background-color: $x-color-black;
  }
}

.hair__rightSide {
  overflow: hidden;
  content: '';
  position: absolute;
  top: 25px;
  right: 0;
  width: 40px;
  height: 55px;
  background-color: $x-color-black;

  &:after {
    content: '';
    position: absolute;
    top: -16px;
    left: -16px;
    width: 50px;
    height: 40px;
    border-radius: 0 0 30px 0;
    background-color: $palette-hair-shadow;
  }
}

/*____________________________________________________________
######## Ears
____________________________________________________________*/
.ears {
  @extend %horizontalCentering;
  top: 115px;
  width: 186px;
  height: 40px;
}
.ear {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: $palette-skin;

  &:nth-child(2) {
    right: 0;
  }

  &:after {
    content: '';
    @extend %centering;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #180812;
  }
}

/*____________________________________________________________
######## Face
____________________________________________________________*/
.face {
  @extend %horizontalCentering;
  top: 44px;
  width: 140px;
  height: 181px;
  border-radius: 60px 60px 100px 100px; 
  background-color: $palette-skin;
  z-index: 2;
}

/*____________________________________________________________
######### Top Face
____________________________________________________________*/
.eyebrows {
  @extend %horizontalCentering;
  top: 29px;
  width: 90px;
  height: 10px;
}
.eyebrows__brow {
  overflow: hidden;
  position: absolute;
  width: 30px;
  height: 10px;
  border-radius: 10px;
  background-color: $x-color-black;
  z-index: 9;

  &:nth-child(2) {
    right: 0;
  }

  &:before {
    content: '';
    position: absolute;
    top: -4px;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-color: $palette-hair-shadow;
  }
  &:after {
    content: '';
    @extend %horizontalCentering;
    top: 2px;
    width: 12px;
    height: 2px;
    border-radius: 15px;
    background-color: $x-color-white;
    opacity: .2;
  }
}

.eyebrows__shadow {
  position: absolute;
  top: 4px;
  width: 100%;
  height: 100%;

  &:before,
  &:after {
    content: '';
    position: absolute;
    width: 30px;
    height: 10px;
    border-radius: 10px;
    background-color: $palette-skin-shadow;
  }
  &:after {
    right: 0;
  }
}

/*____________________________________________________________
######### Middle Face
____________________________________________________________*/
.eyes {
  @extend %horizontalCentering;
  bottom: 100px;
  width: 70px;
  height: 22px;

  &:before,
  &:after {
    content: '';
    position: absolute;
    width: 12px;
    height: 22px;
    border-radius: 6px;
    background-color: $x-color-black;
    animation: blink 3s ease-in-out infinite;
  }
  &:after {
    right: 0;
  }
}

.glasses {
  @extend %horizontalCentering;
  top: 70px;
  width: 4px;
  height: 4px;
  background-color: $x-color-black;

  .left,
  .right {
    position: absolute;
    width: 56px;
    height: 56px;
    background-color: transparent;
    border-radius: 100%;
    border: 5px solid $x-color-black;
    left: -56px;
    top: -26px;
    z-index: 2;

    &:before {
      content: '';
      @extend %verticalCentering;
      width: 20px;
      height: 4px;
      border-radius: 5px;
      background-color: $x-color-black;
    }
    &:after {
      content: '';
      @extend %verticalCentering;
      width: 8px;
      height: 2px;
      border-radius: 15px;
      background-color: $x-color-white;
      opacity: .4;
    }
  }
  .left {

    &:before {
      left: -20px;
    }
    &:after {
      left: -17px;
    }
  }
  .right {
    left: 4px;

    &:before {
      right: -20px;
    }
    &:after {
      right: -17px;
    }
  }
}


.lens {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;

  .shine {

    &:before,
    &:after {
      content: "";
      position: absolute;
      top: -21px;
      left: 5px;
      width: 20px;
      height: 100px;
      background-color: $x-color-white;
      transform: rotate(30deg);
      opacity: 0.3;
    }
    &:after {
      width: 5px;
      left: 30px;
    }
  }
}

/*____________________________________________________________
######### Bottom Face
____________________________________________________________*/
.nose {
  @extend %horizontalCentering;
  bottom: 72px;
  width: 30px;
  height: 8px;

  &:before,
  &:after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: $x-color-flea-belly;
  }
  &:after {
    right: 0;
  }
}

.arm {
  overflow: hidden;
  @extend %horizontalCentering;
  bottom: 28px;
  width: calc(81px - 10px);
  height: calc(30px - 0px);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background-color: $x-color-pearl-ruby;
}
.arm__pharynx {
  @extend %horizontalCentering;
  top: 6px;
  width: calc(57px - 10px);
  height: calc(11px - 0px);
  border-radius: 20px;
  background-color: $x-color-deep-red-brown;
}
.arm__tooth {
  position: absolute;
  left: 6px;
  width: calc(69px - 10px);
  height: calc(9px - 0px);
  background-color: $x-color-white;
  border-radius: 0 0 5px 5px;
  z-index: 1;

  &:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 4px;
    background-color: $x-color-periwinkle;
  }
}
.arm__tongue {
  position: absolute;
  bottom: 0;
  right: 3px;
  width: calc(58px - 10px);
  height: calc(16px - 0px);
  border-radius: 15px 0 0 0;
  background-color: $x-color-light-cherry;

  &:before {
    content: '';
    position: absolute;
    top: 4px;
    left: 12px;
    width: 22px;
    height: 3px;
    border-radius: 15px;
    background-color: $x-color-white;
    opacity: .2;
  }
}

/*____________________________________________________________
######## Neck
____________________________________________________________*/
.neck {
  overflow: hidden;
  @extend %horizontalCentering;
  bottom: 0;
  width: 58px;
  height: 31px;
  background-color: $palette-skin;

  &:after {
    content: '';
    position: absolute;
    width: 58px;
    height: 18px;
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    background-color: $palette-skin-shadow;
  }
}

/*____________________________________________________________
####### Body
____________________________________________________________*/
.bodyWrap {
  position: relative;
  width: 100%;
  height: 107px;
}
.bodyWrap__body  {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background-color: $x-color-grey-silk;
  background-image: linear-gradient(90deg, transparent 20%, rgba(166, 152, 134,.5) 20%);
  background-size: 20px 20px;
  overflow: hidden;
}

.collar {
  @extend %horizontalCentering;
  top: -50px;
  width: 120px;
  height: 170px;
  border-radius: 100%;
  background-color: $palette-costume-elements;
}

.shirt {
  @extend %horizontalCentering;
  top: 50px;
  width: 0; 
  height: 0;
  border-left: 35px solid transparent;
  border-right: 35px solid transparent;
  border-top: 200px solid $x-color-lemon-cream;
}

.button {
  @extend %horizontalCentering;
  top: 82px;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  background-color: $palette-costume-elements;

  &:nth-child(2) {
    top: 102px;
  }
}

/*____________________________________________________________
######## Bow
____________________________________________________________*/
.bowWrap {
  position: absolute;
  top: -17px;
  left: 85px;
  width: 80px;
  height: 46px;
}
.bowWrap__bowShadow {
  &:before {
    content: "";
    position: absolute;
    top: 5px;
    width: 0;
    height: 5px;
    border-width: 23px 40px;
    border-style: solid;
    border-color: transparent #bce1be transparent #bce1be;
    border-radius: 25px;
    opacity: .8;
    z-index: 1;
  }
}
.bowWrap__bowShadow {
  &:after {
    content: "";
    position: absolute;
    top: 16px;
    left: 31.5px;
    width: 17px;
    height: 19px;
    border-radius: 2px;
    background-color: #bce1be;
    opacity: .8;
    z-index: 2;
  }
}
.bowWrap__bow {
  &:before {
    content: "";
    position: absolute;
    width: 0;
    height: 5px;
    border-width: 23px 40px;
    border-style: solid;
    border-color: transparent #9b2d30 transparent #9b2d30;
    border-radius: 25px;
    z-index: 1;
  }
}
.bowWrap__bow {
  &:after {
    content: "";
    position: absolute;
    top: 16px;
    left: 31.5px;
    width: 17px;
    height: 19px;
    border-radius: 2px;
    background-color: $palette-bow-elements;
    z-index: 2;
  }
}
.bowWrap__crease {
  position: absolute;
  top: 21px;
  left: 17.5px;
  width: 45px;
  height: 4px;
  border-radius: 2px;
  background-color: $palette-bow-elements;
  z-index: 1;
}

@keyframes blink {
  0% {
    transform: scaleY(1);
  }
  18% {
    transform: scaleY(1);
  }
  20% {
    transform: scaleY(0);
  }
  25% {
    transform: scaleY(1);
  }
  38% {
    transform: scaleY(1);
  }
  40% {
    transform: scaleY(0);
  }
  45% {
    transform: scaleY(1);
  }
  80% {
    transform: scaleY(1);
  }
}

/*____________________________________________________________
##### Illustration Imac Panel
____________________________________________________________*/
.illustrationImac__panel {
  position: absolute;
  bottom: -45px;
  width: 100%;
  height: 45px;
  border-radius: 0 0 10px 10px;
  background-color: $x-color-grideperlevy;
}
.illustrationImac__panelButton {
  @extend %centering;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: $x-color-manatee;
}

/*____________________________________________________________
##### Illustration Imac Stand
____________________________________________________________*/
.illustrationImac__stand {
  @extend %horizontalCentering;
  bottom: -127px;
  width: 154px;
  height: 0; 
  border-bottom: 82px solid $x-color-cadet-blue;
  border-left: 21px solid transparent;
  border-right: 21px solid transparent;
}
.illustrationImac__standShadow {
  position: absolute;
  top: 5px;
  left: -5px;
  height: 0; 
  width: 122px;
  border-bottom: 16px solid $x-color-manatee;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.illustrationImac__standBase {
  @extend %horizontalCentering;
  top: 82px;
  width: 284px;
  height: 20px;
  border-radius: 15px;
  background-color: $x-color-niagara;
}

/*____________________________________________________________
#### Illustration Presentation  
____________________________________________________________*/
.illustrationPresentation {
  position: absolute;
  top: 25px;
  left: 20px;
  width: 215px;
  height: 179px;
  background-color: $x-color-snow-blue;
  border-radius: 2px;
  overflow: hidden;
  animation: levitation 5s linear infinite;
}

/*____________________________________________________________
##### Illustration Presentation Panel
____________________________________________________________*/
.illustrationPresentationPanel {
  position: relative;
  width: 100%;
  height: 20px;
  background-color: $palette-program-panel;
}
.illustrationPresentationPanel__buttonsWrap {
  position: absolute;
  top: 6px;
  left: 10px;
  height: 8px;
}
.illustrationPresentationPanel__button {
  float: left;
  margin-right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/*____________________________________________________________
##### Illustration Presentation Page
____________________________________________________________*/
.illustrationPresentationPage {
  padding: 8px;
  width: 100%;
  height: calc(100% - 20px);
}
.illustrationPresentationPage__container {
  width: 100%;
  height: 100%;
}

/*____________________________________________________________
###### Illustration Presentation Banner
____________________________________________________________*/
.illustrationPresentationPage__banner {
  position: relative;
  width: 100%;
  height: 72px;
  margin-bottom: 6px;
}

.illustrationPresentationPage__img {
  position: relative;
  float: right;
  margin-left: 10px;
  width: 93px;
  height: 72px;
  background-color: $x-color-white;
  overflow: hidden;
}

/*____________________________________________________________
####### Picture
____________________________________________________________*/
.picture {
  position: absolute;
  width: 93px;
  height: 72px;
  border: 6px solid $x-color-gainsborough;
  background-color: $x-color-moderate-turquoise;
  overflow: hidden;
  animation: changeDay 10s linear infinite;
}
.illustrationImac__display {
  .picture {
    top: 50px;
    right: 10px;
    animation-delay: 3s;
  }

  .picture__dayWrap {
    animation-delay: 3s;
  }
}

.picture__mountain {
  position: absolute;
  bottom: 0;

  @mixin pictureMountainChild($nthChild, $side, $sideInent, $borderWidth, $borderHeight, $bg) {
    &:nth-child(#{$nthChild}) {
      #{$side}: #{$sideInent}px;
      border-left: #{$borderWidth}px solid transparent;
      border-right: #{$borderWidth}px solid transparent;
      border-bottom: #{$borderHeight}px solid #{$bg};
    }
  }

  @include pictureMountainChild(1, left, 0, 22.5, 24, $x-color-blackish-blue);
  @include pictureMountainChild(2, right, -20, 36, 39, $x-color-dark-grey-blue);
  @include pictureMountainChild(3, left, 26, 10, 10, $x-color-slate-grey);
}

.picture__dayWrap {
  position: absolute;
  top: 15px;
  left: 8px;
  width: 70px;
  height: 70px;
  animation: rotateRays 10s linear infinite;
}

.picture__dayWrap,
.picture__sun,
.picture__moon {
  border-radius: 50%;
}

.picture__sun,
.picture__moon {
  @extend %horizontalCentering;
}
.picture__sun {
  top: -5px;
  width: 15px;
  height: 15px;
  background-color: $x-color-white;
}
.picture__moon {
  bottom: -4px;
  width: 17px;
  height: 17px;
  box-shadow: 4px 4px 0 0 $x-color-amber;
  transform: rotate(120deg);
}


.illustrationPresentationPage__lineWrap {
  float: right;
  width: calc(100% - 103px);
  height: 20px;
}
.illustrationPresentationPage__line {
  position: relative;
  margin-bottom: 6px;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;

  &:last-child {
    margin-bottom: 0;
    width: 80%;
  }

  &:after {
    content: '';
    position: absolute;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: $palette-window-line;
    animation: slide 3.5s ease infinite;
  }

  @include animDelayChild(1, .1);
  @include animDelayChild(2, .2);
  @include animDelayChild(3, .3);
  @include animDelayChild(4, .35);
  @include animDelayChild(5, .4);
  @include animDelayChild(6, .45);
}

/*____________________________________________________________
###### Illustration Presentation Form
____________________________________________________________*/
.illustrationPresentationPage__form {
  position: relative;
  width: 100%;
  height: calc(100% - 78px);
}
.illustrationPresentationPage__input {
  margin-bottom: 6px;
  width: 100%;
  height: 16px;
  border-radius: 3px;
  background-color: $x-color-white;

  &:last-child {
    height: calc(100% - 22px);
  }
}

/*____________________________________________________________
#### Illustration Settings
____________________________________________________________*/
.illustrationSettings {
  position: absolute;
  bottom: 115px;
  left: 5px;
  padding: 8px 14px;
  width: 206px;
  height: 56px;
  border-radius: 5px;
  background-color: $palette-settings-elements;
  animation: levitation 5s linear infinite 3s;
}
.illustrationSettings__container {
  position: relative;
  width: 100%;
  height: 100%;
}

/*____________________________________________________________
##### Illustration Settings Gear
____________________________________________________________*/
.illustrationSettings__gearWrap {
  position: relative;
  float: left;
  margin-right: 12px;
  width: 40px;
  height: 40px;
}

.illustrationSettings__gear {
  @extend %centering;
  width:  50px;
  height: 50px;
}
.illustrationSettings__gear svg {
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  fill: none;
  stroke: $x-color-white;
  stroke-width: 35px;
  animation: rotateRays 7s linear infinite;
}
.illustrationSettings__gear .teeth {
  position: absolute;
  top: 19.32%;
  left: 19.32%;
  transform: translate(-19.32%, -19.32%);
}

.illustrationSettings__gearCircle {
  @extend %centering;
  width: 29px;
  height: 29px;
  border: 8px solid $x-color-white;
  background-color: $palette-settings-elements;
  border-radius: 50%;
}

/*____________________________________________________________
##### Illustration Settings Line
____________________________________________________________*/
.illustrationSettings__lineWrap {
  position: relative;
  float: left;
  padding-top: 6.5px;
  width: calc(100% - 52px);
  height: 40px;
}
.illustrationSettings__line {
  position: relative;
  width: 100%;
  height: 3px;
  margin-bottom: 5px;
  overflow: hidden;

  &:last-child {
    margin-bottom: 0;
    width: 60%;
  }
  &:after {
    content: '';
    position: absolute;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: $x-color-white;
    animation: slide 3.5s ease infinite;
  }

  @include animDelayChild(1, .1);
  @include animDelayChild(2, .2);
  @include animDelayChild(3, .3);
  @include animDelayChild(4, .35);
}

/*____________________________________________________________
# Animation Pack
____________________________________________________________*/
@keyframes openFolder {
  0% {
    left: 0;
    transform: skew(0);
  }
  20% {
    left: -5px;
    height: 26px;
    transform: skew(20deg);
  }
  80% {
    left: -5px;
    height: 26px;
    transform: skew(20deg);
  }
  100% {
    left: 0;
    height: 31px;
    transform: skew(0);
  }
}

@keyframes openFile {
  0% {
    bottom: 0;
  }
  20% {
    bottom: 10px;
  }
  80% {
    bottom: 10px;
  }
  100% {
    bottom: 0;
  }
}

@keyframes slide {
  0% {
    left: -100%;
  }
  22% {
    left: 0%;
  }
  78% {
    left: 0%;
  }
  100% {
    left: 100%;
  }
}

@keyframes scrollCode {
  0% {
    top: 0;
  }
  100% {
    top: -20px;
  }
}

@keyframes rotateRays {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes changeDay {
  0% {
    background-color: $palette-tertiary;
  }
  25% {
    background-color: $x-color-granite;
  }
  60% {
    background-color: $x-color-granite;
  }
  75% {
    background-color: $palette-tertiary;
  }
  100% {
    background-color: $palette-tertiary;
  }
}

@keyframes lineDiagram {
  0% {
    height: 10%;
  }
  50% {
    height: 100%;
  }
  100% {
    left: 10%;
  }
}

@keyframes levitation {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
  100% {
    transform: translateY(0);
  }
}

@media screen and (max-width: 1200px) {
  .illustration {
    transform: translate(-50%, -50%) scale(.8);
  }
}
@media screen and (max-width: 800px) {
  .illustration {
    transform: translate(-50%, -50%) scale(.6);
  }
}
@media screen and (max-width: 590px) {
  .illustration {
    transform: translate(-50%, -50%) scale(.4);
  }
}

/*____________________________________________________________
# Use 'GSAP.js' library and JS only for 'Blob' effect
____________________________________________________________*/

function cardinal(data, closed, tension) {
  if (data.length < 1) return "M0 0";
  if (tension == null) tension = 1;

  var size = data.length - (closed ? 0 : 1);
  var path = "M" + data[0].x + " " + data[0].y + " C";

  for (var i = 0; i < size; i++) {
    var p0, p1, p2, p3;

    if (closed) {
      p0 = data[(i - 1 + size) % size];
      p1 = data[i];
      p2 = data[(i + 1) % size];
      p3 = data[(i + 2) % size];
    } else {
      p0 = i == 0 ? data[0] : data[i - 1];
      p1 = data[i];
      p2 = data[i + 1];
      p3 = i == size - 1 ? p2 : data[i + 2];
    }

    var x1 = p1.x + (p2.x - p0.x) / 6 * tension;
    var y1 = p1.y + (p2.y - p0.y) / 6 * tension;

    var x2 = p2.x - (p3.x - p1.x) / 6 * tension;
    var y2 = p2.y - (p3.y - p1.y) / 6 * tension;

    path += " " + x1 + " " + y1 + " " + x2 + " " + y2 + " " + p2.x + " " + p2.y;
  }

  return closed ? path + "z" : path;
}

function random(min, max) {
  if (max == null) { max = min; min = 0; }
  if (min > max) { var tmp = min; min = max; max = tmp; }
  return min + (max - min) * Math.random();
}

function createBlob(options) {
  var points = [];
  var path = options.element;
  var slice = (Math.PI * 2) / options.numPoints;
  var startAngle = random(Math.PI * 2);

  var tl = new TimelineMax({
    onUpdate: update
  });

  for (var i = 0; i < options.numPoints; i++) {
    var angle = startAngle + i * slice;
    var duration = random(options.minDuration, options.maxDuration);

    var point = {
      x: options.centerX + Math.cos(angle) * options.minRadius,
      y: options.centerY + Math.sin(angle) * options.minRadius
    };

    var tween = TweenMax.to(point, duration, {
      x: options.centerX + Math.cos(angle) * options.maxRadius,
      y: options.centerY + Math.sin(angle) * options.maxRadius,
      repeat: -1,
      yoyo: true,
      ease: Sine.easeInOut
    });
    
    tl.add(tween, -random(duration));
    points.push(point);
  }

  options.tl = tl;
  options.points = points;

  function update() {
    path.setAttribute("d", cardinal(points, true, 1));
  }

  return options;
}

var illustrationBlob = createBlob({
  element: document.querySelector("#blob__path-js"),
  numPoints: 20,
  centerX: 500,
  centerY: 500,
  minRadius: 450,
  maxRadius: 475,
  minDuration: 2,
  maxDuration: 2
});