/* ==========================================================================
   EXYS · movimento (Onda 152) — camada única para site, CRM e página de vendas
   O mesmo arquivo roda nas três superfícies. Só usa tokens que existem em
   todas: --brand, --accent, --line, --radius, --card, --surface.
   Regra: movimento é RESPOSTA ao usuário (hover/foco), não decoração de entrada.
   ========================================================================== */
:root{
  --mv-lift:-6px;
  --mv-scale:1.015;
  --mv-dur:.34s;
  --mv-fast:.18s;
  --mv-spring:cubic-bezier(.2,.9,.25,1);
  --mv-shadow:0 30px 62px -34px rgba(4,7,18,.92), 0 2px 10px -6px rgba(4,7,18,.55);
  --mv-glow:color-mix(in srgb, var(--brand) 40%, transparent);
  --mv-edge:color-mix(in srgb, var(--brand) 46%, var(--line));
}
:root[data-theme="light"]{
  --mv-shadow:0 22px 44px -28px rgba(16,24,48,.34), 0 2px 8px -6px rgba(16,24,48,.18);
}

/* ---------- 1. superfícies que levantam ----------
   O alvo é qualquer card real das três superfícies. `.mv-on` força o estado
   para captura de tela e teste automatizado (não usar em produção). */
:is(.card,.shot,.u-card,.vd-case,.vd-pv,.sv-dv,.sv-item,.x-card,.x-kpi,.kcard,.stat,.u-kpi,.x-cardit){
  position:relative;
  transform:perspective(900px) translateY(0) scale(1) rotateX(0) rotateY(0);
  transform-style:preserve-3d;
  transition:transform var(--mv-dur) var(--mv-spring),
             box-shadow var(--mv-dur) var(--mv-spring),
             border-color var(--mv-fast) linear,
             background-color var(--mv-fast) linear;
}
:is(.card,.shot,.u-card,.vd-case,.vd-pv,.sv-dv,.sv-item,.x-card,.x-kpi,.kcard,.stat,.u-kpi,.x-cardit):hover,
:is(.card,.shot,.u-card,.vd-case,.vd-pv,.sv-dv,.sv-item,.x-card,.x-kpi,.kcard,.stat,.u-kpi,.x-cardit).mv-on{
  transform:perspective(900px) translateY(var(--mv-lift)) scale(var(--mv-scale))
            rotateX(var(--mv-ty,0deg)) rotateY(var(--mv-tx,0deg));
  box-shadow:var(--mv-shadow);
  border-color:var(--mv-edge);
  z-index:2;
}

/* ---------- 2. luz que segue o ponteiro ----------
   Um gradiente radial posicionado em --mx/--my (o JS escreve). Sem JS, o
   card ainda levanta — a luz é o enfeite, nunca a única resposta. */
:is(.card,.shot,.u-card,.vd-case,.sv-dv,.x-card,.x-kpi,.kcard,.u-kpi,.x-cardit)::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  opacity:0;transition:opacity var(--mv-dur) linear;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),
             color-mix(in srgb, var(--brand) 16%, transparent), transparent 64%);
}
:is(.card,.shot,.u-card,.vd-case,.sv-dv,.x-card,.x-kpi,.kcard,.u-kpi,.x-cardit):hover::after,
:is(.card,.shot,.u-card,.vd-case,.sv-dv,.x-card,.x-kpi,.kcard,.u-kpi,.x-cardit).mv-on::after{opacity:1}
/* o conteúdo fica acima da luz */
:is(.card,.shot,.u-card,.vd-case,.sv-dv,.x-card,.x-kpi,.kcard,.u-kpi,.x-cardit)>*{position:relative;z-index:1}

/* ---------- 3. detalhes internos que se movem junto ----------
   Ícone sobe e inclina, seta desliza, título ganha meio tom de cor. */
:is(.card,.u-card,.sv-item,.vd-pv,.x-card):is(:hover,.mv-on) :is(.ic,.mk,.ico,.u-ico){transform:translateY(-2px) scale(1.07) rotate(-3deg)}
:is(.ic,.mk,.ico,.u-ico){transition:transform var(--mv-dur) var(--mv-spring)}
:is(.card,.vd-case,.sv-dv,.u-card):is(:hover,.mv-on) :is(.go,.arrow,.more){transform:translateX(4px)}
:is(.go,.arrow,.more){transition:transform var(--mv-dur) var(--mv-spring)}
:is(.card,.u-card,.vd-case,.sv-dv,.x-kpi,.kcard):is(:hover,.mv-on) :is(h3,.h,.t,.tt,.val){color:color-mix(in srgb, var(--brand) 34%, currentColor)}
:is(.card,.u-card,.vd-case,.sv-dv,.x-kpi,.kcard) :is(h3,.h,.t,.tt,.val){transition:color var(--mv-fast) linear}

/* ---------- 4. fio de luz na borda (só nas superfícies grandes) ---------- */
:is(.vd-case,.sv-dv,.u-card,.x-kpi){
  background-image:linear-gradient(var(--card),var(--card)),
    linear-gradient(135deg, color-mix(in srgb,var(--brand) 60%,transparent), transparent 46%, color-mix(in srgb,var(--accent) 46%,transparent));
  background-origin:border-box;background-clip:padding-box,border-box;
}
:is(.vd-case,.sv-dv,.u-card,.x-kpi):hover, :is(.vd-case,.sv-dv,.u-card,.x-kpi).mv-on{
  border-color:transparent;
}

/* ---------- 5. foco por teclado recebe o mesmo destaque ---------- */
:is(.card,.shot,.u-card,.vd-case,.vd-pv,.sv-dv,.sv-item,.x-card,.x-kpi,.kcard):focus-within{
  transform:translateY(calc(var(--mv-lift) / 2));
  border-color:var(--mv-edge);
  box-shadow:var(--mv-shadow);
}

/* ---------- 6. quem pediu menos movimento ---------- */
@media (prefers-reduced-motion:reduce){
  :is(.card,.shot,.u-card,.vd-case,.vd-pv,.sv-dv,.sv-item,.x-card,.x-kpi,.kcard,.stat,.u-kpi,.x-cardit):hover,
  :is(.card,.shot,.u-card,.vd-case,.vd-pv,.sv-dv,.sv-item,.x-card,.x-kpi,.kcard,.stat,.u-kpi,.x-cardit).mv-on,
  :is(.card,.shot,.u-card,.vd-case,.vd-pv,.sv-dv,.sv-item,.x-card,.x-kpi,.kcard):focus-within{
    transform:none;
  }
  :is(.card,.shot,.u-card,.vd-case,.sv-dv,.x-card,.x-kpi,.kcard,.u-kpi,.x-cardit)::after{display:none}
  :is(.card,.u-card,.sv-item,.vd-pv,.x-card):is(:hover,.mv-on) :is(.ic,.mk,.ico,.u-ico),
  :is(.card,.vd-case,.sv-dv,.u-card):is(:hover,.mv-on) :is(.go,.arrow,.more){transform:none}
}

/* ---------- 7. toque: hover não existe, o card não deve "pular" ---------- */
@media (hover:none){
  :is(.card,.shot,.u-card,.vd-case,.vd-pv,.sv-dv,.sv-item,.x-card,.x-kpi,.kcard,.stat,.u-kpi,.x-cardit):hover{
    transform:none;box-shadow:inherit;
  }
  :is(.card,.shot,.u-card,.vd-case,.sv-dv,.x-card,.x-kpi,.kcard,.u-kpi,.x-cardit)::after{display:none}
}