/* Gather, settle, then wash the same card with the brand's cream/rose palette. */
.merge-scene{
  --composition-duration:2.4s;
  --waiting-width:min(86vw,375px,calc((100dvh - 210px)*.75),calc(68dvh*.75));
  opacity:1;visibility:visible;
  transition:opacity .32s ease,visibility 0s;
}
.merge-scene .merge-card,.merged-preview{
  position:absolute;left:50%;top:50%;width:var(--waiting-width);height:auto;
  aspect-ratio:3/4;max-height:none;border-radius:26px;
  transform:translate3d(-50%,-50%,0);overflow:hidden;
}
.merge-scene .merge-card{
  animation:gatherOnce var(--composition-duration) cubic-bezier(.22,.8,.24,1) both!important;
  box-shadow:0 16px 38px #79626c1f;will-change:transform,opacity;
}
@keyframes gatherOnce{
  0%{opacity:1;transform:translate3d(calc(-50% + var(--fan-x)*.55),-50%,0) rotate(var(--fan-rot)) scale(.82)}
  48%{opacity:1;transform:translate3d(-50%,-50%,0) rotate(0deg) scale(.99)}
  68%{opacity:1;transform:translate3d(-50%,-50%,0) scale(1)}
  100%{opacity:0;transform:translate3d(-50%,-50%,0) scale(1)}
}
.merge-scene .merge-card svg{animation:gatherInk var(--composition-duration) ease both}
@keyframes gatherInk{0%,42%{opacity:1}70%,100%{opacity:0}}
.merged-preview{
  z-index:5;background:linear-gradient(160deg,#f3e4e7,#fbf3ed);border:0;overflow:visible;
  box-shadow:0 20px 48px #a1748121,0 3px 12px #98727e12;
  animation:mergedArrive var(--composition-duration) ease both;isolation:isolate;
}
.merged-preview:before,.merged-preview:after{
  content:'';position:absolute;border-radius:inherit;pointer-events:none;z-index:3;
}
.merged-preview:after{inset:0;border:1px solid #fff4ef70;filter:blur(1.1px)}
.merged-preview:before{
  inset:-1px;box-shadow:0 0 9px 2px #e0adbc80,inset 0 0 5px 1px #fff7f080;
  opacity:.3;animation:waitingEdgeBreathe 5.6s ease-in-out infinite;
}
@keyframes waitingEdgeBreathe{0%,100%{opacity:.2}50%{opacity:.6}}
@keyframes mergedArrive{0%,44%{opacity:0}72%,100%{opacity:1}}
.merge-scene.is-composed .merge-card{animation:none!important;opacity:0;transform:translate3d(-50%,-50%,0)}
.merge-scene.is-composed .merge-card svg{animation:none;opacity:0}
.merge-scene.is-composed .merged-preview{animation:none;opacity:1}
.generation-fluid{
  position:absolute;inset:0;background:#f2e5e3;overflow:hidden;border-radius:inherit;isolation:isolate;
  animation:fluidReveal var(--composition-duration) cubic-bezier(.25,.1,.25,1) both;
}
@keyframes fluidReveal{0%,58%{opacity:0;transform:scale(1.04)}100%{opacity:1;transform:scale(1)}}
.merge-scene.is-composed .generation-fluid{animation:none;opacity:1;transform:none}
.fluid-plane{display:block;position:absolute;inset:-34%;filter:blur(22px);will-change:transform,opacity;backface-visibility:hidden}
.fluid-rose{background:radial-gradient(ellipse at 46% 36%,#e4b8c2 8%,#d6a1b2 34%,#d6a1b200 69%);animation:fluidRose 9.4s ease-in-out infinite}
.fluid-cream{z-index:2;background:radial-gradient(ellipse at 44% 40%,#fffaf4 8%,#faece3f0 30%,#faece300 63%);animation:fluidCream 10.8s ease-in-out infinite}
.fluid-blush{background:radial-gradient(ellipse at 55% 43%,#ebc8c4 5%,#e2b2bbdf 32%,#e2b2bb00 67%);animation:fluidBlush 11.6s ease-in-out infinite}
.fluid-mauve{background:radial-gradient(ellipse at 44% 54%,#b58b9b 12%,#c29aa8cf 37%,#c29aa800 68%);animation:fluidMauve 10.2s ease-in-out infinite}
@keyframes fluidRose{
  0%,100%{transform:translate3d(-8%,-18%,0) rotate(-12deg) scale(1.1);opacity:.95}
  38%{transform:translate3d(17%,8%,0) rotate(24deg) scale(1.18);opacity:.88}
  72%{transform:translate3d(-12%,22%,0) rotate(-20deg) scale(1.02);opacity:1}
}
@keyframes fluidCream{
  0%,100%{transform:translate3d(-28%,-24%,0) rotate(-16deg) scale(.86);opacity:.88}
  34%{transform:translate3d(24%,28%,0) rotate(28deg) scale(1.04);opacity:.58}
  70%{transform:translate3d(8%,-27%,0) rotate(52deg) scale(1.06);opacity:.92}
}
@keyframes fluidBlush{
  0%,100%{transform:translate3d(26%,-8%,0) rotate(20deg) scale(.94);opacity:.86}
  40%{transform:translate3d(-17%,-24%,0) rotate(-15deg) scale(1.14);opacity:1}
  74%{transform:translate3d(18%,23%,0) rotate(35deg) scale(.88);opacity:.64}
}
@keyframes fluidMauve{
  0%,100%{transform:translate3d(-8%,36%,0) rotate(-28deg) scale(.94);opacity:.98}
  36%{transform:translate3d(-25%,-21%,0) rotate(24deg) scale(1.12);opacity:.95}
  72%{transform:translate3d(30%,12%,0) rotate(60deg) scale(.98);opacity:.88}
}
.generation-screen.checking .merge-scene:after{content:none}
.generation-screen.complete .merge-scene{
  display:block;opacity:0;visibility:hidden;transition:opacity .32s ease,visibility 0s .32s;
}
.generation-screen.complete .fluid-plane,.generation-screen.complete .merged-preview:before{animation-play-state:paused}
.result-photo-card{width:min(86vw,375px,calc((100dvh - 210px)*.75),calc(68dvh*.75));height:auto;max-height:none}
@media(prefers-reduced-motion:reduce){
  .merge-scene .merge-card{animation:none!important;opacity:0}
  .merged-preview{animation:none!important;opacity:1}
  .generation-fluid,.fluid-plane,.merged-preview:before,.merge-scene .merge-card svg{animation:none!important;will-change:auto}
  .generation-fluid{opacity:1;transform:none}
  .merge-scene,.generation-screen.complete .merge-scene,.result-photo-card{transition:none!important}
}