/* ============ the split-flap module (shared by /elements and /molecules) ============
   Same construction as the board's tiles (board.css): a top half, a bottom
   half, and a leaf that falls from one to the other. The faces carry
   mixed-case text, because a chemical symbol has to — "Co" is cobalt and
   "CO" is carbon monoxide — so these are word flaps in the Solari tradition
   rather than letters on a 64-position wheel. Driven by /chem/flaps.js. */
.fm{position:absolute; perspective:420px}
.fm .h{position:absolute; left:0; right:0; height:50%; overflow:hidden}
.fm .h.t{top:0; border-radius:4px 4px 0 0}
.fm .h.b{bottom:0; border-radius:0 0 4px 4px}
.fm .fc{position:absolute; left:0; width:100%; height:200%;
        background:linear-gradient(var(--flap-a) 0%, #1b1f25 49%, #14171c 51%, var(--flap-b) 100%);
        color:var(--glyph)}
.fm .h.t .fc{top:0}
.fm .h.b .fc{bottom:0}
.fm .fc.fill{background-image:linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,.02) 49%, rgba(0,0,0,.10) 51%, rgba(0,0,0,.16))}
.fm .lf{position:absolute; left:0; right:0; top:0; height:50%; z-index:4;
        transform-origin:50% 100%; transform-style:preserve-3d; display:none}
.fm .lv{position:absolute; inset:0; overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden}
.fm .lv.fr{border-radius:4px 4px 0 0}
.fm .lv.fr .fc{top:0}
.fm .lv.bk{transform:rotateX(180deg); border-radius:0 0 4px 4px}
.fm .lv.bk .fc{bottom:0}
.fm .sh{position:absolute; inset:0; background:#000; opacity:0; pointer-events:none}
/* the hinge: a dark seam across the middle, over everything */
.fm::after{content:""; position:absolute; left:0; right:0; top:calc(50% - 1px); height:2px; background:#000d; z-index:6; pointer-events:none}
.fm.fa .lf, .fm.fb .lf{display:block}
.fm.fa .lf{animation:fallA var(--fd,170ms) cubic-bezier(.55,.06,.85,.5) both}
.fm.fb .lf{animation:fallB var(--fd,170ms) cubic-bezier(.55,.06,.85,.5) both}
.fm.fa .lv.fr .sh, .fm.fb .lv.fr .sh{animation:shadeIn var(--fd,170ms) ease-in both}
.fm.fa .lv.bk .sh, .fm.fb .lv.bk .sh{animation:shadeOut var(--fd,170ms) ease-out both}
@keyframes fallA{from{transform:rotateX(0)} to{transform:rotateX(-180deg)}}
@keyframes fallB{from{transform:rotateX(0)} to{transform:rotateX(-180deg)}}
@keyframes shadeIn{from{opacity:0} to{opacity:.55}}
@keyframes shadeOut{from{opacity:.5} to{opacity:0}}
/* DEPTH flat (?depth=flat): the leaf folds flat instead of turning in 3D —
   the same tier the TV offers to panels that can't hold frame rate */
body.flat .fm{perspective:none}
body.flat .fm .lf{transform-style:flat}
body.flat .fm .lv.bk{display:none}
body.flat .fm.fa .lf{animation:foldA var(--fd,170ms) ease-in both}
body.flat .fm.fb .lf{animation:foldB var(--fd,170ms) ease-in both}
@keyframes foldA{from{transform:scaleY(1)} to{transform:scaleY(0)}}
@keyframes foldB{from{transform:scaleY(1)} to{transform:scaleY(0)}}