/* Four-second organic silhouette evolution, including a reduced-motion dissolve. */
.evolution-modal .modal{width:min(600px,94vw);max-height:94dvh;overflow:auto}
.evolution-scene{height:clamp(210px,35dvh,310px);overflow:hidden;border-radius:18px;background:radial-gradient(ellipse at 50% 55%,#26485a99,transparent 65%)}
.evolution-scene img{width:min(280px,75vw);height:100%;object-fit:contain;transform-origin:50% 60%;will-change:transform,opacity,filter,clip-path;backface-visibility:hidden}
.evolution-scene:before{content:'';position:absolute;inset:8%;border:1px solid #a7ddff55;border-radius:50%;background:transparent;box-shadow:inset 0 0 28px #8ed8ff22,0 0 25px #a7ddff22;opacity:0;z-index:0;pointer-events:none}
.evolution-scene img{z-index:2}
.evolution-scene.preview #evolutionBefore{opacity:1;filter:none;clip-path:inset(0)}
.evolution-scene.preview #evolutionAfter{opacity:0}
.evolution-scene.evolving #evolutionBefore{animation:form-out 4s linear both;z-index:2}
.evolution-scene.evolving #evolutionAfter{animation:form-in 4s linear both;z-index:3}
.evolution-scene.evolving:before{animation:form-ring 4s ease-in-out both}
.evolution-scene.evolving .evolution-halo{animation:form-halo 4s ease-in-out both}
.evolution-scene.complete:before{opacity:0;animation:none}
.evolution-scene.complete #evolutionBefore{opacity:0;animation:none}
.evolution-scene.complete #evolutionAfter{opacity:1;clip-path:inset(0);animation:form-reveal .35s ease-out both;filter:drop-shadow(0 0 12px #a9e5ff99)}
/* Polygon vertices are paired across frames so the old form fractures while the new form rebuilds.
   This is a silhouette-warp illusion, not skeletal/pixel correspondence morphing. */
/* Soft, organic displacement replaces angular polygon masking and all-white silhouettes.
   The artwork remains recognizable while the two images overlap. */
@keyframes form-out{
 0%{opacity:1;filter:blur(0);transform:translate(-50%,-50%) scale(1)}
 20%{opacity:1;filter:url(#evolutionWarpOld) blur(2px) saturate(1.4);transform:translate(-50%,-50%) scale(.99,1.03)}
 42%{opacity:.9;filter:url(#evolutionWarpOld) blur(6px) saturate(1.2);transform:translate(-50%,-50%) scale(1.06,.95) skew(-3deg,2deg)}
 62%{opacity:.55;filter:url(#evolutionWarpOld) blur(10px) brightness(1.3);transform:translate(-50%,-50%) scale(.96,1.08) skew(3deg,-2deg)}
 82%{opacity:.18;filter:url(#evolutionWarpOld) blur(13px);transform:translate(-50%,-50%) scale(1.03,.96)}
 100%{opacity:0;filter:blur(14px);transform:translate(-50%,-50%) scale(1)}
}
@keyframes form-in{
 0%,20%{opacity:0;filter:url(#evolutionWarpNew) blur(15px) brightness(1.4);transform:translate(-50%,-50%) scale(.94,1.09)}
 38%{opacity:.2;filter:url(#evolutionWarpNew) blur(12px) brightness(1.25);transform:translate(-50%,-50%) scale(1.08,.94) skew(3deg,-2deg)}
 56%{opacity:.54;filter:url(#evolutionWarpNew) blur(8px) brightness(1.18);transform:translate(-50%,-50%) scale(.96,1.07) skew(-3deg,2deg)}
 75%{opacity:.84;filter:url(#evolutionWarpNew) blur(4px);transform:translate(-50%,-50%) scale(1.03,.98)}
 90%{opacity:1;filter:blur(1px);transform:translate(-50%,-50%) scale(1)}
 100%{opacity:1;filter:blur(0);transform:translate(-50%,-50%) scale(1)}
}
@keyframes form-ring{0%,10%{opacity:0;transform:scale(.75)}30%{opacity:.6;transform:scale(.95) rotate(30deg)}65%{opacity:.8;transform:scale(1.1) rotate(100deg)}90%,100%{opacity:0;transform:scale(1.3) rotate(160deg)}}
@keyframes form-halo{0%{opacity:.2;transform:scale(.8)}25%,55%{opacity:.8;transform:scale(1.04);box-shadow:0 0 38px #9cdeff44,inset 0 0 25px #a9ddff22}80%{opacity:1;transform:scale(1.15)}100%{opacity:.35;transform:scale(1)}}
@keyframes form-reveal{from{transform:translate(-50%,-50%) scale(1.015);filter:brightness(1) invert(0) blur(0) drop-shadow(0 0 22px #c5eeff)}to{transform:translate(-50%,-50%) scale(1);filter:brightness(1) invert(0) blur(0) drop-shadow(0 0 12px #c5eeff)}}
/* Reduced motion keeps a gentle visible dissolve instead of hiding both images. */
@media(prefers-reduced-motion:reduce){
 .evolution-scene.evolving #evolutionBefore{animation:quiet-out 4s linear both;clip-path:none;filter:none}
 .evolution-scene.evolving #evolutionAfter{animation:quiet-in 4s linear both;clip-path:none;filter:none}
 .evolution-scene.evolving:before,.evolution-scene.evolving .evolution-halo{animation:none;opacity:.25}
 .evolution-scene.complete #evolutionAfter{animation:none;filter:none}
}
@keyframes quiet-out{0%,15%{opacity:1}85%,100%{opacity:0}}
@keyframes quiet-in{0%,15%{opacity:0}85%,100%{opacity:1}}