/* PSD canvas: 750 x 1061px */
* {
  box-sizing: border-box;
}

.kv-page {
  width: 100%;
  display: grid;
  place-items: start center;
  padding: 1em 0;
  margin-top: 3em;
}

.kv-stage {
  width: min(100%, 750px);
  aspect-ratio: 750 / 1061;
  position: relative;
  overflow: hidden;
  line-height: 0;
  background: transparent;
}

.kv-layer {
  position: absolute;
  display: block;
  line-height: 0;
  transform-origin: center center;
  will-change: transform, opacity;
  pointer-events: none;
  user-select: none;
}

.kv-layer img {
  display: block;
  width: 100%;
  height: auto;
}


/* Layer positions */
#layer-01-bg {
  left: 0.000000%;
  top: 0.000000%;
  width: 100.000000%;
  z-index: 1;
}

#layer-02-fireworks3 {
  left: 77.466667%;
  top: 29.594722%;
  width: 21.600000%;
  z-index: 2;
}

#layer-03-fireworks2 {
  left: -2.533333%;
  top: 26.955702%;
  width: 26.533333%;
  z-index: 3;
}

#layer-04-fireworks1 {
  left: 20.000000%;
  top: -2.733270%;
  width: 40.666667%;
  z-index: 4;
}

#layer-05-note4 {
  left: 56.666667%;
  top: 3.487276%;
  width: 7.600000%;
  z-index: 5;
}

#layer-06-note3 {
  left: 71.600000%;
  top: 27.898209%;
  width: 6.800000%;
  z-index: 6;
}

#layer-07-note2 {
  left: 10.666667%;
  top: 25.824694%;
  width: 5.466667%;
  z-index: 7;
}

#layer-08-note1 {
  left: 11.066667%;
  top: 5.466541%;
  width: 16.933333%;
  z-index: 8;
}

#layer-09-momota {
  left: 0.000000%;
  top: 18.096136%;
  width: 100.000000%;
  z-index: 9;
}

#layer-10-hitode2 {
  left: 83.466667%;
  top: 49.858624%;
  width: 16.533333%;
  z-index: 10;
}

#layer-11-hitode1 {
  left: 80.800000%;
  top: 64.184731%;
  width: 9.200000%;
  z-index: 11;
}

#layer-12-obi {
  left: 0.000000%;
  top: 93.402451%;
  width: 100.000000%;
  z-index: 12;
}

#layer-13-leaf3 {
  left: 2.400000%;
  top: 82.657870%;
  width: 22.666667%;
  z-index: 13;
}

#layer-14-flower2 {
  left: 81.733333%;
  top: 81.809614%;
  width: 16.666667%;
  z-index: 14;
}

#layer-15-flower1 {
  left: 58.533333%;
  top: 65.315740%;
  width: 15.733333%;
  z-index: 15;
}

#layer-16-balloon {
  left: 2.133333%;
  top: 59.377945%;
  width: 14.400000%;
  z-index: 16;
}

#layer-17-sun {
  left: 12.266667%;
  top: 49.575872%;
  width: 9.066667%;
  z-index: 17;
}

#layer-18-title {
  left: 12.000000%;
  top: 68.803016%;
  width: 77.866667%;
  z-index: 18;
}

#layer-19-leaf2 {
  left: 82.000000%;
  top: 90.480679%;
  width: 10.266667%;
  z-index: 19;
}

#layer-20-leaf1 {
  left: 54.666667%;
  top: 69.557022%;
  width: 7.733333%;
  z-index: 20;
}

#layer-21-date {
  left: 3.200000%;
  top: 94.156456%;
  width: 93.466667%;
  z-index: 21;
}

#layer-22-logo {
  left: 65.333333%;
  top: 0.848256%;
  width: 33.200000%;
  z-index: 22;
}


/* Animation settings */
#layer-02-fireworks3,
#layer-03-fireworks2,
#layer-04-fireworks1 {
  transform-origin: center center;
  animation: firework-bloom 4.8s ease-out infinite;
}
#layer-02-fireworks3 { animation-delay: 0s; }
#layer-03-fireworks2 { animation-delay: 1.1s; }
#layer-04-fireworks1 { animation-delay: 2.1s; }

#layer-05-note4,
#layer-06-note3,
#layer-07-note2,
#layer-08-note1 {
  transform-origin: center bottom;
  animation: note-bounce 2.2s ease-in-out infinite;
}
#layer-05-note4 { animation-delay: 0s; }
#layer-06-note3 { animation-delay: .35s; }
#layer-07-note2 { animation-delay: .7s; }
#layer-08-note1 { animation-delay: 1.05s; }

#layer-10-hitode2,
#layer-11-hitode1 {
  transform-origin: center center;
  animation: hitode-wiggle 3.8s ease-in-out infinite;
}
#layer-10-hitode2 { animation-delay: 0s; }
#layer-11-hitode1 { animation-delay: .9s; }

#layer-13-leaf3,
#layer-19-leaf2,
#layer-20-leaf1 {
  transform-origin: 50% 100%;
  animation: leaf-sway 3.6s ease-in-out infinite;
}
#layer-13-leaf3 { animation-delay: 0s; }
#layer-19-leaf2 { animation-delay: .65s; }
#layer-20-leaf1 { animation-delay: 1.1s; }

#layer-14-flower2,
#layer-15-flower1 {
  transform-origin: center center;
  animation: flower-spin-pop 4.2s ease-in-out infinite;
}
#layer-14-flower2 { animation-delay: 0s; }
#layer-15-flower1 { animation-delay: 1.2s; }

#layer-16-balloon {
  transform-origin: center center;
  animation: balloon-float 5.4s ease-in-out infinite;
}

#layer-17-sun {
  transform-origin: center center;
  animation: sun-happy 4.6s ease-in-out infinite;
}

#layer-18-title,
#layer-22-logo {
  transform-origin: center center;
  animation: title-zunjaka 2.3s ease-in-out infinite;
}
#layer-18-title { animation-delay: 0s; }
#layer-22-logo { animation-delay: .4s; }

@keyframes firework-bloom {
  0% {
    opacity: 0;
    transform: scale(.08);
  }
  12% {
    opacity: 1;
    transform: scale(.28);
  }
  28% {
    opacity: 1;
    transform: scale(1.12);
  }
  42% {
    opacity: 1;
    transform: scale(1);
  }
  70% {
    opacity: 1;
    transform: scale(1.03);
  }
  100% {
    opacity: 0;
    transform: scale(1.18);
  }
}

@keyframes note-bounce {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  20% {
    transform: translateY(-8%) rotate(-8deg) scale(1.03);
  }
  40% {
    transform: translateY(0) rotate(6deg) scale(.98);
  }
  60% {
    transform: translateY(-15%) rotate(-5deg) scale(1.06);
  }
  80% {
    transform: translateY(-4%) rotate(4deg) scale(1.01);
  }
}

@keyframes hitode-wiggle {
  0%, 100% {
    transform: rotate(0deg) scale(1);
  }
  25% {
    transform: rotate(-7deg) scale(1.05);
  }
  50% {
    transform: rotate(5deg) scale(.96);
  }
  75% {
    transform: rotate(-4deg) scale(1.08);
  }
}

@keyframes leaf-sway {
  0%, 100% {
    transform: rotate(0deg) translateY(0);
  }
  25% {
    transform: rotate(-4deg) translateY(-1%);
  }
  50% {
    transform: rotate(3deg) translateY(0);
  }
  75% {
    transform: rotate(-2deg) translateY(-1%);
  }
}

@keyframes flower-spin-pop {
  0%, 100% {
    transform: rotate(0deg) scale(1);
  }
  20% {
    transform: rotate(-6deg) scale(1.03);
  }
  50% {
    transform: rotate(7deg) scale(1.09);
  }
  75% {
    transform: rotate(-4deg) scale(.98);
  }
}

@keyframes balloon-float {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  25% {
    transform: translate3d(2%, -5%, 0) rotate(-2deg);
  }
  50% {
    transform: translate3d(-1%, -9%, 0) rotate(2deg);
  }
  75% {
    transform: translate3d(-2%, -4%, 0) rotate(-1deg);
  }
}

@keyframes sun-happy {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  20% {
    transform: translateY(-4%) rotate(-5deg) scale(1.04);
  }
  50% {
    transform: translateY(3%) rotate(6deg) scale(.98);
  }
  75% {
    transform: translateY(-2%) rotate(-4deg) scale(1.07);
  }
}

@keyframes title-zunjaka {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  15% {
    transform: translateY(-2%) rotate(-1.5deg) scale(1.02);
  }
  30% {
    transform: translateY(1%) rotate(1.2deg) scale(.995);
  }
  45% {
    transform: translateY(-3%) rotate(-1.8deg) scale(1.03);
  }
  60% {
    transform: translateY(1%) rotate(1deg) scale(1);
  }
  75% {
    transform: translateY(-1.5%) rotate(-.8deg) scale(1.015);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kv-layer {
    animation: none !important;
    transform: none !important;
  }
}