/* ============================
   🎈 NUMBER BALLOONS
============================ */

.balloon-wrap{
  position:absolute;
  bottom:-240px;
  width:160px;
  height:320px;
  display:flex;
  flex-direction:column;
  align-items:center;
  animation: balloonDream 14s ease-in-out forwards;
   /* opsiyonel: tıklamayı engellemesin */
  pointer-events: none;

  /* stage'in üstünde dursun diye */
  z-index: 0;
}

@keyframes balloonDream{
  0%{   transform: translate(0,0) rotate(-2deg); opacity:0; }
  10%{  opacity:1; }
  25%{  transform: translate(-12px,-140px) rotate(2deg); }
  45%{  transform: translate(14px,-320px) rotate(-3deg); }
  65%{  transform: translate(-18px,-520px) rotate(2deg); }
  85%{  transform: translate(10px,-720px) rotate(-2deg); }
  100%{ transform: translate(-6px,-920px) rotate(1deg); opacity:0; }
}

@keyframes balloonRise{
  from{ transform: translateY(0); }
  to{ transform: translateY(-120vh); }
}

/* Number balloon */

.balloon-num{
  font-size:140px;
  font-weight:900;
  line-height:1;
  color:white;
  position:relative;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.35));
}

.balloon-num.two{
  color:#6ee7ff;
}

.balloon-num.three{
  color:#ff5fa2;
}

.balloon-num::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.8), transparent 40%);
  pointer-events:none;
}

/* String (SVG look) */

.balloon-string{
  width:2px;
  height:80px;
  background: rgba(255,255,255,.6);
  margin: 0 auto;
  animation: stringWave 2.6s ease-in-out infinite;
  transform-origin: top;
}

@keyframes stringWave{
  0%{ transform: rotate(2deg); }
  50%{ transform: rotate(-3deg); }
  100%{ transform: rotate(2deg); }
}
/* ============================
   🐱 CARTOON CAT
============================ */

.cat{
  width:70px;
  height:60px;
  background:#fff;
  border-radius:20px;
  position:relative;
  margin-top:6px;
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}

.cat .ear{
  position:absolute;
  top:-12px;
  width:18px;
  height:18px;
  background:#fff;
  transform: rotate(45deg);
}

.cat .ear.left{ left:8px; }
.cat .ear.right{ right:8px; }

.cat .eye{
  width:6px;
  height:6px;
  background:#222;
  border-radius:50%;
  position:absolute;
  top:22px;
}

.cat .eye.left{ left:20px; }
.cat .eye.right{ right:20px; }

.cat .nose{
  width:8px;
  height:6px;
  background:#ff8a9e;
  position:absolute;
  top:30px;
  left:50%;
  transform:translateX(-50%);
  border-radius:4px;
}

.cat .tail{
  position:absolute;
  right:-18px;
  bottom:6px;
  width:28px;
  height:6px;
  background:#fff;
  border-radius:6px;
  animation: tailSwing 1.8s ease-in-out infinite;
  transform-origin: top;
}

@keyframes tailSwing{
  0%{ transform: rotate(12deg); }
  50%{ transform: rotate(-18deg); }
  100%{ transform: rotate(12deg); }
}