.tmpl-celestial-clouds .film-intro {
  --hint-bottom: 8%;
}

.tmpl-celestial-clouds .balloon-trigger {
  position: absolute;
  z-index: 5;
  top: 48%;
  left: 50%;
  display: block;
  width: clamp(172px, 48vw, 270px);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  appearance: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transform: translate(-50%, -50%);
}

.tmpl-celestial-clouds .balloon-trigger img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 16px 20px rgba(24, 35, 66, 0.22));
  transform-origin: center 76%;
  animation: cc-balloon-float 4.2s ease-in-out infinite;
  user-select: none;
}

.tmpl-celestial-clouds .balloon-tether {
  position: absolute;
  z-index: 6;
  top: calc(48% + clamp(109px, 30.6vw, 172px) - 8px);
  bottom: calc(var(--hint-bottom, 8%) + 27px);
  left: calc(50% - 90px);
  width: 90px;
  pointer-events: none;
  overflow: visible;
}

.tmpl-celestial-clouds .balloon-tether svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.tmpl-celestial-clouds .balloon-tether__shadow,
.tmpl-celestial-clouds .balloon-tether__cord {
  fill: none;
  stroke-linecap: round;
}

.tmpl-celestial-clouds .balloon-tether__shadow {
  stroke: rgba(24, 48, 70, 0.55);
  stroke-width: 3.2;
}

.tmpl-celestial-clouds .balloon-tether__cord {
  stroke: #f3e6d0;
  stroke-width: 1.5;
}

.tmpl-celestial-clouds .film-intro.balloon-departing .balloon-tether {
  animation: cc-tether-release 1.15s ease-in forwards;
}

.tmpl-celestial-clouds .film-intro.playing .open-hint {
  visibility: visible;
  animation: cc-hint-release 1.15s ease-out forwards;
  transition: none;
}

@keyframes cc-tether-release {
  0% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
  100% {
    clip-path: inset(0 0 100% 0);
    opacity: 0;
  }
}

@keyframes cc-hint-release {
  0%,
  55% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(8px);
  }
}

.tmpl-celestial-clouds .balloon-trigger:hover img {
  filter: drop-shadow(0 20px 24px rgba(24, 35, 66, 0.3));
}

.tmpl-celestial-clouds .balloon-trigger:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.95);
  outline-offset: 8px;
}

.tmpl-celestial-clouds .film-intro.balloon-departing .balloon-trigger {
  pointer-events: none;
  will-change: transform, opacity;
  animation: cc-balloon-depart 1.8s linear forwards;
}

.tmpl-celestial-clouds .film-intro.playing .balloon-trigger,
.tmpl-celestial-clouds .film-intro.finished .balloon-trigger {
  pointer-events: none;
}

@keyframes cc-balloon-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-1deg);
  }
  50% {
    transform: translate3d(0, -12px, 0) rotate(1deg);
  }
}

@keyframes cc-balloon-depart {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0) scale(1);
  }
  25% {
    opacity: 1;
    transform: translate(calc(-50% + 1vw), calc(-50% - 18vh)) rotate(2deg) scale(0.76);
  }
  52% {
    opacity: 1;
    transform: translate(calc(-50% - 1vw), calc(-50% - 38vh)) rotate(-1.8deg) scale(0.42);
  }
  76% {
    opacity: 0.78;
    transform: translate(calc(-50% + 7vw), calc(-50% - 55vh)) rotate(1.5deg) scale(0.16);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + 17vw), calc(-50% - 72vh)) rotate(-1deg) scale(0.02);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tmpl-celestial-clouds .balloon-trigger img {
    animation: none;
  }

  .tmpl-celestial-clouds .film-intro.balloon-departing .balloon-trigger {
    animation: none;
    opacity: 0;
  }

  .tmpl-celestial-clouds .film-intro.balloon-departing .balloon-tether {
    animation: none;
    opacity: 0;
  }
}