/* La rosa y el ramo. Todas las capas comparten el mismo marco (400 × 520). */
.rose-stage {
  position: relative;
  width: min(92cqw, 70cqh);
  aspect-ratio: 400 / 520;
  margin: auto;
  user-select: none;
  -webkit-user-select: none;
}

.rose-stage > :not(.rose-shadow),
.rose-lift > .rose-real {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.rose-shadow {
  position: absolute;
  top: 14%;
  left: 50%;
  width: 86%;
  height: 44%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(70, 36, 12, 0.34), rgba(70, 36, 12, 0));
  opacity: 0;
  transform: translateX(-50%);
}

.rose-lines {
  overflow: visible;
}
.rose-lines path {
  fill: none;
  stroke: #b0811f;
  stroke-width: 1.6px;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 1.5px rgba(255, 200, 90, 0.65));
}

.rose-paint {
  clip-path: circle(0% at 50% 34%);
}
.rose-paint svg {
  width: 100%;
  height: 100%;
}

.rose-lift {
  transform-origin: 50% 60%;
  will-change: transform;
}

.rose-real {
  opacity: 0;
  pointer-events: none;
}

.bouquet {
  position: absolute;
  inset: 0;
}

.bouquet__flower {
  position: absolute;
  left: 50%;
  bottom: 2.7%;
  width: calc(var(--w) * 100%);
  height: auto;
  transform-origin: 50% 100%;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
}

.ribbon {
  position: absolute;
  left: 50%;
  top: 82%;
  width: 28%;
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0;
  filter: drop-shadow(0 2px 2px rgba(60, 30, 5, 0.35));
}

.rose-sparks {
  pointer-events: none;
}
.rose-spark {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px;
  border-radius: 50%;
  background: radial-gradient(circle, #fffbe6, #f5c45c 50%, rgba(245, 196, 92, 0) 72%);
  opacity: 0;
}

/* Estado final (también cuando se completa al instante) */
.rose-stage.is-complete .rose-lines path { stroke-dashoffset: 0; }
.rose-stage.is-complete .rose-lines { opacity: 0.22; }
.rose-stage.is-complete .rose-paint { opacity: 0; }
.rose-stage.is-complete .rose-real { opacity: 1; }
.rose-stage.is-complete .rose-shadow { opacity: 1; }
.rose-stage.is-complete .rose-lift { transform: translate3d(0, -5%, 0) scale(1.05); }
.rose-stage.is-complete .ribbon { opacity: 1; }
.rose-stage.is-complete .bouquet__flower {
  opacity: 1;
  transform: translateX(-50%) rotate(var(--angle)) scaleX(var(--flip));
}