/*==================================================
  HERO SVG ANIMATION
==================================================*/

/*----------------------------------
  SUN
----------------------------------*/

#sun {
  transform-box: fill-box;
  transform-origin: center;
  animation: sunRotate 80s linear infinite;
  fill: var(--hero-sun);
}

@keyframes sunRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/*----------------------------------
  CLOUD LEFT
----------------------------------*/

#cloud-left {
  fill: var(--hero-sky);
  animation: cloudLeft 36s ease-in-out infinite;
}

@keyframes cloudLeft {
  0% {
    translate: 0 0;
  }

  50% {
    translate: 45px 0;
  }

  100% {
    translate: 0 0;
  }
}

/*----------------------------------
  CLOUD MID
----------------------------------*/

#cloud-mid {
  fill: var(--hero-sky);
  animation: cloudMid 52s ease-in-out infinite;
}

@keyframes cloudMid {
  0% {
    translate: 0 0;
  }

  50% {
    translate: -35px 0;
  }

  100% {
    translate: 0 0;
  }
}

/*----------------------------------
  CLOUD RIGHT
----------------------------------*/

#cloud-right {
  fill: var(--hero-sky);
  animation: cloudRight 44s ease-in-out infinite;
}

@keyframes cloudRight {
  0% {
    translate: 0 0;
  }

  50% {
    translate: 28px 0;
  }

  100% {
    translate: 0 0;
  }
}

/*----------------------------------
  TREE
----------------------------------*/

#tree {
  fill: var(--hero-tree);
  animation: treeWind 6s ease-in-out infinite;
}

@keyframes treeWind {
  0% {
    translate: 0 0;
  }

  50% {
    translate: 0 -2px;
  }

  100% {
    translate: 0 0;
  }
}

/*----------------------------------
  GRASS
----------------------------------*/

#grass {
  fill: var(--primary-light);
  animation: grassWave 5s ease-in-out infinite;
}

@keyframes grassWave {
  0% {
    translate: 0 0;
  }

  50% {
    translate: 0 -3px;
  }

  100% {
    translate: 0 0;
  }
}

/*----------------------------------
  HILL BACK DRAW
----------------------------------*/

#hill-back {
  stroke-dasharray: 2600;
  stroke-dashoffset: 2600;
  fill: var(--hero-grass-soft);

  animation: drawBack 4s ease forwards;
}

@keyframes drawBack {
  to {
    stroke-dashoffset: 0;
  }
}

/*----------------------------------
  HILL FRONT DRAW
----------------------------------*/

#hill-front {
  stroke-dasharray: 3310;
  stroke-dashoffset: 3310;
  fill: var(--hero-grass-dark);

  animation: drawFront 5s ease 0.8s forwards;
}

@keyframes drawFront {
  to {
    stroke-dashoffset: 0;
  }
}