/* =====================================================================
   Motion — quiet and precise. Animations only run with html.motion
   (set by motion.js when JS is on and the visitor doesn't prefer reduced motion).
   ===================================================================== */
:root { --e-out: cubic-bezier(.16,1,.3,1); --e-std: cubic-bezier(.4,0,.2,1); --e-spring: cubic-bezier(.34,1.45,.64,1); }

/* ---------- Entrances ---------- */
.motion .ln { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.motion .ln-i { display: block; transform: translateY(108%); transition: transform 1s var(--e-out) var(--d, 0ms); }
.motion.ready .ln-i { transform: none; }
.motion [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--e-out) var(--d, 0ms), transform .9s var(--e-out) var(--d, 0ms); }
.motion [data-reveal].in { opacity: 1; transform: none; }
.motion .swap[data-reveal] { transform: translateY(22px) scale(.985); }
.motion .swap[data-reveal].in { transform: none; }

/* ---------- Pointer light on surfaces ---------- */
.leg, .step, .card, .chat-topics button { position: relative; }
.swap::after, .card::after, .step::after, .leg::after, .chat-topics button::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 4%, transparent), transparent 70%);
  transition: opacity .5s var(--e-out);
}
.leg::after { background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--ink) 3%, transparent), transparent 70%); }
.lit::after { opacity: 1; }
.motion .swap { transition: box-shadow .5s var(--e-out); will-change: transform; }
.motion .swap.lit { box-shadow: var(--shadow), var(--glow), 0 40px 90px -60px color-mix(in srgb, var(--accent) 22%, transparent); }

/* Hero: a faint light following the pointer */
.hero { position: relative; isolation: isolate; }
.motion .hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(640px circle at var(--hx, 72%) var(--hy, 40%), color-mix(in srgb, var(--accent) 3%, transparent), transparent 65%);
  /* Fades out before the section's bottom edge, so there is no hard line where the next section starts. */
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
}

/* ---------- Buttons: sheen, ripple, press ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; transition: transform .25s var(--e-spring), filter .2s, background-color .3s var(--e-out), color .3s; }
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .35s var(--e-out);
  background: radial-gradient(140px circle at var(--bx, 50%) var(--by, 50%), rgba(255,255,255,.22), transparent 70%);
}
.btn:not([disabled]):hover::before { opacity: 1; }
.btn:not([disabled]):active { transform: scale(.975); }
.ripple { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .14; transform: scale(0); animation: ripple .7s var(--e-out) forwards; z-index: 0; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }
.asset-btn, .more-btn, .paste, .chat-topics button, .asset-item, .icon-btn { overflow: hidden; }
.asset-btn { transition: border-color .3s var(--e-out), transform .35s var(--e-spring), box-shadow .3s var(--e-out); }
.asset-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -12px rgba(10,10,10,.35); }
.asset-btn:active { transform: scale(.97); }
.asset-btn .chev { transition: transform .35s var(--e-out); }
.asset-btn:hover .chev { transform: translateY(2px); }
.flip { transition: transform .6s var(--e-spring), box-shadow .3s; }
.flip:hover { transform: translate(-50%, -50%) rotate(180deg) scale(1.06); }

/* ---------- Switches: springy knob that stretches while pressed ---------- */
.switch .track { transition: background-color .35s var(--e-out); }
.switch .track::after { transition: transform .45s var(--e-spring), width .25s var(--e-out); }
.switch:active .track::after { width: 18px; }
.switch:active input:checked + .track::after { transform: translateX(8px); }

/* ---------- Inputs: soft focus halo ---------- */
.input { transition: border-color .3s var(--e-out), box-shadow .4s var(--e-out), background-color .3s; }
.input:focus, .leg:has(.amount:not([readonly]):focus) { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
.leg { transition: border-color .3s var(--e-out), box-shadow .4s var(--e-out); }

/* ---------- "+ Opções" ---------- */
.more-btn .plus { transition: transform .5s var(--e-spring), background-color .3s var(--e-out), color .3s; }
.more-on .tag { animation: tagIn .4s var(--e-out); }
@keyframes tagIn { from { opacity: 0; transform: translateY(4px) scale(.96); } }

/* ---------- Asset picker: backdrop, card and a staggered list ---------- */
.motion .modal.open .modal-bg { animation: fadeIn .35s var(--e-out); }
.motion .modal.open .modal-card { animation: sheetIn .5s var(--e-out); }
.motion .modal.open .asset-item { animation: rowIn .45s var(--e-out) backwards; animation-delay: calc(var(--i, 0) * 18ms + 60ms); }
.motion .modal.closing .modal-bg { animation: fadeOut .22s var(--e-std) forwards; }
.motion .modal.closing .modal-card { animation: sheetOut .22s var(--e-std) forwards; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes sheetIn { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes sheetOut { to { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes rowIn { from { opacity: 0; transform: translateY(8px); } }
.asset-item { transition: background-color .25s var(--e-out), transform .3s var(--e-out); }
.asset-item:hover { transform: translateX(3px); }
.asset-item .coin { transition: transform .45s var(--e-spring); }
.asset-item:hover .coin { transform: scale(1.08) rotate(-6deg); }

/* ---------- Chat: grows out of its button, messages slide in ---------- */
.chat-panel { transform-origin: calc(100% - 26px) calc(100% + 30px); }
.motion .chat-panel.opening { animation: chatIn .55s var(--e-out); }
.motion .chat-panel.closing { animation: chatOut .24s var(--e-std) forwards; }
@keyframes chatIn { from { opacity: 0; transform: scale(.9) translateY(12px); filter: blur(4px); } }
@keyframes chatOut { to { opacity: 0; transform: scale(.94) translateY(8px); filter: blur(2px); } }
/* The button itself never moves or fades: it stays put in the corner. */
.chat-fab .i-open, .chat-fab .i-close { grid-area: 1 / 1; display: block !important; }
.chat-fab .i-close { opacity: 0; }
.chat-fab.on .i-open { opacity: 0; }
.chat-fab.on .i-close { opacity: 1; }
.motion .msg.new { animation: msgIn .45s var(--e-out) backwards; }
.motion .msg.user.new { animation-name: msgInR; }
@keyframes msgIn { from { opacity: 0; transform: translate(-4px, 8px); } }
@keyframes msgInR { from { opacity: 0; transform: translate(4px, 8px); } }
.motion .chat-welcome > * { animation: rowIn .5s var(--e-out) backwards; }
.motion .chat-welcome > *:nth-child(2) { animation-delay: 50ms; }
.motion .chat-welcome > *:nth-child(3) { animation-delay: 90ms; }
.motion .chat-topics button { animation: rowIn .5s var(--e-out) backwards; animation-delay: calc(var(--i, 0) * 35ms + 120ms); }
.chat-topics button { transition: border-color .3s var(--e-out), transform .35s var(--e-spring); }
.chat-topics button:hover { transform: translateY(-2px); }

/* ---------- Tooltip ---------- */
.tip-float { transform-origin: 50% 100%; transform: translateY(4px) scale(.96); transition: opacity .2s var(--e-out), transform .35s var(--e-out), visibility .2s; }
.tip-float.show { transform: none; }

/* ---------- Links: an underline that draws itself ---------- */
.f-col a, .f-legal a { width: max-content; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--e-out), color .3s; }
.f-col a:hover, .f-legal a:hover { background-size: 100% 1px; }

/* ---------- Order page ---------- */
.stepper .bar { transition: background-color .6s var(--e-out); }
.motion .order-swap-in { animation: rowIn .5s var(--e-out); }

/* ---------- How it works: a streak of light travels the route, stop by stop ----------
   One loop of --T with --n hops (Normal: 2 hops in 5.2s; Privacy: 4 hops in 6.4s, one per stop).
   Every hop runs the same keyframes, delayed by its turn (--k): it leaves a disc, rides the line, docks against the next
   disc and that disc lights up softly while the next hop leaves it. The streak shows only while moving.
   Runs only while the diagram is on screen (.play, set by how.js). */
.motion .flow.play .lane .mover,
.motion .flow.play .lane .pk,
.motion .flow.play .lane .pk::before,
.motion .flow.play .ping {
  animation-duration: var(--T); animation-iteration-count: infinite;
  animation-delay: calc(var(--k) * var(--T) / var(--n));
}
.motion .flow.play .lane .mover { animation-name: hop2; animation-timing-function: cubic-bezier(.6,0,.3,1); }
.motion .flow.play .lane .pk { animation-name: hop2Pk; animation-timing-function: linear; }
.motion .flow.play .lane .pk::before { animation-name: hop2Tail; animation-timing-function: ease-in-out; }
.motion .flow.play .ping { animation-name: hop2Ping; animation-timing-function: ease-in-out; }
.motion .how[data-mode="pv"] .flow.play .lane .mover { animation-name: hop4; }
.motion .how[data-mode="pv"] .flow.play .lane .pk { animation-name: hop4Pk; }
.motion .how[data-mode="pv"] .flow.play .lane .pk::before { animation-name: hop4Tail; }
.motion .how[data-mode="pv"] .flow.play .ping { animation-name: hop4Ping; }
.motion .flow.play .orbit { animation: orbit 16s linear infinite; }
.motion .how[data-mode="pv"] .flow.play .seg-b { animation: dashFlow .9s linear infinite; }
/* Normal: each hop owns half the loop (runs 4% → 36%). */
@keyframes hop2 { 0%, 4% { transform: translateX(0); } 36%, 100% { transform: translateX(100%); } }
@keyframes hop2Pk { 0%, 4% { opacity: 0; } 8%, 34% { opacity: 1; } 37.5%, 100% { opacity: 0; } }
@keyframes hop2Tail { 0%, 4% { transform: scaleX(0); } 20% { transform: scaleX(1); } 34%, 100% { transform: scaleX(0); } }
@keyframes hop2Ping { 0%, 33% { opacity: 0; } 41%, 45% { opacity: 1; } 60%, 100% { opacity: 0; } }
/* Privacy: each hop owns a quarter of the loop (runs 2% → 19%). */
@keyframes hop4 { 0%, 2% { transform: translateX(0); } 19%, 100% { transform: translateX(100%); } }
@keyframes hop4Pk { 0%, 2% { opacity: 0; } 5%, 18% { opacity: 1; } 20%, 100% { opacity: 0; } }
@keyframes hop4Tail { 0%, 2% { transform: scaleX(0); } 10% { transform: scaleX(1); } 18%, 100% { transform: scaleX(0); } }
@keyframes hop4Ping { 0%, 18% { opacity: 0; } 22%, 26% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes orbit { to { rotate: 360deg; } }
@keyframes dashFlow { to { background-position: 12px 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; transition-duration: .001ms !important; }
}