/* fx.css · depth/flip, the card turns over in three dimensions on hover or focus · owner: Lizzy East · all rights reserved */

/* Both faces share one grid cell, so the card is as tall as its taller face and
   never changes size. The turn is for a fine pointer and for keyboard focus: tabbing
   to the link on the back turns the card over. On touch screens the two faces simply
   sit one above the other, so the back and its link are always reachable. */
[data-fx~="depth/flip"] { display: grid; }
[data-fx~="depth/flip"] [data-fx-card] { display: grid; gap: var(--fx-flip-gap, 0.75rem); }
[data-fx~="depth/flip"] [data-fx-face] { min-width: 0; }
@media (hover: hover) and (pointer: fine) {
  [data-fx~="depth/flip"] { perspective: var(--fx-flip-perspective, 1400px); }
  [data-fx~="depth/flip"] [data-fx-card] { gap: 0; transform-style: preserve-3d; }
  [data-fx~="depth/flip"] [data-fx-face] { grid-area: 1 / 1; backface-visibility: hidden; transform: translateZ(1px); }
  [data-fx~="depth/flip"] [data-fx-face="back"] { transform: rotateY(180deg) translateZ(1px); pointer-events: none; }
  [data-fx~="depth/flip"]:hover [data-fx-card],
  [data-fx~="depth/flip"]:focus-within [data-fx-card] { transform: rotateY(180deg); }
  /* Only the face turned toward you takes the pointer. */
  [data-fx~="depth/flip"]:hover [data-fx-face="front"],
  [data-fx~="depth/flip"]:focus-within [data-fx-face="front"] { pointer-events: none; }
  [data-fx~="depth/flip"]:hover [data-fx-face="back"],
  [data-fx~="depth/flip"]:focus-within [data-fx-face="back"] { pointer-events: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  [data-fx~="depth/flip"] [data-fx-card] { transition: transform var(--fx-flip-dur, 700ms) var(--fx-ease); }
}