/* ──────────────────────────────────────────────────────────────────────────
   splitflap.css — "The Lottery" Solari headline boards for waynecolt.com
   Shared static asset. Visual register matches the existing /solutions equations
   flap band (tile #0A0A0C, --stock glyph, --optic symbols, IBM Plex Mono).
   Geometry ported from the Solari split-flap clock prototype, retokenized to site CSS.
   Namespace: sf-*  (avoids collision with the page's own .flap / #flapRow).
   ────────────────────────────────────────────────────────────────────────── */

.sf-board {
  /* per-flap geometry — drives a fixed footprint => zero CLS.
     --sf-w is the flap width; the board reserves N*--sf-w + (N-1)*gap forever. */
  --sf-w:       30px;
  --sf-gap:     3px;
  --sf-h:       calc(var(--sf-w) * 1.46);
  --sf-half:    calc(var(--sf-h) / 2);
  --sf-r:       2px;
  --sf-fs:      calc(var(--sf-w) * 0.62);
  --sf-charTop: calc((var(--sf-h) - var(--sf-fs)) / 2);
  --sf-charBot: calc(var(--sf-charTop) - var(--sf-half));
  --sf-flip:    150ms;
  --sf-ease:    cubic-bezier(0.30, 0, 0.16, 1);
  --sf-glyph:   var(--stock, #E8E0D4);
  --sf-tile-bg: var(--void, #0A0A0C);
  --sf-optic:   var(--optic, #E8450A);

  display: flex;
  gap: var(--sf-gap);
  justify-content: flex-start;
  flex-wrap: nowrap;
  font-family: 'IBM Plex Mono', monospace;
  user-select: none;
}

/* TILE OUTER — perspective root + reserved footprint cell */
.sf-to {
  position: relative;
  width: var(--sf-w);
  height: var(--sf-h);
  flex: 0 0 var(--sf-w);
  perspective: 220px;
  perspective-origin: 50% 50%;
}

/* TILE INNER — clips the static halves */
.sf-ti {
  position: absolute; inset: 0;
  border-radius: var(--sf-r);
  overflow: hidden;
  background: var(--sf-tile-bg);
  border: 1px solid rgba(232,224,212,0.10);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.6);
}

/* static HALVES */
.sf-h {
  position: absolute; left: 0; right: 0;
  height: var(--sf-half);
  overflow: hidden;
  background: var(--sf-tile-bg);
}
.sf-h.t { top: 0; border-bottom: 1px solid rgba(0,0,0,0.55); }
.sf-h.b { bottom: 0; }

/* GLYPH */
.sf-ltr {
  position: absolute; left: 0; right: 0;
  text-align: center;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  font-size: var(--sf-fs);
  line-height: 1;
  color: var(--sf-glyph);
  pointer-events: none;
}
.sf-h.t .sf-ltr { top: var(--sf-charTop); }
.sf-h.b .sf-ltr { top: var(--sf-charBot); }

/* symbols render in optic during rolls; jackpot flushes letters optic */
.sf-to.sf-optic .sf-ltr { color: var(--sf-optic); }
.sf-to.sf-jackpot .sf-ltr {
  color: var(--sf-optic);
  text-shadow: 0 0 7px rgba(232,69,10,0.55), 0 0 2px rgba(232,69,10,0.8);
}

/* center divider hairline */
.sf-div {
  position: absolute; top: 50%; left: 2px; right: 2px;
  height: 1px;
  background: rgba(0,0,0,0.55);
  transform: translateY(-0.5px);
  z-index: 6; pointer-events: none;
}

/* FALLING FLAP — gravity-release leaf showing the next glyph */
.sf-flap {
  position: absolute; top: 0; left: 0; right: 0;
  height: var(--sf-half);
  overflow: hidden;
  background: var(--sf-tile-bg);
  border-radius: var(--sf-r) var(--sf-r) 0 0;
  border-bottom: 1px solid rgba(0,0,0,0.55);
  transform-origin: center bottom;
  transform: rotateX(-90deg);
  backface-visibility: hidden;
  z-index: 20; pointer-events: none;
}
.sf-flap .sf-ltr { top: var(--sf-charTop); }
.sf-flap.sf-optic .sf-ltr { color: var(--sf-optic); }

/* reduced-motion: static headline, no board churn */
@media (prefers-reduced-motion: reduce) {
  .sf-flap { display: none; }
}

/* responsive flap sizing — mirrors the existing solutions band breakpoints */
@media (max-width: 768px) { .sf-board { --sf-w: 22px; --sf-gap: 2px; } }
@media (max-width: 440px) { .sf-board { --sf-w: 17px; --sf-gap: 2px; } }

/* visually-hidden real heading (a11y/SEO source of truth) */
.sf-vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* progressive-enhancement mount: hidden until JS reveals it. no-JS / reduced-
   motion users never see this — they get the real visible heading instead. */
.sf-mount { display: none; }
.sf-mount.sf-revealed { display: block; }

/* host wrappers: preserve the layout rhythm the original headings reserved */
.sf-host { display: block; }
.sf-host-solutions { margin: 4px 0 8px; }   /* matches h1.page-h margin-bottom:8px */
.sf-host-hero { margin-bottom: 28px; }       /* sits where .hero-h block sat */

/* hero stack: 3 boards, left-aligned, staggered resolve top→bottom */
.sf-stack { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 768px) { .sf-stack { gap: 6px; } }