/* PART 1 STYLING: INTRO */

/* PART 1 BODY */
body.part1 {
  height: 1000vh;
}

/* TITLE SCREEN */
.title {
  position: relative;
  top: 30vh;
  animation: title-fadeout 2s ease-in calc(var(--scroll) * -2s) paused;
}

.title-picture {
  max-width: 400px;
  width: 60vw;
  animation: wiggle-effect 2s infinite;
}

.title-text {
  position: relative;
  top: 30px;
}

/* FURNITURE */
.furniture {
  position: fixed;
  height: 50vh;
  bottom: 0;
}

.chair {
  left: calc(50vw - 10vh);
  opacity: 0;
  animation: chair 2s ease-in-out calc(var(--scroll) * -2s) paused;
}

.bed {
  right: calc(50vw - 40vh);
  opacity: 0;
  animation: bed 2s ease-in-out calc(var(--scroll) * -2s) paused;
}

.desk {
  left: calc(50vw - 30vh);
  opacity: 0;
  z-index: 10;
  animation: desk 2s ease-in-out calc(var(--scroll) * -2s) paused;
}

/* DREW */
.faces.part1 {
  position: fixed;
  bottom: 0px;
  left: calc(50vw - 40px);
  height: 50vh;
  width: 73px;
  transform-origin: bottom;
  animation: drew-story1 2s ease-in-out calc(var(--scroll) * -2s) paused;
}

/* IDEA THINKING START */
.idea-cloud {
  position: fixed;
  height: 50vh;
  top: -20vh;
  left: -25vh;
  transform: scale(0);
  animation: ideazoom 2s ease-in-out calc(var(--scroll) * -2s) paused;
}

/* ANIMATION DREW */
@keyframes drew-story1 {
  0% {
    transform: translate(60vw, 0) scale(1);
  }

  10% {
    transform: translate(0, 0) scale(1);
  }

  45% {
    transform: translate(0, 0) scale(1);
  }

  47% {
    transform: translate(0, -23vh) scale(1);
  }

  50% {
    transform: translate(0, -20vh) scale(1);
  }

  80% {
    transform: translate(0, -20vh) scale(1);
  }

  84% {
    transform: translate(0, 30vh) scale(2);
  }

  100% {
    transform: translate(0, 30vh) scale(2);
  }
}

/* ANIMATION TITEL-TEXT */
@keyframes title-fadeout {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }

  4% {
    transform: translate(0, -50vh);
  }
}


/* ANIMATION FURNITURE DESK */
@keyframes desk {
  0% {
    transform: translate(-55vw, 0);
    opacity: 1;
  }

  40% {
    transform: translate(-55vw, 0);
  }

  50% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, 0) scale(1);
  }

  84% {
    transform: translate(-40vw, 80vh) scale(2);
  }

  100% {
    transform: translate(-40vw, 80vh) scale(2);
    opacity: 1;
  }
}

/* ANIMATION FURNITURE CHAIR */
@keyframes chair {
  0% {
    transform: translate(70vw, 0);
    opacity: 1;
  }

  40% {
    transform: translate(70vw, 0);

  }

  50% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, 0) scale(1);
  }


  85% {
    transform: translate(0, 70vh) scale(2);
    opacity: 1;
  }
}

/* ANIMATION FURNITURE BED */
@keyframes bed {
  0% {
    transform: translate(80vw, 0);
    opacity: 1;
  }

  55% {
    transform: translate(80vw, 0);
  }

  60% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, 0) scale(1);
  }

  84% {
    transform: translate(40vw, 80vh) scale(2);
  }

  100% {
    transform: translate(40vw, 80vh) scale(2);
    opacity: 1;
  }
}

/* ANIMATION IDEA ZOOM */

@keyframes ideazoom {
  86% {
    transform: scale(0);
  }

  93% {
    transform: scale(3);
  }
}

/* PART 1 STYLING: NOTIFICATION */

/* BLOCK SCROLLING */
.stop-scrolling {
  height: 100%;
  overflow: hidden;
}

/* NOTIFICATION STYLE */
#cooltoast-container {
  position: fixed;
  top: 0;
  left: 50px;
  width: calc(100vw - 100px);
  font-family: 'Nanum Pen Script';
}

.cooltoast-toast {
  position: relative;
  padding: 10px 20px;
  margin: 10px;
  border-radius: 8px;
  background: #FDFDFD;
  cursor: pointer;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.19);
  animation-duration: .3s;
  animation-name: cooltoast;
  animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

.cooltoast-fadeOut {
  animation-name: cooltoastFadeOut;
  animation-duration: .3s;
  animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  animation-fill-mode: forwards;
}

#cooltoast-container p,
#cooltoast-container h4 {
  margin: 3px 0 !important;
}

.cooltoast-title {
  font-weight: 700;
  font-size: 25px;
  margin-bottom: 10px;
}

.cooltoast-text {
  font-size: 20px;
  color: #777;
}

.cooltoast-icon {
  position: absolute;
  top: 5px;
  left: -40px;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background: #FFFFFF00;
}

.cooltoast-toast a,
.cooltoast-toast a:hover {
  color: #549EDB !important;
  text-decoration: none !important;
}

/** toast types */
.cooltoast-success {
  border-bottom: 2px solid #51C625;
}

.cooltoast-warning {
  border-bottom: 2px solid #DB9215;
}

.cooltoast-error {
  border-bottom: 2px solid #DB2B1D;
}

.cooltoast-info {
  border-bottom: 2px solid #27ABDB;
}

@keyframes cooltoast {
  from {
    transform: translate3d(0, -400px, 0);
    ;
    opacity: 0;
  }

  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes cooltoastFadeOut {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }

  to {
    transform: translate3d(0, -400px, 0);
    opacity: 0;
  }
}