/* OTSEM ledger marketing — shared motion/illustration kit (fx.css)
   Loaded by all 8 static ledger pages. Reads each page's own CSS vars
   (--acc/--hair/--ink/--t3/--ease) with safe fallbacks. */

/* ── display face ─────────────────────────────────────────── */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/marketing/ledger/assets/space-grotesk-var-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/marketing/ledger/assets/space-grotesk-var-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root { --fx-ease: cubic-bezier(0.23, 1, 0.32, 1); }

/* ── keyframes ─────────────────────────────────────────────── */
@keyframes fxRise { from { opacity: 0; transform: translateY(16px); filter: blur(5px); } to { opacity: 1; transform: translateY(0); filter: none; } }
@keyframes fxNavIn { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fxFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes fxDraw { to { stroke-dashoffset: 0; } }
@keyframes fxTravel { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes fxNodeIn { from { opacity: 0; transform: scale(0.55); } to { opacity: 1; transform: scale(1); } }
@keyframes fxRing { 0% { opacity: 0.55; transform: scale(0.82); } 70% { opacity: 0; transform: scale(1.28); } 100% { opacity: 0; transform: scale(1.28); } }
@keyframes fxSpinSlow { to { transform: rotate(360deg); } }
@keyframes fxSpinSlowR { to { transform: rotate(-360deg); } }
@keyframes fxBreath { 0%, 100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes fxFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fxPop { 0% { opacity: 0; transform: scale(0.5); } 60% { transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
@keyframes fxAur1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(60px, -40px) scale(1.18); } }
@keyframes fxAur2 { 0%, 100% { transform: translate(0, 0) scale(1.1); } 50% { transform: translate(-70px, 30px) scale(0.94); } }

/* ── flow illustration (PIX → OTSEM → dólar) ───────────────── */
.fx-flow { display: block; width: 100%; pointer-events: none; }
.fx-flow svg { display: block; width: 100%; height: auto; overflow: visible; }
.fx-flow .fx-flow-m { display: none; }
.fx-flow .fx-rail { fill: none; stroke: var(--hair, #E2E1DA); stroke-width: 1.5; }
.fx-flow .fx-trace { fill: none; stroke: var(--acc, #6C28E6); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; opacity: 0.9; }
.fx-flow.fx-on .fx-trace { animation: fxDraw 2.2s var(--fx-ease) 0.15s forwards; }
.fx-flow .fx-node, .fx-flow .fx-label { opacity: 0; }
.fx-flow .fx-node { transform-box: fill-box; transform-origin: center; }
.fx-flow.fx-on .fx-node { animation: fxNodeIn 0.75s var(--fx-ease) forwards; }
.fx-flow.fx-on .fx-label { animation: fxFadeIn 0.9s var(--fx-ease) forwards; }
.fx-flow.fx-on .fx-g1 .fx-node { animation-delay: 0.15s; }
.fx-flow.fx-on .fx-g1 .fx-label { animation-delay: 0.5s; }
.fx-flow.fx-on .fx-g2 .fx-node { animation-delay: 0.95s; }
.fx-flow.fx-on .fx-g2 .fx-label { animation-delay: 1.25s; }
.fx-flow.fx-on .fx-g3 .fx-node { animation-delay: 1.75s; }
.fx-flow.fx-on .fx-g3 .fx-label { animation-delay: 2.05s; }
.fx-flow .fx-ring { transform-box: fill-box; transform-origin: center; opacity: 0; }
.fx-flow.fx-on .fx-ring { animation: fxRing 2.8s ease-out 2.1s infinite; }
.fx-flow .fx-label { font-family: var(--mono, 'IBM Plex Mono', monospace); font-size: 11.5px; letter-spacing: 0.08em; fill: var(--t3, #93959B); text-transform: uppercase; }
.fx-flow .fx-dot { display: none; fill: var(--acc, #6C28E6); }
@supports (offset-path: path("M0 0 L10 10")) {
  .fx-flow.fx-on .fx-dot { display: block; animation: fxTravel 7s linear infinite; animation-delay: 2.2s; }
  .fx-flow.fx-on .fx-dot.fx-dot2 { animation-delay: 5.4s; }
}
@media (max-width: 680px) {
  .fx-flow .fx-flow-d { display: none; }
  .fx-flow .fx-flow-m { display: block; max-width: 340px; margin: 0 auto; }
  .fx-flow .fx-label { font-size: 13px; }
}

/* ── vault illustration (segurança) ────────────────────────── */
.fx-vault { display: block; pointer-events: none; }
.fx-vault svg { display: block; width: 100%; height: auto; overflow: visible; }
.fx-vault .fx-orbit { transform-box: fill-box; transform-origin: center; animation: fxSpinSlow 46s linear infinite; }
.fx-vault .fx-orbit-r { transform-box: fill-box; transform-origin: center; animation: fxSpinSlowR 70s linear infinite; }
.fx-vault .fx-shield { transform-box: fill-box; transform-origin: center; animation: fxBreath 4.5s ease-in-out infinite; }
.fx-vault .fx-vdot { display: none; fill: var(--acc, #6C28E6); }
@supports (offset-path: path("M0 0 L10 10")) {
  .fx-vault .fx-vdot { display: block; animation: fxTravel 12s linear infinite; }
}

/* ── aurora ambient (dark pages) ───────────────────────────── */
.fx-aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.fx-aurora span { position: absolute; border-radius: 50%; will-change: transform; }
.fx-aurora .fx-a1 { width: 520px; height: 520px; top: -180px; right: -120px; background: radial-gradient(circle, color-mix(in srgb, var(--acc, #6C28E6) 16%, transparent), transparent 66%); animation: fxAur1 22s ease-in-out infinite; }
.fx-aurora .fx-a2 { width: 420px; height: 420px; bottom: -160px; left: -100px; background: radial-gradient(circle, color-mix(in srgb, var(--acc, #6C28E6) 11%, transparent), transparent 66%); animation: fxAur2 28s ease-in-out infinite; }

/* ── spotlight cards ───────────────────────────────────────── */
.fx-spot { position: relative; }
.fx-spot::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.35s var(--fx-ease); background: radial-gradient(240px circle at var(--fx-mx, 50%) var(--fx-my, 50%), color-mix(in srgb, var(--acc, #6C28E6) 9%, transparent), transparent 65%); }
.fx-spot:hover::after, .fx-spot.fx-spot-on::after { opacity: 1; }

/* ── icon pop-in rows ──────────────────────────────────────── */
[data-fxpop] > * { opacity: 0; }
[data-fxpop].fx-on > * { animation: fxPop 0.6s var(--fx-ease) forwards; }
[data-fxpop].fx-on > *:nth-child(1) { animation-delay: 0.05s; }
[data-fxpop].fx-on > *:nth-child(2) { animation-delay: 0.15s; }
[data-fxpop].fx-on > *:nth-child(3) { animation-delay: 0.25s; }
[data-fxpop].fx-on > *:nth-child(4) { animation-delay: 0.35s; }
[data-fxpop].fx-on > *:nth-child(5) { animation-delay: 0.45s; }
[data-fxpop].fx-on > *:nth-child(6) { animation-delay: 0.55s; }

/* ── tactile press (touch premium) ─────────────────────────── */
.fx-press { transition: transform 0.15s var(--fx-ease); }
.fx-press:active { transform: scale(0.965); }

/* ── mobile tuning ─────────────────────────────────────────── */
@media (max-width: 680px) {
  [data-orbits] { transform: scale(0.6); }
  [data-stats] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-navmid] { display: none !important; }
  [data-caixabody] { grid-template-columns: 1fr !important; }
  [data-balance] { font-size: 26px !important; white-space: nowrap; }
  [data-legalgrid] { grid-template-columns: 1fr !important; }
  [data-legalgrid] > aside { position: static !important; }
  .fx-aurora .fx-a1 { width: 340px; height: 340px; top: -120px; right: -90px; }
  .fx-aurora .fx-a2 { width: 280px; height: 280px; bottom: -110px; left: -80px; }
}

/* ── FAQ accordions (#lg-faq home, #neg-faq negócios) ───────── */
/* Native <details>/<summary>: hide the UA disclosure marker (inline
   styles can't reach pseudo-elements) and rotate the mono "+" when open. */
#lg-faq summary, #neg-faq summary { list-style: none; cursor: pointer; }
#lg-faq summary::-webkit-details-marker, #neg-faq summary::-webkit-details-marker { display: none; }
[data-faq-ind] { display: inline-block; transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); }
details[open] > summary [data-faq-ind] { transform: rotate(45deg); }

/* ── reduced motion: kit collapses to static ───────────────── */
@media (prefers-reduced-motion: reduce) {
  .fx-flow .fx-trace { stroke-dashoffset: 0; animation: none !important; }
  .fx-flow .fx-node, .fx-flow .fx-label { opacity: 1; animation: none !important; }
  .fx-flow .fx-dot, .fx-flow .fx-ring, .fx-vault .fx-vdot { display: none !important; animation: none !important; }
  .fx-vault .fx-orbit, .fx-vault .fx-orbit-r, .fx-vault .fx-shield { animation: none !important; }
  .fx-aurora span { animation: none !important; }
  [data-fxpop] > * { opacity: 1; animation: none !important; }
  [data-faq-ind] { transition: none; }
}