/* A split-flap board, the look of flap.js. It is a piece of its own, and no page's colour or type is in it.
   A page sets these on the board or above it. Without them a flap is the plain text around it.
     --flap-face    a flap's colour
     --flap-ink     its character's colour
     --flap-wide    one flap's width
     --flap-tall    one flap's height
     --flap-gap     the space each side of a flap
     --flap-radius  its corners
     --flap-split   the colour of the line across a flap's middle
   flap.js sets --flap-level itself: how far a figure moves to sit at its flap's middle, measured from the typeface.
   The flip is dangarraway.xyz's clock: a card drops from on edge to flat. */
.flaps{display:inline-flex;align-items:baseline;font-variant-numeric:tabular-nums;white-space:nowrap}
.flap{position:relative;display:inline-grid;place-items:center;box-sizing:border-box;min-width:var(--flap-wide,0);height:var(--flap-tall,auto);margin:0 var(--flap-gap,0);border-radius:var(--flap-radius,0);background:var(--flap-face,transparent);color:var(--flap-ink,inherit);perspective:140px}
.flap::after{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid var(--flap-split,transparent);opacity:.4;pointer-events:none}
.flap-card{display:inline-block;position:relative;top:var(--flap-level,0);transform-origin:50% 55%;backface-visibility:hidden;animation:flap-drop .18s cubic-bezier(.3,.55,.2,1)}
@keyframes flap-drop{from{transform:rotateX(-88deg)}to{transform:rotateX(0)}}
.flap-gap{display:inline-block;width:.4em}
.flap-said{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (prefers-reduced-motion:reduce){ .flap-card{animation:none} }