/* One finite, decorative composition. The approved identity stays still. */
.motion-card::before,.motion-card::after{display:none}
.motion-card{isolation:isolate}
.composed-lines{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.composed-frame,.composed-echo{position:absolute;inset:22px;border:1px solid rgba(239,233,223,.3);transform-origin:center}
.composed-echo{opacity:0}
.composed-corner{position:absolute;width:62px;height:62px;border-color:rgba(239,233,223,.62);border-style:solid;border-width:0}
.corner-top{top:22px;right:22px;border-top-width:1px;border-right-width:1px;transform-origin:top right}
.corner-bottom{bottom:22px;left:22px;border-bottom-width:1px;border-left-width:1px;transform-origin:bottom left}
.composed-diamond{position:absolute;width:6px;height:6px;right:19.5px;top:19.5px;transform:rotate(45deg);background:var(--cream)}
.motion-card.is-composing .composed-frame{animation:frame-compose 3400ms cubic-bezier(.22,.7,.24,1) both}
.motion-card.is-composing .echo-one{animation:echo-one-compose 3000ms cubic-bezier(.22,.7,.24,1) both}
.motion-card.is-composing .echo-two{animation:echo-two-compose 3000ms 120ms cubic-bezier(.22,.7,.24,1) both}
.motion-card.is-composing .composed-corner{animation:corner-compose 1800ms 1450ms cubic-bezier(.22,.7,.24,1) both}
.motion-card.is-composing .composed-diamond{animation:diamond-compose 1300ms 2350ms cubic-bezier(.22,.7,.24,1) both}
.motion-card.is-paused .composed-lines>*{animation-play-state:paused}
@keyframes frame-compose{
  0%{opacity:.08;transform:translate(-15px,20px) rotate(-3deg) scale(.96)}
  28%{opacity:.72}
  100%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}
}
@keyframes echo-one-compose{
  0%{opacity:0;transform:translate(25px,-18px) rotate(6deg) scale(1.055)}
  22%{opacity:.75}
  72%{opacity:.3}
  100%{opacity:0;transform:translate(0,0) rotate(0) scale(1)}
}
@keyframes echo-two-compose{
  0%{opacity:0;transform:translate(-23px,26px) rotate(-6deg) scale(.93)}
  20%{opacity:.5}
  75%{opacity:.16}
  100%{opacity:0;transform:translate(0,0) rotate(0) scale(1)}
}
@keyframes corner-compose{
  0%{opacity:0;transform:scale(.2)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes diamond-compose{
  0%{opacity:0;transform:translate(-7px,7px) rotate(45deg) scale(.6)}
  100%{opacity:1;transform:translate(0,0) rotate(45deg) scale(1)}
}
@media(max-width:620px){
  .composed-frame,.composed-echo{inset:19px}
  .corner-top{top:19px;right:19px}
  .corner-bottom{bottom:19px;left:19px}
  .composed-corner{width:45px;height:45px}
  .composed-diamond{top:16.5px;right:16.5px}
}
@media(prefers-reduced-motion:reduce){
  .motion-card.is-composing .composed-lines>*{animation:none!important}
}
.motion-card.is-static .composed-lines>*{animation:none!important}

/* A single quiet highlight follows the completed frame. */
.border-trace{position:absolute;left:22.5px;top:22.5px;width:calc(100% - 45px);height:calc(100% - 45px);overflow:visible;opacity:0;transition:opacity 1.2s ease;transform:scaleX(-1);transform-origin:center}
.border-trace rect{fill:none;stroke:var(--cream);stroke-width:1px;stroke-linecap:butt;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dashoffset:inherit}
.motion-card.has-orbit .border-trace{opacity:1}
.motion-card.has-orbit .border-trace{animation:border-circuit 24s linear infinite}
.motion-card.is-paused .border-trace{animation-play-state:paused}
/* Explicit lengths interpolate continuously; both endpoints share one SVG dash period. */
@keyframes border-circuit{from{stroke-dashoffset:0px}to{stroke-dashoffset:100px}}
@media(max-width:620px){.border-trace{left:19.5px;top:19.5px;width:calc(100% - 39px);height:calc(100% - 39px)}}
@media(prefers-reduced-motion:reduce){.border-trace{display:none;transition:none}.motion-card.has-orbit .border-trace{animation:none!important}}