.cc_ygsyvcoo_x5IySKAkO7 .hira-fx, .cc_ygsyvcoo_zoJgWY8bEE .hira-fx, .cc_ygsyvcoo_lE5HksVGAq .hira-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.cc_ygsyvcoo_x5IySKAkO7 .hira-fx__bubble, .cc_ygsyvcoo_zoJgWY8bEE .hira-fx__bubble, .cc_ygsyvcoo_lE5HksVGAq .hira-fx__bubble {
  position: absolute;
  border-radius: 50%;
  border: 2px solid var(--color-bg);
  background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--color-bg) 45%, transparent) 0 12%, transparent 13%);
  animation-name: cc_ygsyvcoo_hiraRise;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.cc_ygsyvcoo_x5IySKAkO7 .hira-fx__twinkle, .cc_ygsyvcoo_zoJgWY8bEE .hira-fx__twinkle, .cc_ygsyvcoo_lE5HksVGAq .hira-fx__twinkle {
  position: absolute;
  background: var(--color-bg);
  animation-name: cc_ygsyvcoo_hiraTwinkle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@media (prefers-reduced-motion: reduce) {
  .cc_ygsyvcoo_x5IySKAkO7 .hira-fx__bubble, .cc_ygsyvcoo_zoJgWY8bEE .hira-fx__bubble, .cc_ygsyvcoo_lE5HksVGAq .hira-fx__bubble, .cc_ygsyvcoo_x5IySKAkO7 .hira-fx__twinkle, .cc_ygsyvcoo_zoJgWY8bEE .hira-fx__twinkle, .cc_ygsyvcoo_lE5HksVGAq .hira-fx__twinkle {
    animation: none;
  }
  .cc_ygsyvcoo_x5IySKAkO7 .hira-fx__twinkle, .cc_ygsyvcoo_zoJgWY8bEE .hira-fx__twinkle, .cc_ygsyvcoo_lE5HksVGAq .hira-fx__twinkle {
    opacity: 0.5;
    transform: rotate(45deg) scale(0.6);
  }
}

/* Same stylesheet as the animations that use them (see UrunDetay): otherwise the platform's keyframes scoping
   leaves the animation pointing at nothing and the bubbles / sparkles never move. */
@keyframes hiraRise {
  0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: translate(18px, -50vh) scale(1); }
  100% { transform: translate(-10px, -110vh) scale(1.1); opacity: 0; }
}

@keyframes hiraTwinkle {
  0%, 100% { transform: rotate(45deg) scale(0); opacity: 0; }
  50% { transform: rotate(45deg) scale(1); opacity: 1; }
}