/* Fast Financial — Elevation layer (art direction + motion)
 * Loaded AFTER site.css on every template. Pure enhancement: every page
 * renders complete and static without elevate.js. Anything kinetic is
 * double-gated behind html.elv (set by elevate.js) and prefers-reduced-motion.
 * Brand voice: modern fintech power — kinetic precision, data alive.
 */

/* ====================== 1 · Editorial type scale ====================== */
/* Oversized display headlines against the existing fine detail text. */
.hero h1 { font-size: clamp(3.2rem, 1.6rem + 5.8vw, 5.4rem); line-height: 0.98; letter-spacing: -0.035em; }
.subhero h1 { font-size: clamp(2.6rem, 1.6rem + 4.4vw, 4.3rem); line-height: 1.02; }
.sec-head h2 { font-size: clamp(2.05rem, 1.3rem + 2.6vw, 3.25rem); line-height: 1.05; }
.ff-cta h2 { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.3rem); }
.hero__lead, .subhero__lead { text-wrap: pretty; }

/* Precision tick before eyebrow labels — fine detail against big display type */
.ff-eyebrow::before {
  content: ""; display: inline-block; flex: none;
  width: 18px; height: 2px; border-radius: 1px;
  background: currentColor; opacity: 0.45;
  margin-right: 8px; vertical-align: middle;
}

/* ====================== 2 · Hero / subhero atmosphere ================= */
/* Layered depth: brand wash + a fading precision grid (charting paper). */
.hero::before { background:
  radial-gradient(58% 76% at 86% -12%, rgba(224, 22, 36, .09), transparent 62%),
  radial-gradient(46% 60% at 0% -6%, rgba(21, 112, 143, .06), transparent 60%); }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to bottom, var(--ff-ink-100) 1px, transparent 1px),
    linear-gradient(to right, var(--ff-ink-100) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(80% 120% at 78% -12%, rgba(0, 0, 0, .5), transparent 70%);
  mask-image: radial-gradient(80% 120% at 78% -12%, rgba(0, 0, 0, .5), transparent 70%);
}
.hero__grid { z-index: 1; }

.subhero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to bottom, var(--ff-ink-100) 1px, transparent 1px),
    linear-gradient(to right, var(--ff-ink-100) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(60% 110% at 92% -10%, rgba(0, 0, 0, .4), transparent 70%);
  mask-image: radial-gradient(60% 110% at 92% -10%, rgba(0, 0, 0, .4), transparent 70%);
}
.subhero__inner { z-index: 1; }

/* ====================== 3 · Snapshot card (hero media) ================ */
.snap {
  border-radius: calc(var(--radius-xl) + 4px);
  box-shadow: 0 0 0 1px rgba(10, 14, 20, .035), inset 0 1px 0 rgba(255, 255, 255, .85), var(--shadow-xl);
}
.snap__spark { position: relative; overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  /* bars rise like a live chart filling in */
  html.elv .snap__spark i { transform-origin: bottom; animation: elv-bar .85s var(--ease-out) both; }
  html.elv .snap__spark i:nth-child(1)  { animation-delay: .50s; }
  html.elv .snap__spark i:nth-child(2)  { animation-delay: .56s; }
  html.elv .snap__spark i:nth-child(3)  { animation-delay: .62s; }
  html.elv .snap__spark i:nth-child(4)  { animation-delay: .68s; }
  html.elv .snap__spark i:nth-child(5)  { animation-delay: .74s; }
  html.elv .snap__spark i:nth-child(6)  { animation-delay: .80s; }
  html.elv .snap__spark i:nth-child(7)  { animation-delay: .86s; }
  html.elv .snap__spark i:nth-child(8)  { animation-delay: .92s; }
  html.elv .snap__spark i:nth-child(9)  { animation-delay: .98s; }
  html.elv .snap__spark i:nth-child(10) { animation-delay: 1.04s; }
  /* periodic data-refresh sweep across the chart */
  html.elv .snap__spark::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-120%);
    background: linear-gradient(100deg, transparent 32%, rgba(255, 255, 255, .6) 50%, transparent 68%);
    animation: elv-scan 7.5s var(--ease-in-out) 3.4s infinite;
  }
}
@keyframes elv-bar { from { transform: scaleY(.06); } }
@keyframes elv-scan {
  0% { transform: translateX(-120%); }
  24% { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

/* ====================== 4 · Buttons (CTA prominence) ================== */
.ff-btn--primary {
  position: relative; overflow: hidden;
  box-shadow: 0 14px 30px -10px rgba(224, 22, 36, .45), 0 2px 6px -2px rgba(224, 22, 36, .30);
}
.ff-btn--primary::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .30) 50%, transparent 60%);
  transform: translateX(-130%);
}
.ff-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px -10px rgba(224, 22, 36, .55), 0 3px 8px -2px rgba(224, 22, 36, .30);
}
.ff-btn--primary:hover::after { transform: translateX(130%); transition: transform .7s var(--ease-out); }

/* ====================== 5 · Cards & tables ============================ */
.ff-pathway::before { transition: height var(--dur-base) var(--ease-out); }
.ff-pathway:hover::before { height: 7px; }
.ff-pathway:hover { transform: translateY(-5px); }

.calc-card:hover, .art-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.art-card__img { position: relative; overflow: hidden; }
.art-card__img::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-130%);
  background: linear-gradient(120deg, transparent 45%, rgba(255, 255, 255, .18) 55%, transparent 65%);
}
.art-card:hover .art-card__img::after { transform: translateX(130%); transition: transform .8s var(--ease-out); }

.review { transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.review:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.market__cell { transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-base); }
.market__cell:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }

.ff-table tbody tr { transition: background var(--dur-fast) linear; }
.ff-table tbody tr:not([data-highlight="true"]):hover { background: var(--ff-ink-25); }

/* ====================== 6 · Process connector ========================= */
@media (min-width: 821px) {
  .step::after {
    content: ""; position: absolute; top: 21px; left: 56px; right: 12px; height: 2px;
    background: linear-gradient(90deg, var(--ff-ink-150), var(--ff-ink-100) 80%, transparent);
  }
  .step:last-child::after { display: none; }
}

/* ====================== 7 · Header depth on scroll ==================== */
.ff-header { transition: box-shadow .35s var(--ease-out), background .35s var(--ease-out); }
html.elv-scrolled .ff-header {
  background: color-mix(in srgb, var(--ff-white) 94%, transparent);
  box-shadow: 0 12px 32px -24px rgba(10, 14, 20, .40);
}

/* ====================== 8 · CTA section =============================== */
.ff-cta { box-shadow: var(--shadow-xl); }
.ff-cta::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 130% at 88% -10%, black, transparent 72%);
  mask-image: radial-gradient(70% 130% at 88% -10%, black, transparent 72%);
}
.ff-cta__inner { z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  html.elv .ff-cta__glow { animation: elv-breathe 7s var(--ease-in-out) infinite alternate; }
}
@keyframes elv-breathe {
  from { opacity: .78; transform: scale(1); }
  to { opacity: 1; transform: scale(1.12); }
}

/* ====================== 9 · Scroll reveals ============================ */
/* Hidden states exist ONLY when elevate.js has confirmed IO support and
   motion is allowed (html.elv). No JS or reduced motion → fully static. */
@media (prefers-reduced-motion: no-preference) {
  html.elv [data-elv] { opacity: 0; transform: translateY(26px); }
  html.elv .snap[data-elv] { transform: translateY(34px) scale(.975); }
  html.elv .ff-cta[data-elv] { transform: translateY(30px) scale(.99); }
  html.elv [data-elv].elv-in {
    opacity: 1; transform: none;
    transition: opacity .8s var(--ease-out) var(--elv-d, 0ms),
                transform .8s var(--ease-out) var(--elv-d, 0ms);
  }
}
/* Mobile: shorter, cheaper variants */
@media (prefers-reduced-motion: no-preference) and (max-width: 820px) {
  html.elv [data-elv] { transform: translateY(14px); }
  html.elv .snap[data-elv] { transform: translateY(16px); }
  html.elv [data-elv].elv-in { transition-duration: .5s, .5s; }
}
/* Print: everything visible, no transforms */
@media print {
  html.elv [data-elv] { opacity: 1 !important; transform: none !important; }
  .elv-ratewire { display: none !important; }
}
/* Watchdog fallback: embeddings where CSS transitions/animations never
   advance (elevate.js adds .elv-static after probing) — show everything. */
html.elv-static [data-elv] { opacity: 1 !important; transform: none !important; transition: none !important; }
html.elv-static .snap__spark i,
html.elv-static .snap__spark::after,
html.elv-static .ff-cta__glow,
html.elv-static .elv-ratewire .w-halo { animation: none !important; }
html.elv-static .snap__spark i { transform: none !important; }

/* ====================== 10 · Signature: the rate wire ================= */
/* A thin rate line drawn across the hero floor — the decision engine
   driving a rate down and to the right, ending in a live pulse. */
.elv-ratewire {
  position: absolute; left: 0; bottom: -2px; width: 100%; height: 56%;
  pointer-events: none; z-index: 0;
}
html.elv .hero .elv-ratewire { transform: translate3d(0, calc(var(--elv-py, 0) * 1px), 0); }
.elv-ratewire .w-area { opacity: 0; transition: opacity 1.6s var(--ease-out) .8s; }
.elv-ratewire.elv-draw .w-area { opacity: 1; }
.elv-ratewire .w-line { fill: none; stroke-width: 2; }
.elv-ratewire .w-dot { fill: var(--ff-red-500); opacity: 0; }
.elv-ratewire.elv-draw .w-dot { opacity: 1; }
.elv-ratewire .w-halo {
  fill: none; stroke: var(--ff-red-500); stroke-width: 2; opacity: 0;
  transform-box: fill-box; transform-origin: center;
}
@media (prefers-reduced-motion: no-preference) {
  html.elv .elv-ratewire.elv-settled .w-halo { animation: elv-halo 3s var(--ease-out) infinite; }
}
@keyframes elv-halo {
  0% { opacity: .5; transform: scale(.5); }
  70% { opacity: 0; transform: scale(2.4); }
  100% { opacity: 0; transform: scale(2.4); }
}
@media (max-width: 740px) { .elv-ratewire { display: none; } }

/* ====================== 11 · Premium interaction layer ================ */
/* Pointer-reactive depth on the key cards + magnetic CTAs + a cursor-follow
   gloss on the hero snapshot. All transform/opacity only, double-gated behind
   html.elv + reduced-motion, and desktop-only (elevate.js skips coarse pointers
   and narrow viewports). Idle state is identical to the static page. */

/* -- Arrow & icon micro-nudges (cheap, expected on a high-end CTA) -- */
@media (prefers-reduced-motion: no-preference) {
  .ff-btn svg { transition: transform .25s var(--ease-out); }
  .ff-btn:hover svg { transform: translateX(3px); }
  .ff-pathway__cta svg { transition: transform .3s var(--ease-out); }
  .ff-pathway:hover .ff-pathway__cta svg { transform: translateX(5px); }
  .calc-card__link { transition: transform .3s var(--ease-out); }
  .calc-card:hover .calc-card__link { transform: translateX(3px); }
  .ff-pathway__icon, .calc-card__icon { transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
  .ff-pathway:hover .ff-pathway__icon,
  .calc-card:hover .calc-card__icon { transform: translateY(-3px) scale(1.07); }
}

/* -- Pointer tilt on pathway / calc / article cards + hero snapshot -- */
@media (prefers-reduced-motion: no-preference) and (min-width: 821px) {
  html.elv .elv-tilt {
    transition: transform .22s var(--ease-out), box-shadow .3s var(--ease-out);
    transform-origin: center;
  }
  html.elv .ff-pathway.elv-tilt:hover {
    transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px);
    box-shadow: var(--shadow-xl);
  }
  html.elv .calc-card.elv-tilt:hover,
  html.elv .art-card.elv-tilt:hover {
    transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-5px);
    box-shadow: var(--shadow-xl);
  }
  html.elv .snap.elv-tilt:hover {
    transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  }

  /* one-pass diagonal sheen on hover (same gloss language as the buttons) */
  .elv-sheen { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 2; }
  .elv-sheen::before {
    content: ""; position: absolute; top: -30%; left: -65%; width: 42%; height: 160%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
    transform: skewX(-12deg); opacity: 0;
  }
  html.elv .elv-tilt:hover .elv-sheen::before { animation: elv-cardsheen .9s var(--ease-out); }
  @keyframes elv-cardsheen {
    0% { left: -65%; opacity: 0; }
    25% { opacity: .85; }
    100% { left: 150%; opacity: 0; }
  }

  /* cursor-follow gloss on the hero snapshot (its showpiece moment) */
  .elv-gloss {
    position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
    opacity: 0; transition: opacity .4s var(--ease-out); mix-blend-mode: soft-light;
    background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .45), transparent 60%);
  }
  html.elv .snap.elv-tilt:hover .elv-gloss { opacity: 1; }
}

/* -- Magnetic primary/secondary CTAs (large buttons only) -- */
@media (prefers-reduced-motion: no-preference) and (min-width: 821px) {
  html.elv .ff-btn.elv-mag { transition: transform .18s var(--ease-out), box-shadow .3s var(--ease-out); }
  html.elv .ff-btn.elv-mag:hover { transform: translate3d(var(--mgx, 0), var(--mgy, 0), 0); }
}

/* -- Process connector lines wipe in as the steps reveal -- */
@media (prefers-reduced-motion: no-preference) and (min-width: 821px) {
  html.elv .step::after { transform: scaleX(0); transform-origin: left center; }
  html.elv .step.elv-in::after {
    transform: scaleX(1);
    transition: transform .7s var(--ease-out) calc(var(--elv-d, 0ms) + .22s);
  }
}

/* -- Eyebrow precision tick draws out as its block reveals -- */
@media (prefers-reduced-motion: no-preference) {
  html.elv [data-elv] .ff-eyebrow::before,
  html.elv .ff-eyebrow[data-elv]::before { width: 0; opacity: 0; }
  html.elv [data-elv].elv-in .ff-eyebrow::before,
  html.elv .ff-eyebrow[data-elv].elv-in::before {
    width: 18px; opacity: .45;
    transition: width .6s var(--ease-out) calc(var(--elv-d, 0ms) + .12s),
                opacity .6s ease calc(var(--elv-d, 0ms) + .12s);
  }
}

/* Static-fallback resets for the new reveal-gated states */
html.elv-static .step::after { transform: none !important; }
html.elv-static .ff-eyebrow::before { width: 18px !important; opacity: .45 !important; }
html.elv-static .elv-sheen, html.elv-static .elv-gloss { display: none !important; }