/* ============================================================================
   FINOVAI · Text & heading FX (Phase 4c). Token-driven, on-demand.
   Double Heading · Clip Text · Rotated Text · Text Path · Marquee · Button · Socials
   ============================================================================ */

/* ---- Double Heading ------------------------------------------------------ */
.fv-dh { position: relative; }
.fv-dh--center { text-align: center; }
.fv-dh__watermark { position: absolute; left: 0; right: 0; top: -.4em; font-family: var(--fv-font-display); font-weight: 800; font-size: clamp(4rem, 12vw, 9rem); letter-spacing: -.04em; line-height: 1; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--fv-fg) 12%, transparent); z-index: 0; pointer-events: none; white-space: nowrap; overflow: hidden; }
.fv-dh--center .fv-dh__watermark { text-align: center; }
.fv-dh__inner { position: relative; z-index: 1; }
.fv-dh__eyebrow { margin-bottom: .9rem; }
.fv-dh__title { font-size: var(--fv-text-3xl); }
.fv-dh__title em { font-style: normal; color: var(--fv-accent); }
.fv-dh__sub { color: var(--fv-fg-soft); font-size: var(--fv-text-lg); margin-top: 1rem; max-width: 54ch; }
.fv-dh--center .fv-dh__sub { margin-inline: auto; }

/* ---- Background-Clip Text ------------------------------------------------ */
.fv-clip { font-family: var(--fv-font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-size: clamp(2.4rem, 7vw, 6rem); background: linear-gradient(100deg, var(--fv-accent), var(--fv-gold)); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; }
.fv-clip--animated { background-size: 220% auto; animation: fv-clipmove 6s linear infinite; }
@keyframes fv-clipmove { to { background-position: 220% center; } }

/* ---- Rotated Text -------------------------------------------------------- */
.fv-rot { display: inline-block; transform-origin: center; font-family: var(--fv-font-mono); font-size: .8rem; letter-spacing: .28em; text-transform: uppercase; color: var(--fv-fg-soft); }

/* ---- Text Path ----------------------------------------------------------- */
.fv-textpath { display: inline-block; }
.fv-textpath svg { width: 100%; height: 100%; overflow: visible; }
.fv-textpath text { font-family: var(--fv-font-mono); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; fill: var(--fv-accent); }
.fv-textpath--spin svg { animation: fv-spin 16s linear infinite; }
@keyframes fv-spin { to { transform: rotate(360deg); } }

/* ---- Animated Marquee ---------------------------------------------------- */
.fv-marquee { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.fv-marquee__track { display: inline-flex; align-items: center; gap: 2.6rem; width: max-content; animation: fv-marq var(--speed, 32s) linear infinite; }
.fv-marquee--reverse .fv-marquee__track { animation-direction: reverse; }
.fv-marquee--pause:hover .fv-marquee__track { animation-play-state: paused; }
.fv-marquee__item { font-family: var(--fv-font-display); font-weight: 600; font-size: var(--fv-text-xl); color: var(--fv-fg-soft); white-space: nowrap; display: inline-flex; align-items: center; gap: 2.6rem; }
.fv-marquee__item::after { content: "\2022"; color: var(--fv-accent); }
@keyframes fv-marq { to { transform: translateX(-50%); } }

/* ---- Button -------------------------------------------------------------- */
.fv-btn--lg { padding: 1.15rem 2rem; font-size: 1rem; }
.fv-btn--sm { padding: .7rem 1.2rem; font-size: .85rem; }
.fv-btn svg { width: 16px; height: 16px; }
.fv-btn__wrap { display: inline-block; }
.fv-btn__wrap--center { display: flex; justify-content: center; }

/* ---- Social Icons -------------------------------------------------------- */
.fv-socials { display: flex; gap: .6rem; }
.fv-socials--center { justify-content: center; }
.fv-socials a { width: var(--sz, 42px); height: var(--sz, 42px); display: grid; place-items: center; border: 1px solid var(--fv-border); border-radius: var(--shape, 50%); color: var(--fv-fg); transition: background var(--fv-dur-fast), color var(--fv-dur-fast), border-color var(--fv-dur-fast), transform var(--fv-dur-fast); }
.fv-socials a:hover { background: var(--fv-accent); color: #fff; border-color: var(--fv-accent); transform: translateY(-3px); }
.fv-socials svg { width: 45%; height: 45%; fill: currentColor; }