/* MCA Compass — origami unfold. Order: top (N), bottom (S), left (W), right (E). Drop the .unfold block anywhere; set --size and --dur. */
.unfold{position:relative;width:var(--size,120px);height:var(--size,120px);perspective:calc(var(--size,120px) * 3)}
.unfold .flap{position:absolute;inset:0;width:100%;height:100%;transform-origin:50% 50%;transform-style:preserve-3d;animation:var(--dur,4.4s) cubic-bezier(.2,.7,.2,1) infinite both}
.unfold .n{animation-name:flapN;animation-delay:0s}
.unfold .s{animation-name:flapS;animation-delay:calc(var(--dur,4.4s) * .05)}
.unfold .w{animation-name:flapW;animation-delay:calc(var(--dur,4.4s) * .10)}
.unfold .e{animation-name:flapE;animation-delay:calc(var(--dur,4.4s) * .15)}
/* 0–16%: unfold · 16–78%: hold · 78–90%: fold back · 90–100%: rest. For a one-shot opener, play 0–16% once (≈1.2s at 4.4s). */
@keyframes flapN{0%{transform:rotateX(-110deg);opacity:0}16%{transform:rotateX(0);opacity:1}78%{transform:rotateX(0);opacity:1}90%,100%{transform:rotateX(-110deg);opacity:0}}
@keyframes flapS{0%{transform:rotateX(110deg);opacity:0}16%{transform:rotateX(0);opacity:1}78%{transform:rotateX(0);opacity:1}90%,100%{transform:rotateX(110deg);opacity:0}}
@keyframes flapE{0%{transform:rotateY(110deg);opacity:0}16%{transform:rotateY(0);opacity:1}78%{transform:rotateY(0);opacity:1}90%,100%{transform:rotateY(110deg);opacity:0}}
@keyframes flapW{0%{transform:rotateY(-110deg);opacity:0}16%{transform:rotateY(0);opacity:1}78%{transform:rotateY(0);opacity:1}90%,100%{transform:rotateY(-110deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.unfold .flap{animation:none;transform:none;opacity:1}}