/* Harum Sari banner (parallax layers + cursor)
 * Background image extracted from former base64 embed.
 */
.hs-banner {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  cursor: none;
  background-image: url('../assets/png/harum-sari-banner.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hs-cursor {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.9);
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 999;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
  mix-blend-mode: screen;
  left: -100px;
  top: -100px;
}

@keyframes float_0 {
  0% {
    transform: translate(0.0px,0.0px) rotate(0.00deg);
  }

  25% {
    transform: translate(0.6px,-0.6px) rotate(1.41deg);
  }

  50% {
    transform: translate(1.0px,-3.9px) rotate(0.11deg);
  }

  75% {
    transform: translate(-1.4px,1.5px) rotate(1.46deg);
  }

  100% {
    transform: translate(0.0px,0.0px) rotate(0.00deg);
  }
}

@keyframes float_1 {
  0% {
    transform: translate(0.0px,0.0px) rotate(0.00deg);
  }

  17% {
    transform: translate(-1.6px,14.4px) rotate(-6.69deg);
  }

  33% {
    transform: translate(3.0px,9.9px) rotate(5.41deg);
  }

  50% {
    transform: translate(-2.9px,-1.1px) rotate(22.91deg);
  }

  67% {
    transform: translate(-0.1px,-8.9px) rotate(18.83deg);
  }

  83% {
    transform: translate(-1.4px,6.9px) rotate(9.79deg);
  }

  100% {
    transform: translate(0.0px,0.0px) rotate(0.00deg);
  }
}

@keyframes float_2 {
  0% {
    transform: translate(0.0px,0.0px) rotate(0.00deg);
  }

  20% {
    transform: translate(-5.6px,9.6px) rotate(-31.02deg);
  }

  40% {
    transform: translate(1.4px,10.4px) rotate(-17.78deg);
  }

  60% {
    transform: translate(1.9px,8.2px) rotate(18.94deg);
  }

  80% {
    transform: translate(4.0px,6.1px) rotate(-10.81deg);
  }

  100% {
    transform: translate(0.0px,0.0px) rotate(0.00deg);
  }
}

@keyframes float_3 {
  0% {
    transform: translate(0.0px,0.0px) rotate(0.00deg);
  }

  17% {
    transform: translate(-3.8px,4.8px) rotate(-26.39deg);
  }

  33% {
    transform: translate(2.9px,9.7px) rotate(23.03deg);
  }

  50% {
    transform: translate(7.1px,5.8px) rotate(-2.54deg);
  }

  67% {
    transform: translate(1.8px,-9.1px) rotate(21.26deg);
  }

  83% {
    transform: translate(-9.0px,-3.2px) rotate(4.30deg);
  }

  100% {
    transform: translate(0.0px,0.0px) rotate(0.00deg);
  }
}

@keyframes float_4 {
  0% {
    transform: translate(0.0px,0.0px) rotate(0.00deg);
  }

  20% {
    transform: translate(-3.2px,-9.4px) rotate(25.80deg);
  }

  40% {
    transform: translate(-5.0px,5.1px) rotate(4.65deg);
  }

  60% {
    transform: translate(4.0px,7.3px) rotate(-25.21deg);
  }

  80% {
    transform: translate(-5.3px,-9.0px) rotate(24.05deg);
  }

  100% {
    transform: translate(0.0px,0.0px) rotate(0.00deg);
  }
}

@keyframes float_5 {
  0% {
    transform: translate(0.0px,0.0px) rotate(0.00deg);
  }

  17% {
    transform: translate(-4.9px,9.0px) rotate(-12.02deg);
  }

  33% {
    transform: translate(0.3px,-0.9px) rotate(-29.38deg);
  }

  50% {
    transform: translate(6.0px,9.9px) rotate(-14.89deg);
  }

  67% {
    transform: translate(-7.8px,-1.2px) rotate(-4.46deg);
  }

  83% {
    transform: translate(-3.2px,-5.2px) rotate(26.29deg);
  }

  100% {
    transform: translate(0.0px,0.0px) rotate(0.00deg);
  }
}

@keyframes float_6 {
  0% {
    transform: translate(0.0px,0.0px) rotate(0.00deg);
  }

  20% {
    transform: translate(-1.8px,-7.4px) rotate(-10.17deg);
  }

  40% {
    transform: translate(-1.5px,10.8px) rotate(-18.17deg);
  }

  60% {
    transform: translate(0.3px,4.1px) rotate(-9.83deg);
  }

  80% {
    transform: translate(1.9px,-8.0px) rotate(-20.15deg);
  }

  100% {
    transform: translate(0.0px,0.0px) rotate(0.00deg);
  }
}

@keyframes float_7 {
  0% {
    transform: translate(0.0px,0.0px) rotate(0.00deg);
  }

  20% {
    transform: translate(-1.2px,3.4px) rotate(-2.96deg);
  }

  40% {
    transform: translate(0.1px,-8.6px) rotate(-3.17deg);
  }

  60% {
    transform: translate(5.0px,8.3px) rotate(-5.65deg);
  }

  80% {
    transform: translate(1.6px,-6.6px) rotate(3.39deg);
  }

  100% {
    transform: translate(0.0px,0.0px) rotate(0.00deg);
  }
}

@keyframes float_8 {
  0% {
    transform: translate(0.0px,0.0px) rotate(0.00deg);
  }

  20% {
    transform: translate(-5.0px,7.0px) rotate(5.01deg);
  }

  40% {
    transform: translate(-3.4px,-7.7px) rotate(-5.25deg);
  }

  60% {
    transform: translate(2.1px,-9.4px) rotate(-1.44deg);
  }

  80% {
    transform: translate(3.5px,4.8px) rotate(3.08deg);
  }

  100% {
    transform: translate(0.0px,0.0px) rotate(0.00deg);
  }
}

@keyframes float_9 {
  0% {
    transform: translate(0.0px,0.0px) rotate(0.00deg);
  }

  20% {
    transform: translate(-0.4px,-8.3px) rotate(-5.22deg);
  }

  40% {
    transform: translate(-3.1px,-7.2px) rotate(-0.46deg);
  }

  60% {
    transform: translate(-3.8px,4.4px) rotate(-5.78deg);
  }

  80% {
    transform: translate(4.8px,-7.8px) rotate(3.15deg);
  }

  100% {
    transform: translate(0.0px,0.0px) rotate(0.00deg);
  }
}

@keyframes float_10 {
  0% {
    transform: translate(0.0px,0.0px) rotate(0.00deg);
  }

  20% {
    transform: translate(0.3px,-1.4px) rotate(-5.99deg);
  }

  40% {
    transform: translate(1.7px,-9.8px) rotate(3.86deg);
  }

  60% {
    transform: translate(-1.6px,4.6px) rotate(4.06deg);
  }

  80% {
    transform: translate(1.9px,3.4px) rotate(-0.14deg);
  }

  100% {
    transform: translate(0.0px,0.0px) rotate(0.00deg);
  }
}

@keyframes float_11 {
  0% {
    transform: translate(0.0px,0.0px) rotate(0.00deg);
  }

  20% {
    transform: translate(-2.5px,5.0px) rotate(-0.63deg);
  }

  40% {
    transform: translate(1.5px,-9.6px) rotate(-1.38deg);
  }

  60% {
    transform: translate(1.4px,3.0px) rotate(0.75deg);
  }

  80% {
    transform: translate(-3.1px,-2.4px) rotate(0.46deg);
  }

  100% {
    transform: translate(0.0px,0.0px) rotate(0.00deg);
  }
}

@keyframes float_12 {
  0% {
    transform: translate(0.0px,0.0px) rotate(0.00deg);
  }

  20% {
    transform: translate(-0.7px,-6.6px) rotate(-1.18deg);
  }

  40% {
    transform: translate(-4.4px,5.0px) rotate(-1.51deg);
  }

  60% {
    transform: translate(-3.0px,-11.5px) rotate(1.50deg);
  }

  80% {
    transform: translate(3.9px,7.9px) rotate(2.60deg);
  }

  100% {
    transform: translate(0.0px,0.0px) rotate(0.00deg);
  }
}

@keyframes float_13 {
  0% {
    transform: translate(0.0px,0.0px) rotate(0.00deg);
  }

  25% {
    transform: translate(-0.3px,-2.7px) rotate(0.00deg);
  }

  50% {
    transform: translate(1.1px,-0.3px) rotate(0.00deg);
  }

  75% {
    transform: translate(0.7px,-1.5px) rotate(0.00deg);
  }

  100% {
    transform: translate(0.0px,0.0px) rotate(0.00deg);
  }
}

@keyframes float_14 {
  0% {
    transform: translate(0.0px,0.0px) rotate(0.00deg);
  }

  25% {
    transform: translate(-2.8px,3.5px) rotate(0.00deg);
  }

  50% {
    transform: translate(1.5px,3.6px) rotate(0.00deg);
  }

  75% {
    transform: translate(2.9px,2.6px) rotate(0.00deg);
  }

  100% {
    transform: translate(0.0px,0.0px) rotate(0.00deg);
  }
}

@keyframes float_15 {
  0% {
    transform: translate(0.0px,0.0px) rotate(0.00deg);
  }

  25% {
    transform: translate(-1.4px,-3.8px) rotate(0.00deg);
  }

  50% {
    transform: translate(-2.8px,2.7px) rotate(0.00deg);
  }

  75% {
    transform: translate(0.7px,-1.7px) rotate(0.00deg);
  }

  100% {
    transform: translate(0.0px,0.0px) rotate(0.00deg);
  }
}