/* ============================================================
   BLOOM & YOU — animations & motion
   ============================================================ */

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pop-in {
  from { opacity: 0; transform: scale(0.94) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes sheet-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes petal-fall {
  0%   { transform: translateY(-10vh) rotate(0deg) translateX(0); opacity: 0; }
  10%  { opacity: 0.8; }
  50%  { transform: translateY(45vh) rotate(180deg) translateX(28px); }
  90%  { opacity: 0.7; }
  100% { transform: translateY(105vh) rotate(360deg) translateX(-16px); opacity: 0; }
}

@keyframes dash-spin {
  to { stroke-dashoffset: -112; }
}

/* flower drop-in (add to bouquet) — runs on the inner group so it never
   overrides the outer group's positioning transform */
.object-inner {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
@keyframes bloom-in {
  0%   { opacity: 0; transform: scale(0.2) rotate(-24deg); }
  60%  { opacity: 1; transform: scale(1.08) rotate(6deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
.bloom-in { animation: bloom-in 620ms var(--ease-spring) both; }

/* flight: from the picker card into its place in the bouquet */
@keyframes bloom-fly {
  0%   { transform: translate(var(--fx, 0px), var(--fy, 0px)) scale(0.3) rotate(-20deg); opacity: 0.15; }
  50%  { opacity: 1; }
  72%  { transform: translate(0, 0) scale(1.14) rotate(6deg); opacity: 1; }
  100% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
}
.bloom-fly { animation: bloom-fly 760ms var(--ease-spring) both; }

/* final-bouquet reactions */
@keyframes nudge {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-7deg); }
  55%      { transform: rotate(5deg); }
  80%      { transform: rotate(-2deg); }
}
.nudge { animation: nudge 700ms var(--ease-soft); transform-box: fill-box; transform-origin: 50% 100%; }

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  20%      { transform: rotate(-10deg); }
  48%      { transform: rotate(8deg); }
  72%      { transform: rotate(-4deg); }
}
.wiggle { animation: wiggle 800ms var(--ease-spring); transform-box: fill-box; transform-origin: 50% 20%; }

@keyframes wiggle-soft {
  0%, 100% { transform: rotate(0deg); }
  35%      { transform: rotate(1.6deg); }
  70%      { transform: rotate(-1.2deg); }
}
.wiggle-soft { animation: wiggle-soft 900ms var(--ease-soft); transform-box: fill-box; transform-origin: 50% 0%; }

@keyframes sway-pulse {
  0%, 100% { transform: rotate(0deg); }
  30%      { transform: rotate(1.7deg); }
  65%      { transform: rotate(-1.3deg); }
}
.sway-pulse { animation: sway-pulse 950ms var(--ease-soft); transform-origin: 50% 70%; }

/* wrap settles when a new paper is chosen */
@keyframes wrap-in {
  0%   { transform: scale(0.94) translateY(8px); opacity: 0.45; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.wrap-in { animation: wrap-in 520ms var(--ease-soft); transform-box: fill-box; transform-origin: 50% 0%; }

/* ribbon is tied on from behind and settles with a bounce */
@keyframes ribbon-in {
  0%   { transform: scale(0.55) translateY(-16px); opacity: 0; }
  62%  { transform: scale(1.09) translateY(0); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.ribbon-in { animation: ribbon-in 640ms var(--ease-spring); transform-box: fill-box; transform-origin: 50% 30%; }

/* cinematic entrance: the bouquet grows into the cleared stage */
.is-reveal .stage-wrap { animation: reveal-grow 900ms var(--ease-soft) both; }
@keyframes reveal-grow {
  from { transform: scale(0.93); }
  to   { transform: scale(1); }
}

/* per-flower micro motion — only on the finished bouquet, so editing stays
   calm and we never run 30 SVG animations while the user is arranging */
.micro-head {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.is-reveal .micro-rose .micro-head   { animation: micro-pulse 5.4s ease-in-out infinite; }
.is-reveal .micro-tulip .micro-head  { animation: micro-sway 4.6s ease-in-out infinite; transform-origin: 50% 100%; }
.is-reveal .micro-peony .micro-head  { animation: micro-pulse 6.2s ease-in-out infinite; }
.is-reveal .micro-daisy .micro-head  { animation: micro-wiggle 4.2s ease-in-out infinite; transform-origin: 50% 65%; }
.is-reveal .micro-sunflower .micro-head { animation: micro-turn 12s ease-in-out infinite; }
.is-reveal .micro-babys-breath .micro-head { animation: micro-drift 6.5s ease-in-out infinite; }
.is-reveal .micro-eucalyptus .micro-head { animation: micro-sway 6.8s ease-in-out infinite; transform-origin: 50% 100%; }
.is-reveal .micro-leaf .micro-head   { animation: micro-sway 7.4s ease-in-out infinite; transform-origin: 50% 100%; }

@keyframes micro-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}
@keyframes micro-sway {
  0%, 100% { transform: rotate(-2.4deg); }
  50%      { transform: rotate(2.4deg); }
}
@keyframes micro-wiggle {
  0%, 100% { transform: rotate(-3.2deg); }
  50%      { transform: rotate(3.2deg); }
}
@keyframes micro-turn {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}
@keyframes micro-drift {
  0%, 100% { transform: translate(0, 0); }
  33%      { transform: translate(2px, -3px); }
  66%      { transform: translate(-2px, 2px); }
}

/* reveal / cinematic */
@keyframes reveal-glow {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes sway-bouquet {
  0%, 100% { transform: rotate(-0.7deg) translateY(0); }
  50%      { transform: rotate(0.7deg) translateY(-4px); }
}
.is-reveal #bouquet-svg { animation: sway-bouquet 8s ease-in-out infinite; transform-origin: 50% 62%; }

/* fly-in path helper (JS sets transitions) */
.flying { will-change: transform, opacity; }

/* petal particle (reveal) */
.petal-particle {
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 62% 18% 62% 18%;
  background: linear-gradient(140deg, #fbd9df, #e9b0bd);
  opacity: 0.85;
  pointer-events: none;
  animation: petal-drift linear forwards;
}
@keyframes petal-drift {
  0%   { transform: translate(0, 0) rotate(0); opacity: 0; }
  12%  { opacity: 0.9; }
  100% { transform: translate(var(--dx, 40px), 46vh) rotate(320deg); opacity: 0; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .petal { display: none; }
  .micro-head { animation: none !important; }
  .is-reveal #bouquet-svg { animation: none; }
  .petal-particle { display: none; }
}