/* Directional Card Flip (v1.1.0 cumulative) */
.dcf-wrapper{ width:var(--dcf-w,400px); height:var(--dcf-h,600px); position:relative; margin:1rem auto; perspective:1200px; -webkit-perspective:1200px; overflow:visible; }
.dcf-shadow{ filter: drop-shadow(0 6px 18px rgba(0,0,0,.25)); }
.dcf-scene{ width:100%; height:100%; position:relative; border-radius:var(--dcf-r,16px); overflow:hidden; isolation:isolate; }
.dcf-card{ width:100%; height:100%; position:absolute; transform-style:preserve-3d; -webkit-transform-style:preserve-3d; transition:transform 0.7s cubic-bezier(.2,.7,.2,1); -webkit-transition:-webkit-transform 0.7s cubic-bezier(.2,.7,.2,1); border-radius:var(--dcf-r,16px); transform-origin:50% 50%; -webkit-transform-origin:50% 50%; will-change:transform; }
.dcf-face{ position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:var(--dcf-r,16px); }
.dcf-front{ transform:rotateY(0deg) translateZ(0); -webkit-transform:rotateY(0deg) translateZ(0); }
.dcf-back{  transform:rotateY(180deg) translateZ(0); -webkit-transform:rotateY(180deg) translateZ(0); }

/* Zones */
.dcf-zone{ position:absolute; background:transparent; border:0; padding:0; margin:0; cursor:pointer; z-index:5; }
.dcf-left{  left:0; top:0; width:25%; height:100%; }
.dcf-right{ right:0; top:0; width:25%; height:100%; }
.dcf-top{   left:0; top:0; width:100%; height:25%; }
.dcf-bottom{left:0; bottom:0; width:100%; height:25%; }
.dcf-zone:focus{ outline:2px solid #4c9ffe; outline-offset:-2px; }

/* Responsive */
@media (max-width: 600px){
  .dcf-wrapper{ width: min(95vw, var(--dcf-w,400px)); height: calc(var(--dcf-h,600px) * (min(95vw, var(--dcf-w,400px)) / var(--dcf-w,400px))); }
}