/* ==========================================================================
   Lambda Phi Epsilon — Alpha Xi Chapter
   FoldText — vanilla port of the React Bits component of the same name.
   Self-contained: restyles nothing outside .fold-text*.

   The root is typographically INVISIBLE by default — family, size, weight,
   colour, leading and tracking all inherit from the parent. The reference's
   display-headline overrides only appear when the caller passes the matching
   option (JS then emits the custom property).
   ========================================================================== */

.fold-text {
  display: inline;
  color: var(--fold-text-color, inherit);
  font-family: var(--fold-text-font-family, inherit);
  font-size: var(--fold-text-font-size, inherit);
  font-weight: var(--fold-text-font-weight, inherit);
  line-height: var(--fold-text-line-height, inherit);
  letter-spacing: var(--fold-text-letter-spacing, inherit);
  -webkit-user-select: text;
  user-select: text;
}

/* Only display usage opts into the reference's pre-wrap + block box. */
.fold-text--block { display: inline-block; }
.fold-text--pre { white-space: pre-wrap; }

/* The accessible copy of the phrase; the folded copy is aria-hidden.
   user-select:none keeps it out of a copied selection of the paragraph. */
.fold-text-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  -webkit-user-select: none;
  user-select: none;
}

.fold-text-visual { display: inline; }
.fold-text-line { display: block; }
.fold-text-whitespace { display: inline; }

/* The segment owns the perspective; the piece inside it is what rotates. */
.fold-text-segment {
  display: inline-block;
  line-height: inherit;
  letter-spacing: inherit;
  perspective: var(--fold-perspective, 700px);
  transform-style: preserve-3d;
  vertical-align: baseline;
}

.fold-text-segment[data-fold-split="line"] { display: block; }

.fold-text-piece {
  position: relative;
  display: inline-block;
  color: inherit;
  line-height: inherit;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* will-change only while a fold is actually running (GSAP clearProps parity). */
.fold-text.is-folding .fold-text-piece { will-change: transform, opacity; }

/* The crease: a shaded overlay whose opacity is driven by --fold-crease (1 -> 0). */
.fold-text-piece::after {
  content: "";
  position: absolute;
  top: -0.08em;
  right: -0.02em;
  bottom: -0.08em;
  left: -0.02em;
  inset: -0.08em -0.02em;
  pointer-events: none;
  opacity: var(--fold-crease, 0);
  mix-blend-mode: var(--fold-crease-blend, normal);
  border-radius: 0.08em;
}

/* --- Dark ground (default) -------------------------------------------------
   The reference's multiply crease is tuned for dark text on light paper. On the
   hero's navy field the phrase is light-on-dark AND .hero__inner is its own
   stacking context, so multiply has nothing useful to blend against. Here the
   overlay paints normally: brand-navy shadow at the hinge falling to a pale
   navy-100 catch-light at the free edge. Reads on any ground. */
.fold-text[data-fold-ground="dark"] .fold-text-piece[data-fold-hinge="top"]::after {
  background: linear-gradient(180deg, rgba(6, 21, 57, .88) 0%, rgba(6, 21, 57, .42) 45%, rgba(232, 237, 251, .32) 100%);
}
.fold-text[data-fold-ground="dark"] .fold-text-piece[data-fold-hinge="bottom"]::after {
  background: linear-gradient(0deg, rgba(6, 21, 57, .88) 0%, rgba(6, 21, 57, .42) 45%, rgba(232, 237, 251, .32) 100%);
}
.fold-text[data-fold-ground="dark"] .fold-text-piece[data-fold-hinge="left"]::after {
  background: linear-gradient(90deg, rgba(6, 21, 57, .88) 0%, rgba(6, 21, 57, .42) 45%, rgba(232, 237, 251, .32) 100%);
}
.fold-text[data-fold-ground="dark"] .fold-text-piece[data-fold-hinge="right"]::after {
  background: linear-gradient(270deg, rgba(6, 21, 57, .88) 0%, rgba(6, 21, 57, .42) 45%, rgba(232, 237, 251, .32) 100%);
}

/* --- Light ground: the reference's own multiply crease, verbatim ----------- */
.fold-text[data-fold-ground="light"] { --fold-crease-blend: multiply; }

.fold-text[data-fold-ground="light"] .fold-text-piece[data-fold-hinge="top"]::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, .22) 42%, rgba(255, 255, 255, .26) 100%);
}
.fold-text[data-fold-ground="light"] .fold-text-piece[data-fold-hinge="bottom"]::after {
  background: linear-gradient(0deg, rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, .22) 42%, rgba(255, 255, 255, .26) 100%);
}
.fold-text[data-fold-ground="light"] .fold-text-piece[data-fold-hinge="left"]::after {
  background: linear-gradient(90deg, rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, .22) 42%, rgba(255, 255, 255, .26) 100%);
}
.fold-text[data-fold-ground="light"] .fold-text-piece[data-fold-hinge="right"]::after {
  background: linear-gradient(270deg, rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, .22) 42%, rgba(255, 255, 255, .26) 100%);
}

/* --- Reduced motion: the short fade survives, rotation and crease do not --- */
@media (prefers-reduced-motion: reduce) {
  .fold-text-piece { transform: none !important; }
  .fold-text-piece::after { opacity: 0 !important; }
  .fold-text.is-folding .fold-text-piece { will-change: auto; }
}