/* =============================================================================
   PayCard FX — vanilla port of the Magic UI / Aceternity effects
   No React, no build step, no dependencies. Drop-in for the PHP theme.
   Usage: <div class="pcf" data-fx="blur-fade">…</div>  + include paycard-fx.js
   Colours fall back to the tokens already defined in css/tokens.css
   (--ink-700, --brass-600, --teal-600 …) so it inherits the brand automatically.
   RTL-safe: marquee direction follows `dir` on the container.
   ============================================================================= */

/* ---------- shared vars ---------- */
.pcf {
  --pcf-beam: var(--brass-600, #a07c1f);
  --pcf-beam-2: var(--teal-600, #12907b);
  --pcf-line: var(--border, rgba(28, 40, 51, 0.12));
  position: relative;
}
@media (prefers-reduced-motion: reduce) {
  .pcf *, .pcf { animation: none !important; transition: none !important; }
}

/* ---------- 1. blur-fade / scroll reveal ---------- */
.pcf[data-fx="blur-fade"] {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--pcf-delay, 0ms);
}
.pcf[data-fx="blur-fade"].pcf--in { opacity: 1; filter: blur(0); transform: none; }

/* ---------- 2. marquee — verbatim logic from the previous (proven) build ----
   Source: agon-port/src/index.css + RatesTicker.tsx + BrandMarquee.tsx.
   The PHP renders the items twice, and the animation travels exactly -50%.
   When it reaches -50%, the second copy has landed exactly where the first
   started, so the loop is seamless. Container is dir="ltr", items are RTL. */
.pcf-marquee { overflow: hidden; }
.pcf-marquee__track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: var(--pcf-gap, 2.5rem);
  padding-inline: var(--pcf-gap, 2.5rem);
  animation: pcf-marquee var(--pcf-duration, 38s) linear infinite;
}
.pcf-marquee--slow .pcf-marquee__track { animation-duration: 55s; }
.pcf-marquee:hover .pcf-marquee__track { animation-play-state: paused; }
@keyframes pcf-marquee { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .pcf-marquee__track { animation: none !important; }
}

/* vertical variant for testimonial rails */
.pcf-marquee--v { flex-direction: column; height: var(--pcf-height, 340px); }
.pcf-marquee--v .pcf-marquee__track {
  flex-direction: column;
  animation-name: pcf-marquee-v;
  justify-content: space-between;
}
@keyframes pcf-marquee-v { to { transform: translateY(-50%); } }

/* ---------- 3. shiny text (brass sweep over a word) ---------- */
.pcf-shiny {
  background: linear-gradient(110deg, var(--pcf-dim, #7e8b96) 45%, var(--pcf-beam) 55%, #fff 60%, var(--pcf-beam) 65%, var(--pcf-dim, #7e8b96) 75%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: pcf-shiny 6s linear infinite;
}
@keyframes pcf-shiny {
  0%, 40% { background-position: -220px 0, 0 0; }
  60%, 100% { background-position: calc(100% + 220px) 0, 0 0; }
}

/* ---------- 4. border beam (rotating highlight on a card) ---------- */
.pcf[data-fx="border-beam"]::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--pcf-angle, 0deg), transparent 0 55%, var(--pcf-beam) 70%, var(--pcf-beam-2) 78%, transparent 88%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: pcf-spin 5s linear infinite;
  pointer-events: none;
}
@property --pcf-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes pcf-spin { to { --pcf-angle: 360deg; } }

/* ---------- 5. dot + grid pattern backgrounds (SVG, no image files) ---------- */
.pcf-dots {
  background-size: 22px 22px;
}
.bento__card.pcf-dots {
  background-image:
    radial-gradient(var(--pcf-line) 1px, transparent 1px),
    linear-gradient(155deg, var(--ink-800, #16283C), var(--ink-900, #0B1622));
  background-size: 22px 22px, auto;
}
.bento__card--paper.pcf-dots {
  background-image:
    radial-gradient(var(--pcf-line) 1px, transparent 1px),
    color-mix(in srgb, var(--bg-sunken) 82%, transparent);
  background-size: 22px 22px, auto;
}
.pcf-grid {
  background-image: linear-gradient(to right, var(--pcf-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--pcf-line) 1px, transparent 1px);
  background-size: 56px 56px;
}
.pcf-fade-b { mask-image: linear-gradient(#000 30%, transparent); }
.pcf-fade-radial { mask-image: radial-gradient(60% 60% at 50% 40%, #000, transparent); }

/* ---------- 6. aurora-ish gradient text (headline) ---------- */
.pcf-aurora {
  background: linear-gradient(100deg, var(--pcf-beam), var(--pcf-beam-2), var(--pcf-beam), var(--pcf-beam-2));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: pcf-aurora 8s ease-in-out infinite alternate;
}
@keyframes pcf-aurora { to { background-position: 200% 0; } }

/* ---------- 7. glare card (pointer-tracking highlight) ---------- */
.pcf[data-fx="glare"] {
  overflow: hidden;
  isolation: isolate;
}
.pcf[data-fx="glare"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.35s;
  background: radial-gradient(280px circle at var(--pcf-x, 50%) var(--pcf-y, 50%), rgba(255, 255, 255, 0.16), transparent 65%);
  pointer-events: none;
}
.pcf[data-fx="glare"]:hover::after { opacity: 1; }

/* ---------- 8. ripple ring (money / tap affordance) ---------- */
.pcf-ripple { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.pcf-ripple i {
  position: absolute;
  top: 50%; left: 50%;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border: 1px solid var(--pcf-beam-2);
  border-radius: 50%;
  animation: pcf-ripple 3.6s ease-out infinite;
}
.pcf-ripple i:nth-child(2) { animation-delay: 1.2s; }
.pcf-ripple i:nth-child(3) { animation-delay: 2.4s; }
@keyframes pcf-ripple { to { transform: scale(22); opacity: 0; } }

/* ---------- 9. typing caret + word swap ---------- */
.pcf-type::after { content: "▍"; animation: pcf-caret 1s steps(1) infinite; color: var(--pcf-beam); }
@keyframes pcf-caret { 50% { opacity: 0; } }
.pcf-rotate { display: inline-block; position: relative; vertical-align: bottom; }
.pcf-rotate span { display: block; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s; }
.pcf-rotate span:not(.pcf--on) { position: absolute; inset: 0; opacity: 0; transform: translateY(0.6em); }

/* ---------- 10. number ticker uses JS only ---------- */
.pcf[data-fx="ticker"] { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }