:root {
  --coconika-paper: #f7f5f0;
  --coconika-ink: #191311;
}

html.coconika-opening-active,
html.coconika-opening-active body {
  overflow: hidden;
  overscroll-behavior: none;
}

.coconika-opening {
  align-items: center;
  background: var(--coconika-paper);
  display: flex;
  inset: 0;
  justify-content: center;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  visibility: hidden;
  z-index: 2147483000;
}

.coconika-opening.is-ready {
  opacity: 1;
  visibility: visible;
}

.coconika-opening.is-leaving {
  opacity: 0;
  transition: opacity 620ms cubic-bezier(.65, 0, .35, 1);
}

.coconika-opening__logo {
  height: auto;
  opacity: 0;
  position: relative;
  transform: translateY(14px) scale(.9);
  width: clamp(190px, 24vw, 360px);
  z-index: 5;
}

.coconika-opening.is-playing .coconika-opening__logo {
  animation: coconika-logo-in 820ms cubic-bezier(.2, .8, .2, 1) 780ms forwards;
}

.coconika-opening__mascot {
  height: auto;
  max-width: none;
  opacity: 0;
  position: absolute;
  transform-origin: 50% 75%;
  will-change: transform, opacity;
}

.coconika-opening__mascot--blue {
  left: -2vw;
  top: -4vh;
  transform: translate(-45%, -45%) rotate(-18deg) scale(.35);
  width: clamp(150px, 21vw, 360px);
}

.coconika-opening__mascot--green {
  right: -3vw;
  top: -4vh;
  transform: translate(45%, -45%) rotate(15deg) scale(.35);
  width: clamp(240px, 34vw, 580px);
}

.coconika-opening__mascot--pink {
  bottom: -7vh;
  left: -3vw;
  transform: translate(-45%, 45%) rotate(13deg) scale(.35);
  width: clamp(250px, 34vw, 590px);
}

.coconika-opening__mascot--orange {
  bottom: -7vh;
  right: -3vw;
  transform: translate(45%, 45%) rotate(-12deg) scale(.35);
  width: clamp(220px, 29vw, 490px);
}

.coconika-opening.is-playing .coconika-opening__mascot--blue {
  animation: coconika-pop-blue 950ms cubic-bezier(.18, .89, .32, 1.28) 120ms forwards;
}

.coconika-opening.is-playing .coconika-opening__mascot--green {
  animation: coconika-pop-green 980ms cubic-bezier(.18, .89, .32, 1.28) 260ms forwards;
}

.coconika-opening.is-playing .coconika-opening__mascot--pink {
  animation: coconika-pop-pink 980ms cubic-bezier(.18, .89, .32, 1.28) 400ms forwards;
}

.coconika-opening.is-playing .coconika-opening__mascot--orange {
  animation: coconika-pop-orange 980ms cubic-bezier(.18, .89, .32, 1.28) 540ms forwards;
}

.coconika-opening__dot {
  border: 2px solid var(--coconika-ink);
  border-radius: 50%;
  opacity: 0;
  position: absolute;
}

.coconika-opening__dot--one {
  background: #ffd84c;
  height: 34px;
  left: 28%;
  top: 16%;
  width: 34px;
}

.coconika-opening__dot--two {
  background: #64b7eb;
  bottom: 18%;
  height: 22px;
  right: 29%;
  width: 22px;
}

.coconika-opening.is-playing .coconika-opening__dot {
  animation: coconika-dot-in 520ms ease-out 1.05s forwards;
}

.coconika-float {
  animation: coconika-float 3.4s ease-in-out infinite;
  transform-origin: 50% 70%;
}

.coconika-float--slow {
  animation-delay: -1.1s;
  animation-duration: 4.6s;
}

@keyframes coconika-logo-in {
  0% { opacity: 0; transform: translateY(14px) scale(.9); }
  65% { opacity: 1; transform: translateY(-2px) scale(1.035); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes coconika-pop-blue {
  0% { opacity: 0; transform: translate(-45%, -45%) rotate(-18deg) scale(.35); }
  72% { opacity: 1; transform: translate(3%, 3%) rotate(4deg) scale(1.06); }
  100% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
}

@keyframes coconika-pop-green {
  0% { opacity: 0; transform: translate(45%, -45%) rotate(15deg) scale(.35); }
  72% { opacity: 1; transform: translate(-3%, 3%) rotate(-3deg) scale(1.05); }
  100% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
}

@keyframes coconika-pop-pink {
  0% { opacity: 0; transform: translate(-45%, 45%) rotate(13deg) scale(.35); }
  72% { opacity: 1; transform: translate(3%, -3%) rotate(-3deg) scale(1.05); }
  100% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
}

@keyframes coconika-pop-orange {
  0% { opacity: 0; transform: translate(45%, 45%) rotate(-12deg) scale(.35); }
  72% { opacity: 1; transform: translate(-3%, -3%) rotate(3deg) scale(1.05); }
  100% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
}

@keyframes coconika-dot-in {
  0% { opacity: 0; transform: scale(0) rotate(-45deg); }
  75% { opacity: 1; transform: scale(1.18) rotate(8deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes coconika-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-1.5deg); }
  50% { transform: translate3d(0, -10px, 0) rotate(1.5deg); }
}

@media (max-width: 767px) {
  .coconika-opening__logo {
    width: min(54vw, 250px);
  }

  .coconika-opening__mascot--blue {
    left: -13vw;
    top: 2vh;
    width: min(44vw, 190px);
  }

  .coconika-opening__mascot--green {
    right: -24vw;
    top: 5vh;
    width: min(76vw, 330px);
  }

  .coconika-opening__mascot--pink {
    bottom: -1vh;
    left: -24vw;
    width: min(78vw, 340px);
  }

  .coconika-opening__mascot--orange {
    bottom: -3vh;
    right: -20vw;
    width: min(66vw, 285px);
  }

  .coconika-opening__dot--one {
    height: 24px;
    left: 23%;
    top: 27%;
    width: 24px;
  }

  .coconika-opening__dot--two {
    bottom: 28%;
    height: 18px;
    right: 23%;
    width: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .coconika-opening__logo,
  .coconika-opening__mascot,
  .coconika-opening__dot {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  .coconika-opening.is-leaving {
    transition-duration: 180ms;
  }

  .coconika-float {
    animation: none !important;
  }
}