/* Result page FX + animations */

/* FX canvas behind content */
#fx{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Reveal animation */
.reveal-text{
  opacity: 0;
  transform: scale(.92) translateY(6px);
  filter: blur(2px);
  transition: opacity .55s ease, transform .55s ease, filter .55s ease;
}
.reveal-loader{
  transition: opacity .35s ease, transform .35s ease;
}
.reveal.is-revealed .reveal-text{
  opacity: 1;
  transform: scale(1) translateY(0);
  filter: blur(0);
}
.reveal.is-revealed .reveal-loader{
  opacity: .15;
  transform: scale(.98);
}

/* Boom ring */
.boom{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,0);
  position: absolute;
  left: 50%;
  top: 120px;
  transform: translateX(-50%) scale(.2);
  opacity: 0;
  pointer-events: none;
}
.boom.boom-go{ animation: boom 700ms ease-out forwards; }
@keyframes boom{
  0%{ opacity:0; transform:translateX(-50%) scale(.2); border-color:rgba(255,255,255,0); }
  25%{ opacity:1; border-color:rgba(255,255,255,.85); }
  100%{ opacity:0; transform:translateX(-50%) scale(18); border-color:rgba(255,255,255,0); }
}

/* Battery (keeps your old HTML structure) */
.wrapperBattery{ width: 200px; margin: 30px auto; }
.battery{
  position: relative;
  display: block;
  margin: 20px 65px;
  background: transparent;
  width: 10px;
  height: 28px;
  float: left;
}
.battery:before{
  content: "";
  display: block;
  background: transparent;
  border: 6px solid #000;
  margin: -12px;
  width: 85px;
  height: 40px;
  position: absolute;
  border-radius: 2px;
  z-index: 2;
}
.battery:after{
  content: "";
  display: block;
  background: transparent;
  border: 4px solid #000;
  margin: 0 80px;
  width: 6px;
  height: 16px;
  position: absolute;
  border-radius: 2px;
  z-index: 1;
}

/* Charging fill uses theme accent and runs once to match reveal timing */
@keyframes charging{
  from{ width: 0; background: #fff; }
  to{ width: 72px; background: var(--accent); }
}
.charging{ animation: charging 3.2s ease-in-out 1 forwards; }

@keyframes glow{ from{opacity:0;} to{opacity:1;} }
.glow{ animation: glow 1.6s ease-in-out infinite alternate; }
.charging_txt{
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-style: italic;
  text-align: center;
  clear: both;
  color: #000;
}

/* Balloons wrapper */
.balloons{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:16px;
  margin-top:12px;
}

/* Random-ish drift without JS */
.balloon{
  width: clamp(70px, 14vw, 120px);
  height: clamp(90px, 18vw, 145px);
  background: var(--balloon);
  border-radius: 80%;
  position: relative;
  box-shadow: inset -10px -10px 0 rgba(0,0,0,0.07);
  margin: 12px;
  z-index: 1;

  transform-origin: bottom center;
  animation: balloon-float var(--dur, 4s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform;

  transition: transform 1.2s cubic-bezier(.2,.8,.2,1), opacity .6s ease, filter .6s ease;
}

@keyframes balloon-float{
  0%,100%{ transform: translate(var(--x1,0px), 0px) rotate(calc(var(--rot,4deg) * -1)); }
  50%{ transform: translate(var(--x2,0px), calc(var(--lift,25px) * -1)) rotate(var(--rot,4deg)); }
}

/* Knot */
.balloon::before{
  content:"▲";
  font-size: 18px;
  color: var(--balloon-knot);
  position:absolute;
  left:0; right:0;
  bottom:-14px;
  text-align:center;
  z-index:2;
}

/* String */
.balloon::after{
  content:"";
  position:absolute;
  left:50%;
  top:100%;
  transform:translateX(-50%);
  height:220px;
  width:2px;
  background: var(--balloon-string);
  opacity:.85;
}

/* drift presets */
.balloon:nth-child(1){ --dur: 4.3s; --delay: -0.6s; --rot: 5deg; --lift: 26px; --x1:-2px; --x2: 6px; }
.balloon:nth-child(2){ --dur: 3.7s; --delay: -1.2s; --rot: 3deg; --lift: 20px; --x1: 3px; --x2:-7px; }
.balloon:nth-child(3){ --dur: 5.1s; --delay: -0.2s; --rot: 6deg; --lift: 30px; --x1:-6px; --x2: 2px; }
.balloon:nth-child(4){ --dur: 4.6s; --delay: -1.8s; --rot: 4deg; --lift: 24px; --x1: 5px; --x2: 10px; }
.balloon:nth-child(5){ --dur: 6.0s; --delay: -0.9s; --rot: 7deg; --lift: 34px; --x1:-1px; --x2:-10px; }
.balloon:nth-child(6){ --dur: 3.9s; --delay: -2.1s; --rot: 2deg; --lift: 18px; --x1: 8px; --x2: -2px; }
.balloon:nth-child(7){ --dur: 5.4s; --delay: -0.4s; --rot: 5deg; --lift: 28px; --x1:-10px;--x2: 1px; }
.balloon:nth-child(8){ --dur: 4.1s; --delay: -1.5s; --rot: 3deg; --lift: 22px; --x1: 2px; --x2: 8px; }

/* POP + fly-away on reveal */
.reveal.is-revealed .balloon{
  opacity: 0;
  filter: blur(2px);
  animation: balloon-pop 0.6s ease-out forwards;
}

.reveal.is-revealed .balloon:nth-child(1){ --bx:-120px; --by:-280px; animation-delay:.05s; }
.reveal.is-revealed .balloon:nth-child(2){ --bx:  80px; --by:-260px; animation-delay:.10s; }
.reveal.is-revealed .balloon:nth-child(3){ --bx:-200px; --by:-320px; animation-delay:.15s; }
.reveal.is-revealed .balloon:nth-child(4){ --bx: 160px; --by:-300px; animation-delay:.20s; }
.reveal.is-revealed .balloon:nth-child(5){ --bx:-60px;  --by:-360px; animation-delay:.25s; }
.reveal.is-revealed .balloon:nth-child(6){ --bx: 220px; --by:-340px; animation-delay:.30s; }
.reveal.is-revealed .balloon:nth-child(7){ --bx:-260px; --by:-300px; animation-delay:.35s; }
.reveal.is-revealed .balloon:nth-child(8){ --bx: 120px; --by:-380px; animation-delay:.40s; }

@keyframes balloon-pop{
  0%{ transform: translate(0,0) scale(1); opacity: 1; }
  40%{ transform: translate(0,-20px) scale(1.08); opacity: 1; }
  100%{ transform: translate(var(--bx), var(--by)) scale(0.2) rotate(35deg); opacity: 0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .charging{ animation: none; }
  .boom.boom-go{ animation: none; opacity: 0; }
  .balloon{ animation: none; }
  .reveal.is-revealed .balloon{ animation: none; opacity: 0; }
}