/*
 * Native compatibility layer for the selected Fancy Components effects.
 * Tokens are intentionally mapped to the existing Tử Vi visual system.
 */

.fancy-letter-swap {
  display: inline-flex;
  position: relative;
  overflow: hidden;
  vertical-align: baseline;
  isolation: isolate;
}

.fancy-letter-swap__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.fancy-letter-swap__slot {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  line-height: 1.1;
}

.fancy-letter-swap__primary,
.fancy-letter-swap__secondary {
  display: inline-block;
  min-width: var(--fancy-letter-width, auto);
  transition-duration: 520ms;
  transition-delay: var(--fancy-delay, 0ms);
  transition-timing-function: cubic-bezier(.22, 1, .36, 1);
  will-change: transform, top;
}

.fancy-letter-swap__primary {
  transform: translateY(0);
}

.fancy-letter-swap__secondary {
  position: absolute;
  inset: -100% auto auto 0;
}

.fancy-letter-swap:hover .fancy-letter-swap__primary {
  transform: translateY(100%);
}

.fancy-letter-swap:hover .fancy-letter-swap__secondary {
  transform: translateY(100%);
}

.fancy-underline {
  position: relative;
  isolation: isolate;
}

.fancy-underline::after {
  position: absolute;
  right: .2em;
  bottom: .42em;
  left: .2em;
  z-index: -1;
  height: .16em;
  content: "";
  background: #dfc18a;
  border-radius: 999px;
  opacity: .92;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 260ms cubic-bezier(.22, 1, .36, 1);
}

.fancy-underline:hover::after,
.fancy-underline:focus-visible::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .fancy-letter-swap__secondary {
    display: none;
  }

  .fancy-letter-swap__primary,
  .fancy-letter-swap__secondary,
  .fancy-underline::after {
    transition: none;
  }

  .fancy-letter-swap:hover .fancy-letter-swap__primary {
    transform: none;
  }
}