.hero-growth-animation {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  --hero-anim-scale: 1.16;
  --hero-anim-shift-x: -64px;
  transform: translateX(var(--hero-anim-shift-x)) scale(var(--hero-anim-scale));
  transform-origin: center center;
}

.growth-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  display: block;
}

.growth-layer.ghost { z-index: 1; }
#layerBar1 { z-index: 5; }
#layerBar2 { z-index: 6; }
#layerBar3 { z-index: 7; }
#layerBar4 { z-index: 8; }
#layerFranja { z-index: 9; }
.tip-glow-dot { z-index: 10; }

.growth-layer.ghost {
  mix-blend-mode: multiply;
  will-change: opacity, transform, filter;
}

.growth-layer.bar-main,
.growth-layer.franja-main {
  will-change: opacity, transform, filter;
}

#layerFranja {
  will-change: clip-path, opacity, transform, filter;
}

.tip-glow-dot {
  position: absolute;
  right: 8.6%;
  top: 25.5%;
  width: clamp(86px, 6.5vw, 124px);
  height: clamp(86px, 6.5vw, 124px);
  border-radius: 999px;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(41, 168, 255, 0.36) 0%,
    rgba(41, 168, 255, 0.15) 30%,
    rgba(20, 100, 255, 0.07) 52%,
    transparent 76%
  );
  mix-blend-mode: screen;
  filter: blur(13px);
  will-change: opacity, transform;
}

@media (max-width: 1200px) {
  .hero-growth-animation {
    --hero-anim-scale: 1.1;
    --hero-anim-shift-x: -44px;
  }
}

@media (max-width: 860px) {
  .hero-growth-animation {
    --hero-anim-scale: 1;
    --hero-anim-shift-x: 0px;
    max-height: 260px;
  }
}

@media (max-width: 480px) {
  .hero-growth-animation {
    --hero-anim-scale: 0.9;
    --hero-anim-shift-x: 0px;
    max-height: 200px;
  }
  .tip-glow-dot {
    width: 60px;
    height: 60px;
  }
}