/* SplitFlapText — React Bits component, ported to vanilla JS/CSS.
   Markup and class names are unchanged from the original so the styling
   stays a drop-in match for the upstream component. */

.split-flap-text {
  display: inline-flex;
  align-items: center;
  gap: var(--split-flap-gap, 6px);
  color: var(--split-flap-text-color, #f8fafc);
  font-family: 'SFMono-Regular', 'Roboto Mono', 'Cascadia Code', 'Liberation Mono', Menlo, monospace;
  font-size: var(--split-flap-font-size, 52px);
  font-weight: 760;
  line-height: 1;
  letter-spacing: 0.035em;
  white-space: pre;
  user-select: none;
  font-variant-numeric: tabular-nums;
}

.split-flap-text__tile {
  position: relative;
  width: 0.78em;
  height: 1.08em;
  overflow: hidden;
  border-radius: var(--split-flap-radius, 8px);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.16), transparent 44%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--split-flap-tile-color, #111827) 82%, white),
      var(--split-flap-tile-color, #111827)
    );
  box-shadow:
    0 0.035em 0.08em rgba(255, 255, 255, 0.08) inset,
    0 -0.05em 0.1em rgba(0, 0, 0, 0.38) inset,
    0 0.16em 0.38em rgba(0, 0, 0, 0.28);
  perspective: 520px;
  transform-style: preserve-3d;
  isolation: isolate;
}

.split-flap-text__tile::before {
  content: '';
  position: absolute;
  z-index: 8;
  top: calc(50% - 0.5px);
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.18) 18%,
    rgba(0, 0, 0, 0.64) 50%,
    rgba(255, 255, 255, 0.14) 82%,
    transparent
  );
  box-shadow:
    0 -1px 0 rgba(255, 255, 255, 0.08),
    0 1px 0 rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.split-flap-text__tile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 9;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2) inset;
  pointer-events: none;
}

.split-flap-text__half,
.split-flap-text__flap {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 34%), var(--split-flap-tile-color, #111827);
  backface-visibility: hidden;
}

.split-flap-text__half--top,
.split-flap-text__flap--front {
  top: 0;
}

.split-flap-text__half--bottom,
.split-flap-text__flap--back {
  bottom: 0;
}

.split-flap-text__half--bottom,
.split-flap-text__flap--back {
  background:
    linear-gradient(0deg, rgba(255, 255, 255, 0.06), transparent 38%),
    color-mix(in srgb, var(--split-flap-tile-color, #111827) 92%, black);
}

.split-flap-text__char {
  position: absolute;
  left: 0;
  width: 100%;
  height: 200%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--split-flap-text-color, #f8fafc);
  text-shadow:
    0 0.025em 0 rgba(255, 255, 255, 0.16),
    0 0.09em 0.16em rgba(0, 0, 0, 0.42);
}

.split-flap-text__half--top .split-flap-text__char,
.split-flap-text__flap--front .split-flap-text__char {
  top: 0;
}

.split-flap-text__half--bottom .split-flap-text__char,
.split-flap-text__flap--back .split-flap-text__char {
  bottom: 0;
}

.split-flap-text__flap {
  z-index: 6;
  will-change: transform, filter;
  transform-style: preserve-3d;
}

.split-flap-text__flap--front {
  transform-origin: center bottom;
  animation: split-flap-front var(--split-flap-flip-duration, 0.12s) cubic-bezier(0.23, 1, 0.32, 1) both;
}

.split-flap-text__flap--back {
  transform-origin: center top;
  transform: rotateX(90deg);
  animation: split-flap-back var(--split-flap-flip-duration, 0.12s) cubic-bezier(0.23, 1, 0.32, 1) both;
}

@keyframes split-flap-front {
  0% {
    transform: rotateX(0deg);
    filter: brightness(1.08);
  }

  100% {
    transform: rotateX(-90deg);
    filter: brightness(0.52);
  }
}

@keyframes split-flap-back {
  0%,
  45% {
    transform: rotateX(90deg);
    filter: brightness(0.58);
  }

  100% {
    transform: rotateX(0deg);
    filter: brightness(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .split-flap-text__flap {
    animation: none !important;
  }
}

/* ------------------------------------------------------------------
   Hidden width sizer (see makeSizer in the JS).
   Harmless in the default variant, where the tile width is fixed.
   ------------------------------------------------------------------ */
.split-flap-text__sizer {
  display: block;
  height: 100%;
  visibility: hidden;
  white-space: pre;
  pointer-events: none;
}

/* ------------------------------------------------------------------
   --bare : keeps the flip mechanic, drops the mechanical tile chrome.

   The halves and flaps deliberately KEEP an opaque background — set
   --split-flap-tile-color to the surface behind the board. If they were
   transparent, the rotating flap and the static half beneath it would show
   through each other and the flip would read as doubled, ghosted glyphs.

   Tiles also become auto-width here, so each glyph gets its natural advance
   instead of a fixed slot. Without that, boxless text reads as monospaced and
   wide glyphs (m, w) get clipped by the tile's overflow:hidden.
   ------------------------------------------------------------------ */
.split-flap-text--bare .split-flap-text__tile {
  width: auto;
  flex: 0 0 auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.split-flap-text--bare .split-flap-text__tile::before,
.split-flap-text--bare .split-flap-text__tile::after {
  display: none;
}

/* At rest the halves are transparent, so the board reads as plain type and
   whatever sits behind it stays visible. Opacity is switched on only for tiles
   that are mid-flip (`is-flipping`, toggled from the JS), which is the only
   moment the flap needs something to hide against. */
.split-flap-text--bare .split-flap-text__half {
  background: transparent;
}

.split-flap-text--bare .split-flap-text__tile.is-flipping .split-flap-text__half,
.split-flap-text--bare .split-flap-text__flap {
  background: var(--split-flap-tile-color, #111827);
}

.split-flap-text--bare .split-flap-text__char {
  text-shadow: none;
}