/* premium-motion : flip cards  (premium-motion 2.0, Phase 5)
   3D card that flips to reveal a back face. Pair with flipcard.js for click mode.
     <div class="md-flip"><div class="md-flip-inner">
       <div class="md-flip-front">…</div><div class="md-flip-back">…</div>
     </div></div>
   Add data-click for click-to-flip instead of hover. Add .y for horizontal axis (default).
   ============================================================ */
.md-flip{ perspective:1200px; }
.md-flip-inner{ position:relative; transform-style:preserve-3d; transition: transform .7s cubic-bezier(.22,.61,.2,1); }
.md-flip:not([data-click]):hover .md-flip-inner,
.md-flip.flipped .md-flip-inner{ transform: rotateY(180deg); }
.md-flip.x:not([data-click]):hover .md-flip-inner,
.md-flip.x.flipped .md-flip-inner{ transform: rotateX(180deg); }
.md-flip-front,.md-flip-back{ backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.md-flip-back{ position:absolute; inset:0; transform: rotateY(180deg); }
.md-flip.x .md-flip-back{ transform: rotateX(180deg); }
@media (prefers-reduced-motion: reduce){ .md-flip-inner{ transition:none; } }
[data-motion="off"] .md-flip:hover .md-flip-inner{ transform:none; }