html {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}

$bounce: cubic-bezier(0.545, 2, 0.47, 0.82);

// in
$easeInQuad       : cubic-bezier(0.550, 0.085, 0.680, 0.530);
$easeInCubic      : cubic-bezier(0.550, 0.055, 0.675, 0.190);
$easeInQuart      : cubic-bezier(0.895, 0.030, 0.685, 0.220);
$easeInQuint      : cubic-bezier(0.755, 0.050, 0.855, 0.060);
$easeInSine       : cubic-bezier(0.470, 0.000, 0.745, 0.715);
$easeInExpo       : cubic-bezier(0.950, 0.050, 0.795, 0.035);
$easeInCirc       : cubic-bezier(0.600, 0.040, 0.980, 0.335);
$easeInBack       : cubic-bezier(0.600, -0.280, 0.735, 0.045);

// out
$easeOutQuad      : cubic-bezier(0.250, 0.460, 0.450, 0.940);
$easeOutCubic     : cubic-bezier(0.215, 0.610, 0.355, 1.000);
$easeOutQuart     : cubic-bezier(0.165, 0.840, 0.440, 1.000);
$easeOutQuint     : cubic-bezier(0.230, 1.000, 0.320, 1.000);
$easeOutSine      : cubic-bezier(0.390, 0.575, 0.565, 1.000);
$easeOutExpo      : cubic-bezier(0.190, 1.000, 0.220, 1.000);
$easeOutCirc      : cubic-bezier(0.075, 0.820, 0.165, 1.000);
$easeOutBack      : cubic-bezier(0.175, 0.885, 0.320, 1.275);

// in out
$easeInOutQuad    : cubic-bezier(0.455, 0.030, 0.515, 0.955);
$easeInOutCubic   : cubic-bezier(0.645, 0.045, 0.355, 1.000);
$easeInOutQuart   : cubic-bezier(0.770, 0.000, 0.175, 1.000);
$easeInOutQuint   : cubic-bezier(0.860, 0.000, 0.070, 1.000);
$easeInOutSine    : cubic-bezier(0.445, 0.050, 0.550, 0.950);
$easeInOutExpo    : cubic-bezier(1.000, 0.000, 0.000, 1.000);
$easeInOutCirc    : cubic-bezier(0.785, 0.135, 0.150, 0.860);
$easeInOutBack    : cubic-bezier(0.680, -0.550, 0.265, 1.550);

.scene {
  background: radial-gradient(ellipse at center,  #fff 0%,#b5b9bf 100%);
  position:fixed;
  top:0;right:0;bottom:0;left:0;
  margin:auto;
  overflow: hidden;
}


$red:#c73226;
$lightblue:#354459;
$mediumblue:#1e2839;
$darkblue:#0c111f;
$gray:#e5e5e5;


@keyframes scalex {
  0%   {transform:scaleX(0);opacity:0;}
  20%  {opacity: 1;}
  100% {transform:scaleX(1);}
}
@keyframes scaley {
  0%   {transform:scaleY(0);opacity:0;}
  20%  {opacity: 1;}
  100% {transform:scaleY(1);}
}
@keyframes scale {
  0%   {transform:scale(0);opacity:0;}
  20%  {opacity: 1;}
  100% {transform:scale(1);}
}

.logo {
  width: 248px;
  height: 238px;
  position:absolute;top:0;right:0;bottom:0;left:0;
  margin:auto;
  z-index: 800;
  .logo-trig {
    position: absolute;
    left: 0;bottom: 0;
    width:0;height:0;
    border-right:   52px solid $lightblue;
    border-top:     52px solid transparent;
    border-bottom:  52px solid transparent;
    animation:logo-trig .5s .25s $easeOutQuint backwards paused;
  }
  .logo-trid {
    position: absolute;
    top: 0;right: 0;
    width:0;height:0;
    border-left:    52px solid $lightblue;
    border-top:     52px solid transparent;
    border-bottom:  52px solid transparent;
    animation:logo-trid .5s .5s $easeOutQuint backwards paused;
  }
  .logo-sqg {
    position: absolute;
    top:2*26px;left:62px;
    width: 52px;
    height: 186px;
    background: $darkblue;
    transform:skewY(-45deg);
    transform-origin:0 0;
    animation:logo-sq .5s $easeOutQuint backwards paused;
  }
  .logo-sqd {
    position: absolute;
    top:2*26px;right:62px;
    width: 52px;
    height: 186px;
    background: $darkblue;
    transform:skewY(-45deg);
    transform-origin:0 100%;
    animation:logo-sq .5s .25s $easeOutQuint backwards paused;
  }
  .logo-sep {
    position:absolute;
    top:104px;
    right:0;left:0;
    margin:auto;
    width: 6px;
    height: 40px;
    transform:skewY(-45deg);
    background:$lightblue;
    animation:logo-sq .5s .5s $easeOutQuint backwards paused;
  }
  opacity: 0;
  &.a {
    opacity: 1;
    .logo-trig {animation-play-state:running;}
    .logo-trid {animation-play-state:running;}
    .logo-sqg  {animation-play-state:running;}
    .logo-sqd  {animation-play-state:running;}
    .logo-sep  {animation-play-state:running;}
  }
}

@keyframes logo-trig {
  0%   {opacity:0;transform:translateY(-100px);}
  100% {opacity:1;transform:none;}
}
@keyframes logo-trid {
  0%   {opacity:0;transform:translateY(100px);}
  100% {opacity:1;transform:none;}
}

@keyframes logo-sq {
  0%   {transform:skewY(-45deg) scaleY(0);}
  100% {transform:skewY(-45deg) scaleY(1);}
}






.sq-logo {
  width:326px;
  height:326px;
  transform:rotate(45deg);
  position:absolute;top:0;right:0;bottom:0;left:0;
  margin:auto;
  z-index: 100;
  > * {position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;}
  .sq--a {
    box-shadow: 0 0 0 10px #fff;
    background:$red;
    animation:  scalex .5s $easeInOutQuint backwards paused,
      sqla .4s .5s $easeInOutCubic backwards paused;
    transform-origin:0 0;
  }
  .sq--b {
    width:310px;
    height:310px;
    background:#fff;
    animation:scaley .4s .35s $easeInOutQuint backwards paused;
    transform-origin:0 0;
  }
  opacity: 0;
  &.a {
    opacity: 1;
    .sq--a {animation-play-state:running;}
    .sq--b {animation-play-state:running;}
  }
}
@keyframes sqla {
  0%   {box-shadow: 0 0 0 0 #fff;}
  50%  {box-shadow: 0 0 0 20px #fff;}
  100% {box-shadow: 0 0 0 10px #fff;}
}




.sr-rec1 {
  width:376px;
  height:376px;
  position:absolute;top:0;right:0;bottom:0;left:0;
  margin:auto;
  z-index: 90;
  > * {position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;}
  .sq--a {
    background: $lightblue;
    border:28px solid $darkblue;
    animation:srra .75s $easeOutCubic backwards paused;

    div {
      width:28px;
      height:28px;
      background:$darkblue;
      position: absolute;
      &.sq--1 {top: 0;left: 0;}
      &.sq--2 {top: 0;right: 0;}
      &.sq--3 {right: 0;bottom: 0;}
      &.sq--4 {bottom: 0;left: 0;}
    }
  }
  .sq--b {
    width: 356px;
    height: 356px;
    z-index: 5;
    div {
      position:absolute;
      background:$lightblue;
    }
    .sq--1 {
      top:0;right:0;left:0;height:4px;
      animation:scalex .5s .5s $easeInOutQuint backwards paused;
      transform-origin:0 50%;
    }
    .sq--2 {
      top:0;right:0;bottom:0;width:4px;
      animation:scaley .5s .5s $easeInOutQuint backwards paused;
      transform-origin:50% 0;
    }
    .sq--3 {
      right:0;bottom:0;left:0;height:4px;
      animation:scalex .5s .5s $easeInOutQuint backwards paused;
      transform-origin:100% 50%;
    }
    .sq--4 {
      top:0;bottom:0;left:0;width:4px;
      animation:scaley .5s .5s $easeInOutQuint backwards paused;
      transform-origin:50% 100%;
    }
  }
  opacity: 0;
  &.a {
    opacity: 1;
    .sq--a {animation-play-state:running;}
    .sq--b {
      .sq--1 {animation-play-state:running;}
      .sq--2 {animation-play-state:running;}
      .sq--3 {animation-play-state:running;}
      .sq--4 {animation-play-state:running;}
    }
  }
}
@keyframes srra {
  0%   {transform:scale(1.5);opacity: 0;}
  50%  {transform:scale(.75);opacity: 1;}
  75%  {transform:scale(1.1);opacity: 1;}
  100% {transform:scale(1);opacity: 1;}
}




.sr-rec2 {
  width:390px;
  height:390px;
  transform:rotate(45deg);
  position:absolute;top:0;right:0;bottom:0;left:0;
  margin:auto;
  z-index: 80;
  > * {position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;}
  .sq--a {
    background: $lightblue;
    animation:scalex .75s $easeOutCubic backwards paused;
    transform-origin:0 0;
  }
  .sq--b {
    div {
      position:absolute;
      background:$darkblue;
    }
    .sq--1 {
      top:0;right:0;left:0;height:6px;
      animation:scalex .5s .5s $easeInOutQuint backwards paused;
      transform-origin:0 50%;
    }
    .sq--2 {
      top:0;right:0;bottom:0;width:6px;
      animation:scaley .5s .5s $easeInOutQuint backwards paused;
      transform-origin:50% 0;
    }
    .sq--3 {
      right:0;bottom:0;left:0;height:6px;
      animation:scalex .5s .5s $easeInOutQuint backwards paused;
      transform-origin:100% 50%;
    }
    .sq--4 {
      top:0;bottom:0;left:0;width:6px;
      animation:scaley .5s .5s $easeInOutQuint backwards paused;
      transform-origin:50% 100%;
    }
  }
  .sq--c {
    width:370px;
    height:370px;
    div {
      position:absolute;
      background:$red;
    }
    .sq--1 {
      top:0;right:0;left:0;height:2px;
      animation:scalex .5s .5s $easeInOutQuint backwards paused;
      transform-origin:0 50%;
    }
    .sq--2 {
      top:0;right:0;bottom:0;width:2px;
      animation:scaley .5s .5s $easeInOutQuint backwards paused;
      transform-origin:50% 0;
    }
    .sq--3 {
      right:0;bottom:0;left:0;height:2px;
      animation:scalex .5s .5s $easeInOutQuint backwards paused;
      transform-origin:100% 50%;
    }
    .sq--4 {
      top:0;bottom:0;left:0;width:2px;
      animation:scaley .5s .5s $easeInOutQuint backwards paused;
      transform-origin:50% 100%;
    }
  }

  .sq--d {
    width:356px;
    height:356px;
    .sq--dd {
      position:absolute;
      width: 100%;height:100%;
      &.sq--d1 {transform:rotate(0deg);}
      &.sq--d2 {transform:rotate(90deg);}
      &.sq--d3 {transform:rotate(180deg);}
      &.sq--d4 {transform:rotate(270deg);}
      div {
        width:18px;
        height:18px;
        background:$gray;
        position:absolute;
        top:0;
        left:0;
        opacity: 0;
        transform:translateY(50px) scale(0);
        @for $i from 1 through 14 {
          &:nth-child(#{$i}) {
            transition:.5s $i*.015+.75s $bounce;
            left:$i*26-26px;
          }
      }
    }
  }
}
opacity: 0;
&.a {
  opacity: 1;
  .sq--a {animation-play-state:running;}
  .sq--b {
    .sq--1 {animation-play-state:running;}
    .sq--2 {animation-play-state:running;}
    .sq--3 {animation-play-state:running;}
    .sq--4 {animation-play-state:running;}
  }
  .sq--c {
    .sq--1 {animation-play-state:running;}
    .sq--2 {animation-play-state:running;}
    .sq--3 {animation-play-state:running;}
    .sq--4 {animation-play-state:running;}
  }
  .sq--d {
    .sq--dd {
      div {
        transform:translateY(0) scale(1);
        opacity: 1;
      }
    }
  }
}
}








.sr-rec3 {
  width:476px;
  height:476px;
  position:absolute;top:0;right:0;bottom:0;left:0;
  margin:auto;
  z-index: 70;
  > * {position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;}
  .sq--a {
    background: $lightblue;
    animation:scalex 1s $easeOutCubic backwards paused;
    transform-origin:0 0;
  }
  .sq--b {
    div {
      position:absolute;
      background:$darkblue;
    }
    .sq--1 {
      top:0;right:0;left:0;height:10px;
      animation:scalex .75s .5s $easeInOutQuint backwards paused;
      transform-origin:0 50%;
    }
    .sq--2 {
      top:0;right:0;bottom:0;width:10px;
      animation:scaley .75s .5s $easeInOutQuint backwards paused;
      transform-origin:50% 0;
    }
    .sq--3 {
      right:0;bottom:0;left:0;height:10px;
      animation:scalex .75s .5s $easeInOutQuint backwards paused;
      transform-origin:100% 50%;
    }
    .sq--4 {
      top:0;bottom:0;left:0;width:10px;
      animation:scaley .75s .5s $easeInOutQuint backwards paused;
      transform-origin:50% 100%;
    }
  }
  .sq--c {
    width:446px;
    height:446px;
    div {
      position:absolute;
      background:$red;
    }
    .sq--1 {
      top:0;right:0;left:0;height:2px;
      animation:scalex .75s .5s $easeInOutQuint backwards paused;
      transform-origin:0 50%;
    }
    .sq--2 {
      top:0;right:0;bottom:0;width:2px;
      animation:scaley .75s .5s $easeInOutQuint backwards paused;
      transform-origin:50% 0;
    }
    .sq--3 {
      right:0;bottom:0;left:0;height:2px;
      animation:scalex .75s .5s $easeInOutQuint backwards paused;
      transform-origin:100% 50%;
    }
    .sq--4 {
      top:0;bottom:0;left:0;width:2px;
      animation:scaley .75s .5s $easeInOutQuint backwards paused;
      transform-origin:50% 100%;
    }
  }

  .sq--d {
    width:430px;
    height:430px;
    .sq--dd {
      position:absolute;
      width: 100%;height:100%;
      &.sq--d1 {transform:rotate(0deg);}
      &.sq--d2 {transform:rotate(90deg);}
      &.sq--d3 {transform:rotate(180deg);}
      &.sq--d4 {transform:rotate(270deg);}
      div {
        width:24px;
        height:24px;
        background:$gray;
        position:absolute;
        top:0;
        left:0;
        transform:translateY(50px) scale(0);
        @for $i from 1 through 15 {
          &:nth-child(#{$i}) {
            transition:.5s $i*.015+.75s $bounce;
            left:$i*29-29px;
          }
      }
    }
  }
}
transition: .25s $easeOutCubic;
opacity: 0;
&.a {
  opacity: 1;
  .sq--a {animation-play-state:running;}
  .sq--b {
    .sq--1 {animation-play-state:running;}
    .sq--2 {animation-play-state:running;}
    .sq--3 {animation-play-state:running;}
    .sq--4 {animation-play-state:running;}
  }
  .sq--c {
    .sq--1 {animation-play-state:running;}
    .sq--2 {animation-play-state:running;}
    .sq--3 {animation-play-state:running;}
    .sq--4 {animation-play-state:running;}
  }
  .sq--d {
    .sq--dd {
      div {
        transform:translateY(0) scale(1);
      }
    }
  }
}
}







.sr-rec4 {
  width:464px;
  height:464px;
  position:absolute;top:0;right:0;bottom:0;left:0;
  margin:auto;
  z-index: 60;
  transform:rotate(45deg);
  > * {position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;}
  .sq--a {
    background: $red;
    animation:scalex .75s $easeInOutQuint backwards paused;
    transform-origin:100% 100%;
  }
  .sq--b {
    width:452px;
    height:452px;
    background: $mediumblue;
    animation:scaley .75s .5s $easeInOutQuint backwards paused;
    transform-origin:100% 100%;
  }
  .sq--c {
    width:424px;
    height:424px;
    .sq--cc {
      position: absolute;
      width: 36px;
      height:36px;
      &.sq--c1 {top:0;right:0;}
      &.sq--c2 {right:0;bottom:0;}
      &.sq--c3 {bottom:0;left:0;}
      .sq--cc1 {
        position:absolute;
        top:0;right:0;bottom:0;left:0;
        margin:auto;
        width:36px;
        height:36px;
        border:4px solid $red;
      }
      .sq--cc2 {
        position:absolute;
        top:0;right:0;bottom:0;left:0;
        margin:auto;
        width:20px;
        height:20px;
        background:$gray;
      }

      &.sq--c1 {
        .sq--cc1 {animation:scale .75s .1s $bounce backwards paused;}
        .sq--cc2 {animation:scale .75s .6s $bounce backwards paused;}
      }
      &.sq--c2 {
        .sq--cc1 {animation:scale .75s .1+.25s $bounce backwards paused;}
        .sq--cc2 {animation:scale .75s .6+.25s $bounce backwards paused;}
      }
      &.sq--c3 {
        .sq--cc1 {animation:scale .75s .1+.5s $bounce backwards paused;}
        .sq--cc2 {animation:scale .75s .6+.5s $bounce backwards paused;}
      }

    }
  }
  opacity: 0;
  &.a {
    opacity: 1;
    .sq--a {animation-play-state:running;}
    .sq--b {animation-play-state:running;}
    .sq--c {
      .sq--cc {
        .sq--cc1 {animation-play-state:running;}
        .sq--cc2 {animation-play-state:running;}
      }
    }
  }
}









.str {
  width:586px;
  height:586px;
  position:absolute;top:0;right:0;bottom:0;left:0;
  margin:auto;
  z-index: 50;
  overflow: hidden;
  > * {position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;}
  .st--st {
    position: absolute;
    top:0;right:0;
    width:352px;
    height:100%;
    &.st--a {transform:rotate(45deg);}
    &.st--b {transform:rotate(-45-90deg);}
    div {
      height: 6px;
      width: 100%;
      background:$red;
      position: absolute;
      left: 0;right: 0;
      transform-origin:100% 0;
      &:nth-child(1) {top:0;}
      &:nth-child(2) {top:12px;}
      &:nth-child(3) {top:24px;}
    }
    &.st--a {
      div:nth-child(1) {animation:scalex 2s 1*.1s $easeInOutQuint backwards paused;}
      div:nth-child(2) {animation:scalex 2s 2*.1s $easeInOutQuint backwards paused;}
      div:nth-child(3) {animation:scalex 2s 3*.1s $easeInOutQuint backwards paused;}
    }
    &.st--b {
      div:nth-child(1) {animation:scalex 2s 1*.1s $easeInOutQuint backwards paused;}
      div:nth-child(2) {animation:scalex 2s 2*.1s $easeInOutQuint backwards paused;}
      div:nth-child(3) {animation:scalex 2s 3*.1s $easeInOutQuint backwards paused;}
    }
  }
  opacity: 0;
  &.a {
    opacity: 1;
    .st--st {
      &.st--a {
        div {animation-play-state:running;}
      }
      &.st--b {
        div {animation-play-state:running;}
      }
    }
  }
}