/* CSS Document */
.area { width: 100vw; height: 62.5vw; position: fixed; inset: 0; margin: auto; -webkit-backface-visibility:hidden; backface-visibility:hidden; overflow:hidden;
 transform: scale(.6); }

@media screen and (max-width: 768px) {
  .area {transform: scale(.8);}
}

.area * { transform-origin: left center;
    height: 6.5vw;
    background: linear-gradient(transparent, #fff 60%, #ddd 30%, transparent);
    position: absolute;
    margin: auto;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease;
    transition: all .2s;
    animation-duration: 2s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;

}

.y1 { animation-name: y1; left: 34.5vw; top: 28.8vw; }
.y2 { animation-name: y2; left: 34.5vw; top: 28.8vw; }
.y3 { animation-name: y3; left: 34.5vw; top: 28.8vw; }

@keyframes y1 {
  0% { width: 9vw; rotate: 248deg; translate: 0 0; }
  25% { width: 16vw; rotate :231deg; translate: 0 -3vw; }
  50% { width: 31vw; rotate: 241deg; translate: 2vw 10vw; }
  75% { width: 15vw; rotate :261deg; translate: -3vw 3vw; }
  100% { width: 9vw; rotate: 248deg; translate: 0 0; }
}


@keyframes y2 {
  0% { width: 13vw; rotate: 90deg; translate: 0 0;  }
  25% { width: 22vw; translate: 0 -3vw;  rotate : 84deg;  }
  50% { width: 10vw; translate: 2vw 10vw; rotate: 101deg;}
  75% { width: 8vw; translate: -3vw 3vw; rotate : 72deg; }
  100% { width: 13vw; rotate: 90deg; translate: 0 0;  }
}

@keyframes y3 {
  0% { width: 9vw; rotate: -66deg; translate: 0 0; }
  25% { width: 10vw; translate: 0 -3vw; rotate: -66deg; }
  50% { width: 21vw; translate: 2vw 10vw; rotate: -79deg; }
  75% { width: 17vw; translate: -3vw 3vw; rotate: -57deg; }
  100% { width: 9vw; rotate: -66deg; translate: 0 0; }
}



.e1 { animation-name: e1; left: 46vw; top: 20.5vw; }
.e2 { animation-name: e2; left: 46vw; top: 31.3vw; }
.e3 { animation-name: e3; left: 45.6vw; top: 41.3vw; }
.e4 { animation-name: e4; left: 46.2vw; top: 20.5vw; }


@keyframes e1 {
  0% { width: 5vw; rotate: 0; translate: 0 0; }
  25% { width: 11vw; rotate: -10deg; translate: 0 -4vw;}
  50% { width: 12vw; rotate: 15deg; translate: -1vw -4vw; }
  75% { width: 11vw; rotate: -35deg; translate: -1vw 1vw; }
  100% { width: 5vw; rotate: 0; translate: 0 0; }
}

@keyframes e2 {
  0% { width: 5.4vw; rotate: 0; translate: 0 0; }
  25% { width: 10.4vw; rotate: 14deg; translate: 0 -4vw;}
  50% { idth: 6.4vw; rotate: 27deg; translate: -.5vw -3vw; }
  75% { width: 5.4vw; rotate: 8deg; translate: -1vw -2vw; }
  100% { width: 5.4vw; rotate: 0; translate: 0 0; }
}

@keyframes e3 {
  0% { width: 7vw; rotate: 0; translate: 0 0; }
  25% { width: 7vw; rotate: 0deg; translate: 0 5vw; }
  50% { width: 7vw; rotate: -10deg; translate: 1vw 5vw;}
  75% { width: 7vw; rotate: 50deg;  translate: -1vw -5vw; }
  100% { width: 7vw; rotate: 0deg;  translate: 0 0; }
}

@keyframes e4 {
  0% { width: 21vw; rotate:91deg; translate: 0 0; }
  25% { width: 30vw; rotate :90.7deg; translate: 0 -4vw;}
  50% { width: 30vw; rotate : 87.7deg; translate:  -1vw -4vw; }
  75% { width: 15vw; rotate : 92deg; translate: -1vw 1vw;}
  100% { width: 21vw; rotate:91deg;  translate: 0 0; }
}



.s1 { animation-name: s1; left: 68.4vw; top: 20.5vw;}
.s2 { animation-name: s2; left: 68.4vw; top: 20.5vw; }
.s3 { animation-name: s3; left: 62.1vw; top: 24.5vw; }
.s4 { animation-name: s4; left: 68.9vw; top: 42.2vw; }
.s5 { animation-name: s5; left: 59.8vw; top: 40.5vw; }


@keyframes s1 {
  0% { width:  6vw; rotate: 85.7deg; translate: 0 0; }
  25% { width: 9vw; rotate: 41.7deg; translate: -.2vw -4vw;}
  50% { width:  10vw;  rotate: 35.7deg; translate: -3.2vw -4vw;}
  75% { width: 6vw; rotate: 85.7deg; translate: 2.9vw -3vw;}
  100% { width:  6vw; rotate: 85.7deg; translate: 0 0; }
}

@keyframes s2 {
  0% { width: 7.7vw; rotate: 146deg; translate: 0 0; }
  25% { width: 7.7vw; rotate: 146deg; translate: 0 -4vw; }
  50% { width: 7.7vw; rotate: 146deg; translate: -3vw -4vw; }
  75% { width: 6.8vw; rotate: 131deg; translate: 3vw -3vw;}
  100% { width: 7.7vw; rotate: 146deg; translate: 0 0; }
}
@keyframes s3 {
  0% { width: 18.8vw; rotate:68.8deg; translate: 0 0; }
  25% { width: 18.8vw; rotate: 68.8deg; translate: 0 -4vw; }
  50% { width: 20.8vw; rotate: 48.8deg; translate: -3vw -4vw; }
  75% { width: 18.8vw; rotate: 72.8deg; translate: 5vw -2vw; }
  100% { width: 18.8vw; rotate:68.8deg; translate: 0 0; }
}
@keyframes s4 {
  0% { width:  9.1vw; rotate: 191deg; translate: 0 0; }
  25% { width: 9.4vw; rotate: 161deg; translate: 0 -4.4vw;}
  50% { width: 12.1vw; rotate: 159.1deg; translate: 4vw -6.1vw; }
  75% { width: 13.5vw; rotate: 171deg; translate: 4vw -1.7vw; }
  100% { width:  9.1vw; rotate: 191deg; translate: 0 0; }
}
@keyframes s5 {
  0% { width:  3vw; rotate: 270deg; translate: 0 0; }
  25% { width:  3vw; rotate: 273deg; translate: .3vw .5vw;}
  50% { width: 4vw; rotate: 241deg; translate: 2vw;}
  75% { width:  3vw; rotate: 270deg; translate: 0 2vw;}
  100% { width:  3vw; rotate: 270deg; translate: 0 0; }
}


.scene2 { width: 100%; height: 100%; position: fixed; inset: 0; margin: auto; background: #000; }
.scene2 svg { width: 100%; height: 100%; }
.scene2 svg .st0 { stroke: #ddd; }
.scene2 #strech { animation: stretch alternate 1s infinite;transform-origin: revert; transform-box:fill-box;}
.scene2 #rotate { animation: rotate linear .5s infinite; transform-origin: center; transform-box:fill-box;}

@media screen and (max-width: 600px) {
  .scene2 svg { transform: translateX(-10%); width: 150%;  }
}

@keyframes stretch {
  0% { transform: scale(1);stroke-width: 1px;  }
  100% { transform: scale(2); stroke-width: .5px; }
}
@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}






.scene2 { animation: scene steps(1) 5s infinite; opacity: 0; }
@keyframes scene {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 1; }
}