/* Success page styles and balloon animation */
.success-container{
  max-width:900px;
  margin:3rem auto;
  padding:2rem 1.25rem;
  border-radius:12px;
  background:linear-gradient(180deg,#f7fff7,#e8fff0);
  border:1px solid #c8f0c8;
  position:relative;
  overflow:hidden;
}
.success-container .message{position:relative;z-index:10;text-align:center}
.success-container h1{margin:0 0 .5rem;font-size:1.8rem;color:#0a7a0a}
.success-container p{margin:0;color:#113311}

.balloons{position:absolute;left:0;right:0;bottom:0;top:0;pointer-events:none;overflow:hidden}
.balloon{
  width:44px;height:60px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;position:absolute;left:50%;transform:translateX(-50%);bottom:-80px;opacity:0;z-index:5
}

/* create variations using nth-child-like classes balloon-0..7 */
.balloon-0{left:6%;background:#ff6b6b;animation:floatUp 6s ease-in-out infinite;animation-delay:0s}
.balloon-1{left:18%;background:#ffd166;animation:floatUp 5.5s ease-in-out infinite;animation-delay:0.5s}
.balloon-2{left:30%;background:#06d6a0;animation:floatUp 6.5s ease-in-out infinite;animation-delay:1s}
.balloon-3{left:45%;background:#118ab2;animation:floatUp 5.8s ease-in-out infinite;animation-delay:0.3s}
.balloon-4{left:60%;background:#a66cf7;animation:floatUp 6.2s ease-in-out infinite;animation-delay:1.2s}
.balloon-5{left:74%;background:#ff66b3;animation:floatUp 5.6s ease-in-out infinite;animation-delay:0.4s}
.balloon-6{left:86%;background:#ffd54f;animation:floatUp 6.8s ease-in-out infinite;animation-delay:0.9s}
.balloon-7{left:92%;background:#6ec1ff;animation:floatUp 5.3s ease-in-out infinite;animation-delay:0.7s}

/* subtle string using ::after pseudo-element */
.balloon::after{content:'';position:absolute;left:50%;transform:translateX(-50%);top:calc(100% - 4px);width:2px;height:18px;background:rgba(0,0,0,0.06);border-radius:1px}

@keyframes floatUp{
  0%{transform:translateX(-50%) translateY(0) scale(0.9);opacity:0}
  10%{opacity:1}
  50%{transform:translateX(-50%) translateY(-40vh) scale(1)}
  90%{opacity:0.6}
  100%{transform:translateX(-50%) translateY(-110vh) scale(1.05);opacity:0}
}

/* responsive size tweaks */
@media (max-width:480px){
  .balloon{width:36px;height:48px}
  .success-container{padding:1.5rem}
}