/*! payitfast-engine.css
 *  Companion stylesheet for payitfast-engine.js:
 *    - Reveal states for [data-reveal]
 *    - Footer-link char-hover effect
 *    - Mobile nav helpers
 */

/* ===== 1. Reveal start/end states =====
 *  Graceful degradation: default state is VISIBLE. JS adds .pif-hidden only
 *  after confirming it can observe & reveal the element. */
[data-reveal] {
  will-change: opacity, transform, filter;
  transition:
    opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1),
    transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1),
    filter 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
}

[data-reveal].pif-hidden { opacity: 0; }

[data-reveal="fade-up"].pif-hidden     { transform: translate3d(0, 50px, 0); filter: blur(2px); }
[data-reveal="fade-in"].pif-hidden     { transform: none;                     filter: blur(2px); }
[data-reveal="fade-down"].pif-hidden   { transform: translate3d(0, -50px, 0); filter: blur(2px); }
[data-reveal="fade-left"].pif-hidden   { transform: translate3d(50px, 0, 0);  filter: blur(2px); }
[data-reveal="fade-right"].pif-hidden  { transform: translate3d(-50px, 0, 0); filter: blur(2px); }
[data-reveal="scale-in"].pif-hidden    { transform: scale3d(0.92, 0.92, 1);   filter: blur(2px); }
[data-reveal="rise"].pif-hidden        { transform: translate3d(0, 24px, 0);  filter: none; }

[data-reveal].is-revealed,
[data-reveal]:not(.pif-hidden) {
  opacity: 1;
  transform: none;
  filter: none;
}

[data-reveal="split-title"].pif-split-pending { visibility: hidden; }

/* Word wrappers clip chars sliding from below baseline.
 * Padding-bottom prevents descenders (g, p, y) from being clipped. */
[data-reveal="split-title"] .pif-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.1em;
}
[data-reveal="split-title"] .pif-char {
  display: inline-block;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    transition-duration: 0.01s;
  }
  [data-reveal].pif-hidden {
    transform: none !important;
    filter: none !important;
  }
}

/* ===== 2. Footer-link char hover =====
 *  Structure built by JS:
 *    a.pif-footer-link.fl-ready > span.fl-stack
 *      > span.fl-line.fl-line--top    (default visible)
 *        > span.fl-char * N
 *      > span.fl-line.fl-line--bottom (positioned below; slides up on hover)
 *        > span.fl-char * N
 */
a.pif-footer-link.fl-ready {
  display: inline-block;
  overflow: hidden;
  line-height: 1.2;
  vertical-align: bottom;
}
.fl-stack {
  position: relative;
  display: inline-block;
}
.fl-line {
  display: inline-block;
  white-space: nowrap;
}
.fl-line--bottom {
  position: absolute;
  left: 0;
  top: 100%;
}
.fl-char {
  display: inline-block;
  transform: translateY(0);
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
a.pif-footer-link.fl-ready:hover .fl-line--top .fl-char,
a.pif-footer-link.fl-ready:focus-visible .fl-line--top .fl-char {
  transform: translateY(-100%);
}
a.pif-footer-link.fl-ready:hover .fl-line--bottom .fl-char,
a.pif-footer-link.fl-ready:focus-visible .fl-line--bottom .fl-char {
  transform: translateY(-100%);
}

/* ===== 3. Mobile nav helpers ===== */
body.nav-open { overflow: hidden; }
.pif-link-block { display: inline-block; }