/* The split-flap wordmark (17 August 2026).
 *
 * WHY THIS AND NOT A LOGO
 * Every other entrance in the fleet now has something that moves, and Moral
 * Mirror was the one that did not. A split-flap board is the right device for
 * THIS tool rather than a generic animation: the mechanism is already a mirror.
 * Each flap is hinged across its middle, so the top half shows one thing and
 * the bottom half its counterpart — which is what the exercise does, showing
 * the same act read two ways.
 *
 * So the board is built from that: the top half is white on black, the bottom
 * half is the same letters MIRRORED and inverted — black on white. The word
 * reads normally; its reflection reads back at you.
 *
 * The letters are in the MARKUP, not created by script. Without JavaScript the
 * board is simply a still wordmark, which is what a logo is anyway; the script
 * only riffles it. Nothing here depends on motion to be legible.
 */

.mm-flap {
  display: inline-flex;
  gap: .18rem;
  /* The board is one word to a screen reader — see aria-label on the element.
     The cells are marked aria-hidden so it is not spelled out letter by letter. */
}

.mm-flap__cell {
  position: relative;
  width: 1.05em;
  height: 1.7em;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: clamp(1.5rem, 5.2vw, 2.6rem);
  line-height: 1;
  border-radius: 3px;
  overflow: hidden;
  background: #111;
  /* Each cell is its own little object, so the seam reads as a hinge rather
     than as a line drawn across the whole word. */
  box-shadow: 0 1px 2px rgba(0,0,0,.28);
}

/* A gap in the word is a gap in the board: no flap, no shadow. */
.mm-flap__cell--space { background: none; box-shadow: none; width: .5em; }

.mm-flap__half {
  position: absolute; left: 0; right: 0; height: 50%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

/* Each half carries a WHOLE letter, not half of one.
   A real departure board splits one glyph across the hinge; this splits the
   word from its reflection, which is the reading that belongs to this tool.
   So the glyph is sized to fit inside its half rather than being clipped by
   it — the earlier version showed the top of an M above the bottom of an M and
   spelled nothing. */
.mm-flap__glyph { display: block; font-size: .66em; line-height: 1; }

/* Top: the word as written. */
.mm-flap__half--top { top: 0; background: #111; color: #fff; }

/* Bottom: the same letter, mirrored and inverted. Not a soft reflection — the
   actual glyph, flipped, in the opposite colours. */
.mm-flap__half--bottom { bottom: 0; background: #fff; color: #111; }
.mm-flap__half--bottom .mm-flap__glyph { transform: scaleY(-1); }

/* The hinge. */
.mm-flap__cell::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: rgba(0,0,0,.55); transform: translateY(-.5px);
  z-index: 2; pointer-events: none;
}

/* Mid-flip: the top half folds down. Applied by flapboard.js for a few frames
   per character; the class does the work so the script sets no styles. */
.mm-flap__cell.is-turning .mm-flap__half--top {
  transform-origin: bottom center;
  transform: perspective(120px) rotateX(-58deg);
  filter: brightness(.6);
}
.mm-flap__half--top { transition: transform .07s linear, filter .07s linear; }

@media (prefers-reduced-motion: reduce) {
  .mm-flap__cell.is-turning .mm-flap__half--top { transform: none; filter: none; }
  .mm-flap__half--top { transition: none; }
}

.welcome-brand .mm-flap { margin: 0 auto; }