/* OT7 "Sinal" (Convix-Brain 05_RESEARCH/DIRECAO-UX-SINAL-2026-10-20.md): the motion of every page and the soft
   controls. Colours come only from the --ci-* tokens of convix-system.css, in both themes. Every animation has a
   prefers-reduced-motion path, and nothing is hidden waiting for a script: the default state is the visible one. */
:root {
  --ci-ease-out: cubic-bezier(.16,1,.3,1);
  --ci-ease-in-out: cubic-bezier(.65,0,.35,1);
  --ci-dur-fast: 140ms;
  --ci-dur: 220ms;
  --ci-dur-slow: 420ms;
  --ci-dur-focal: 700ms;
  --ci-elev-1: 0 2px 6px color-mix(in srgb, var(--ci-shadow) 45%, transparent), 0 10px 22px -12px color-mix(in srgb, var(--ci-shadow) 80%, transparent);
  --ci-elev-2: 0 4px 12px color-mix(in srgb, var(--ci-shadow) 45%, transparent), 0 22px 44px -18px color-mix(in srgb, var(--ci-shadow) 90%, transparent);
  --ci-glow-action: color-mix(in srgb, var(--ci-action) 60%, transparent);
  --ci-glow-signal: color-mix(in srgb, var(--ci-cyan) 38%, transparent);
  --ci-aurora:
    radial-gradient(55% 45% at 72% 28%, color-mix(in srgb, var(--ci-action) 34%, transparent), transparent 72%),
    radial-gradient(38% 36% at 88% 62%, color-mix(in srgb, var(--ci-cyan) 20%, transparent), transparent 70%);
}

/* ---- Soft controls: a lift on hover, a press on click, a lit top edge on the main action -------------------- */
.ci-theme :is(.btn,.intel-btn) {
  border-radius:12px;
  transition:background-color var(--ci-dur-fast) linear, border-color var(--ci-dur-fast) linear, color var(--ci-dur-fast) linear,
    box-shadow var(--ci-dur) var(--ci-ease-out), transform var(--ci-dur) var(--ci-ease-out);
}
.ci-theme :is(.btn,.intel-btn):not(:disabled):not([aria-disabled="true"]):hover { transform:translateY(-1px); box-shadow:var(--ci-elev-1); }
.ci-theme :is(.btn,.intel-btn):not(:disabled):not([aria-disabled="true"]):active { transform:translateY(0) scale(.98); box-shadow:none; transition-duration:60ms; }
.ci-theme :is(.btn--primary,.intel-btn--primary) { box-shadow:inset 0 1px 0 color-mix(in srgb, var(--ci-on-action) 24%, transparent); }
.ci-theme :is(.btn--primary,.intel-btn--primary):not(:disabled):not([aria-disabled="true"]):hover {
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--ci-on-action) 24%, transparent), 0 12px 26px -12px var(--ci-glow-action), 0 0 0 1px var(--ci-glow-signal);
}
.ci-theme :is(a,button,summary,[role="tab"]) { -webkit-tap-highlight-color:transparent; }

/* ---- Browser surfaces in the palette -------------------------------------------------------------------- */
.ci-theme ::selection { background:color-mix(in srgb, var(--ci-cyan) 32%, transparent); color:var(--ci-text); }
.ci-theme :is(.intel-num,.intel-kpi2 strong,.intel-table td) { font-variant-numeric:tabular-nums; }

/* ---- Loading: a skeleton with a slow light, where text is about to arrive -------------------------------- */
.ci-skeleton { display:block; height:.95em; max-width:100%; border-radius:6px;
  background:linear-gradient(90deg, var(--ci-surface) 0%, var(--ci-raised) 45%, var(--ci-surface) 90%); background-size:240% 100%;
  animation:ci-shimmer 1.6s var(--ci-ease-in-out) infinite; }
.ci-skeleton--title { height:1.6em; width:60%; }
.ci-skeleton--block { height:88px; border-radius:12px; }
.ci-skeletons { display:grid; gap:12px; }
@keyframes ci-shimmer { from { background-position:120% 0; } to { background-position:-120% 0; } }

/* ---- The signal: something sent to Mercado Livre, on its way, then confirmed or refused ------------------ */
.ci-signal, .intel-notice[data-signal] { position:relative; overflow:hidden; }
.ci-signal::after, .intel-notice[data-signal]::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; pointer-events:none;
  background:linear-gradient(90deg, transparent 0%, transparent 38%, var(--ci-cyan) 50%, transparent 62%, transparent 100%); background-size:260% 100%;
  opacity:0; transition:opacity var(--ci-dur) linear;
}
:is(.ci-signal,.intel-notice)[data-signal="sending"]::after, .ci-signal[data-state="sending"]::after { opacity:1; animation:ci-signal-run 1.15s linear infinite; }
:is(.ci-signal,.intel-notice)[data-signal="confirmed"]::after, .ci-signal[data-state="confirmed"]::after { opacity:1; background:var(--ci-success); animation:ci-signal-settle var(--ci-dur-slow) var(--ci-ease-out) both; }
:is(.ci-signal,.intel-notice)[data-signal="failed"]::after, .ci-signal[data-state="failed"]::after { opacity:1; background:var(--ci-danger); animation:ci-signal-settle var(--ci-dur-slow) var(--ci-ease-out) both; }
.ci-signal { display:inline-flex; align-items:center; gap:8px; min-height:32px; padding:6px 12px; border:1px solid var(--ci-line); border-radius:999px; color:var(--ci-muted); font-size:.8125rem; font-weight:600; }
.ci-signal[data-state="sending"] { color:var(--ci-text); border-color:color-mix(in srgb, var(--ci-cyan) 45%, var(--ci-line)); }
.ci-signal[data-state="confirmed"] { color:var(--ci-success); border-color:var(--ci-success-line); background:var(--ci-success-bg); }
.ci-signal[data-state="failed"] { color:var(--ci-danger); border-color:var(--ci-danger-line); background:var(--ci-danger-bg); }
@keyframes ci-signal-run { from { background-position:100% 0; } to { background-position:0% 0; } }
@keyframes ci-signal-settle { from { transform:scaleX(.2); opacity:.2; } to { transform:scaleX(1); opacity:1; } }

/* ---- The page notice slides in; it leaves faster than it comes ------------------------------------------- */
.ci-theme .intel-notice[data-intel-notice]:not([hidden]) { animation:ci-arrive var(--ci-dur) var(--ci-ease-out); }
@keyframes ci-arrive { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }

/* ---- Sections: the tab indicator slides to the chosen tab, the section fades in ------------------------- */
.intel-tabs { position:sticky; }
.intel-tabs__ink { position:absolute; z-index:0; top:var(--ink-y, 6px); left:0; height:var(--ink-h, 40px); width:var(--ink-w, 0px); border-radius:var(--ci-radius-control);
  background:var(--ci-info-bg); box-shadow:inset 0 -2px 0 var(--ci-cyan), 0 6px 16px -10px var(--ci-glow-signal); transform:translateX(var(--ink-x, 0px));
  transition:transform var(--ci-dur-slow) var(--ci-ease-out), width var(--ci-dur-slow) var(--ci-ease-out); pointer-events:none; opacity:0; }
.intel-tabs[data-ink="on"] .intel-tabs__ink { opacity:1; }
.intel-tabs[data-ink="on"] .intel-tabs__tab { position:relative; z-index:1; }
.intel-tabs[data-ink="on"] .intel-tabs__tab[aria-selected="true"] { background:transparent; box-shadow:none; }
.ci-theme.has-sidebar .intel-tabs[data-ink="on"] .intel-tabs__ink { border-radius:999px; }
.intel-sections__pane:not([hidden]) { animation:ci-pane-in var(--ci-dur) var(--ci-ease-out); }
@keyframes ci-pane-in { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }

/* ---- Navigation of the app: the page you are on carries the signal's light -------------------------------- */
.ci-appnav__link { transition:background-color var(--ci-dur-fast) linear, color var(--ci-dur-fast) linear, box-shadow var(--ci-dur) var(--ci-ease-out); }
.ci-appnav__link[aria-current="page"] { box-shadow:0 0 0 1px var(--ci-glow-signal), 0 8px 20px -12px var(--ci-glow-signal); }
.ci-theme.has-sidebar .dash-sidebar__link { transition:background-color var(--ci-dur-fast) linear, border-color var(--ci-dur-fast) linear, transform var(--ci-dur) var(--ci-ease-out); }
.ci-theme.has-sidebar .dash-sidebar__link:hover { transform:translateY(-1px); }
.ci-theme.has-sidebar .dash-sidebar__link.is-active .msr { text-shadow:0 0 14px var(--ci-glow-signal); }

/* ---- Real numbers arrive: revenue bars rise from the baseline, once ----------------------------------- */
.intel-revenue__bar { transform-box:fill-box; transform-origin:50% 100%; animation:ci-rise var(--ci-dur-focal) var(--ci-ease-out) both; animation-delay:min(calc(var(--i, 0) * 18ms), 360ms); }
@keyframes ci-rise { from { transform:scaleY(0); } to { transform:scaleY(1); } }

/* ---- Light behind something that matters ----------------------------------------------------------- */
.ci-aurora { position:relative; isolation:isolate; }
.ci-aurora::before { content:""; position:absolute; inset:-12% -6% -12% -6%; z-index:-1; background:var(--ci-aurora); pointer-events:none; }

/* ---- Entering once, only where a list appears as a list (convix-motion.js marks data-in-view) ---------- */
.ci-motion [data-ci-reveal]:not([data-in-view]) { opacity:0; transform:translateY(10px); }
.ci-motion [data-ci-reveal] { transition:opacity var(--ci-dur-slow) var(--ci-ease-out), transform var(--ci-dur-slow) var(--ci-ease-out); transition-delay:min(calc(var(--i, 0) * 50ms), 300ms); }

@media (prefers-reduced-motion: reduce) {
  .ci-theme :is(.btn,.intel-btn):not(:disabled):hover, .ci-theme :is(.btn,.intel-btn):not(:disabled):active, .ci-theme.has-sidebar .dash-sidebar__link:hover { transform:none; }
  .ci-skeleton { animation:none; background:var(--ci-raised); }
  :is(.ci-signal,.intel-notice)[data-signal]::after, .ci-signal[data-state]::after { animation:none; background-position:50% 0; }
  .ci-theme .intel-notice[data-intel-notice]:not([hidden]), .intel-sections__pane:not([hidden]), .intel-revenue__bar { animation:none; }
  .intel-tabs__ink, .ci-motion [data-ci-reveal] { transition:none; }
  .ci-motion [data-ci-reveal]:not([data-in-view]) { opacity:1; transform:none; }
}