/* Tela inicial do Canvas (estilo do Canvas do Higgsfield): hero com nós flutuando ligados por fios,
   título dentro de uma caixa de seleção, e a grade "Meus canvas" / "Modelos".
   Clicar num cartão faz ele crescer até virar o quadro (cvi-voo). */

.cv-inicio {
  --cvi-roxo: #8a4dff;
  position: absolute; inset: 0; z-index: 30; overflow-y: auto; overflow-x: hidden;
  background:
    radial-gradient(70% 55% at 50% 0%, rgb(138 77 255 / 22%), transparent 70%),
    var(--cv-fundo);
  color: var(--cv-texto);
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(.2, .8, .2, 1);
}
.cv-inicio[hidden] { display: none; }
.cv-inicio.saindo { opacity: 0; transform: scale(0.985); pointer-events: none; }
#aba-canvas.no-inicio > :not(.cv-inicio):not(.cvi-voo) { visibility: hidden; }

/* ---------- hero ---------- */
.cvi-heroi {
  position: relative; height: 360px; margin-bottom: 8px;
  background-image: radial-gradient(var(--cv-ponto) 1.2px, transparent 1.3px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(#000 75%, transparent); mask-image: linear-gradient(#000 75%, transparent);
}
.cvi-fios { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cvi-fios path {
  fill: none; stroke-width: 1.6; opacity: 0.75;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: cvi-fio 1.1s cubic-bezier(.6, 0, .2, 1) forwards; animation-delay: calc(0.35s + var(--i) * 0.12s);
}
.cvi-fios path.texto { stroke: var(--cv-texto-fio); }
.cvi-fios path.imagem { stroke: var(--cv-imagem-fio); }
.cvi-fios path.video { stroke: var(--cv-video-fio); }
@keyframes cvi-fio { to { stroke-dashoffset: 0; } }
.cvi-fios.pronto path { animation: none; stroke-dashoffset: 0; }

.cvi-no {
  position: absolute; overflow: hidden; border-radius: 16px; background: var(--cv-no);
  border: 1px solid rgb(255 255 255 / 12%); box-shadow: 0 18px 40px rgb(0 0 0 / 45%);
  opacity: 0; transform: translateY(14px) scale(0.92) rotate(var(--gira));
  animation: cvi-no-entra 0.7s cubic-bezier(.2, .9, .2, 1.1) forwards, cvi-boia 6s ease-in-out infinite;
  animation-delay: calc(0.1s + var(--i) * 0.09s), calc(1s + var(--i) * -1.3s);
}
.cvi-no img, .cvi-no video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cvi-no.nota { padding: 10px 12px; background: rgb(32 30 42 / 88%); backdrop-filter: blur(8px); }
.cvi-no.nota small { display: block; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cv-texto-fio); margin-bottom: 4px; }
.cvi-no.nota p { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--cv-texto-2); }
@keyframes cvi-no-entra { to { opacity: 1; transform: translateY(0) scale(1) rotate(var(--gira)); } }
@keyframes cvi-boia { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }

.cvi-titulo {
  position: absolute; left: 0; right: 0; margin-inline: auto; top: 40px; width: min(520px, 35vw);
  padding: 22px 18px 24px; text-align: center; border: 1.5px solid rgb(138 77 255 / 85%);
  opacity: 0; animation: cvi-titulo 0.8s cubic-bezier(.2, .8, .2, 1) 0.15s forwards;
}
.cvi-titulo small { display: block; font: 600 13px/1 ui-monospace, Consolas, monospace; letter-spacing: 0.14em; color: var(--cv-texto-2); margin-bottom: 14px; }
.cvi-titulo h1 { margin: 0; font-family: Archivo, Inter, sans-serif; font-stretch: 75%; font-weight: 900; font-size: clamp(28px, 3vw, 48px); line-height: 0.98; letter-spacing: -0.01em; text-transform: uppercase; color: #fff; }
.cvi-alca { position: absolute; width: 9px; height: 9px; border-radius: 2px; background: #fff; border: 1.5px solid var(--cvi-roxo); }
@keyframes cvi-titulo { from { opacity: 0; transform: scale(0.96); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* ---------- lista ---------- */
.cvi-lista { width: min(1340px, calc(100% - 32px)); margin: 0 auto; padding-bottom: 48px; }
.cvi-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.cvi-abas { display: flex; gap: 6px; }
.cvi-abas button {
  display: inline-flex; align-items: center; gap: 8px; border: 0; padding: 10px 16px; border-radius: 999px;
  background: none; color: var(--cv-texto-2); font: 700 14px/1 inherit; cursor: pointer; transition: background 0.2s, color 0.2s;
}
.cvi-abas button:hover { color: var(--cv-texto); }
.cvi-abas button.ativa { background: rgb(255 255 255 / 9%); color: var(--cv-texto); }
.cvi-selo { font-size: 10.5px; font-weight: 800; padding: 3px 7px; border-radius: 6px; background: var(--cvi-roxo); color: #fff; }
.cvi-busca { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 999px; background: rgb(255 255 255 / 6%); color: var(--cv-texto-2); width: 40px; overflow: hidden; transition: width 0.3s ease; cursor: text; }
.cvi-busca:focus-within, .cvi-busca:has(input:not(:placeholder-shown)) { width: 230px; }
.cvi-busca .ic { flex: none; width: 17px; height: 17px; }
.cvi-busca input { flex: 1; min-width: 0; border: 0; background: none; color: var(--cv-texto); font: 14px inherit; outline: none; }

.cvi-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px 18px; }
.cvi-cartao {
  display: grid; gap: 4px; align-content: start; text-align: left; padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
  opacity: 0; animation: cvi-cartao 0.5s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(var(--i) * 0.05s);
}
.cvi-cartao b { margin-top: 10px; font-size: 15px; font-weight: 700; }
.cvi-cartao small { font-size: 12.5px; color: var(--cv-texto-2); }
@keyframes cvi-cartao { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.cvi-capa {
  position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden;
  background: linear-gradient(160deg, #23232c, #1a1a21); border: 1px solid var(--cv-borda);
  transition: transform 0.35s cubic-bezier(.2, .8, .2, 1), border-color 0.25s, box-shadow 0.35s;
}
.cvi-cartao:hover .cvi-capa, .cvi-cartao:focus-visible .cvi-capa { transform: translateY(-4px); border-color: rgb(138 77 255 / 55%); box-shadow: 0 18px 40px rgb(0 0 0 / 40%), 0 0 0 1px rgb(138 77 255 / 30%); }
.cvi-cartao:focus-visible { outline: none; }
.cvi-capa img, .cvi-capa video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.cvi-cartao:hover .cvi-capa img, .cvi-cartao:hover .cvi-capa video { transform: scale(1.04); }
.cvi-mais { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgb(255 255 255 / 10%); border: 1px solid rgb(255 255 255 / 16%); color: #fff; transition: transform 0.3s, background 0.3s; }
.cvi-mais .ic { width: 20px; height: 20px; }
.cvi-cartao:hover .cvi-mais { transform: scale(1.1) rotate(90deg); background: var(--cvi-roxo); }

/* capa de quem ainda não gerou nada: o nome dentro da caixa de seleção, como no hero */
.cvi-marca { position: relative; padding: 4px 8px; border: 1.5px solid rgb(138 77 255 / 85%); font: 800 18px/1.1 Inter, sans-serif; text-align: center; color: rgb(255 255 255 / 60%); }
.cvi-marca i { position: absolute; width: 7px; height: 7px; border-radius: 2px; background: #fff; border: 1.5px solid var(--cvi-roxo); }
.cvi-marca i:nth-child(1) { left: -4px; top: -4px; } .cvi-marca i:nth-child(2) { right: -4px; top: -4px; }
.cvi-marca i:nth-child(3) { left: -4px; bottom: -4px; } .cvi-marca i:nth-child(4) { right: -4px; bottom: -4px; }

/* miniatura dos modelos: nós e fios desenhados */
.cvi-capa.modelo, .cvi-capa:has(.cvi-mapa) { background-image: radial-gradient(rgb(255 255 255 / 7%) 1px, transparent 1.2px), linear-gradient(160deg, #23232c, #1a1a21); background-size: 14px 14px, auto; }
.cvi-mini { width: 92%; height: 86%; }
.cvi-mapa { display: contents; }
.cvi-mini path { fill: none; stroke-width: 6; }
.cvi-mini path.texto { stroke: var(--cv-texto-fio); } .cvi-mini path.imagem { stroke: var(--cv-imagem-fio); } .cvi-mini path.video { stroke: var(--cv-video-fio); }
.cvi-mini-no > rect:first-child { fill: #2b2b34; stroke: rgb(255 255 255 / 12%); stroke-width: 3; }
.cvi-mini-no .topo { fill: rgb(255 255 255 / 30%); }
.cvi-mini-no .linha { fill: rgb(255 255 255 / 14%); }
.cvi-mini-no .tela { fill: rgb(138 77 255 / 22%); }
.cvi-vazio { color: var(--cv-texto-2); }

/* ---------- abrir o canvas: o cartão cresce até virar o quadro ---------- */
.cvi-voo {
  position: absolute; z-index: 40; pointer-events: none; overflow: hidden;
  background-color: var(--cv-fundo); background-image: radial-gradient(var(--cv-ponto) 1.2px, transparent 1.3px);
  box-shadow: 0 0 0 1px rgb(138 77 255 / 40%), 0 30px 80px rgb(0 0 0 / 50%);
}
#aba-canvas.cv-entrando .cv-no { animation: cvi-no-quadro 0.55s cubic-bezier(.2, .9, .2, 1.05) both; }
#aba-canvas.cv-entrando .cv-fios { animation: cvi-aparece 0.6s ease 0.15s both; }
#aba-canvas.cv-entrando .cv-flutua, #aba-canvas.cv-entrando .cv-ajuda { animation: cvi-sobe 0.45s cubic-bezier(.2, .8, .2, 1) 0.1s both; }
@keyframes cvi-no-quadro { from { opacity: 0; transform: scale(0.94) translateY(10px); } }
@keyframes cvi-aparece { from { opacity: 0; } }
@keyframes cvi-sobe { from { opacity: 0; translate: 0 12px; } }

/* ---------- tema claro ---------- */
:root[data-theme="light"] .cv-inicio { background: radial-gradient(70% 55% at 50% 0%, rgb(138 77 255 / 14%), transparent 70%), var(--cv-fundo); }
:root[data-theme="light"] .cvi-titulo h1 { color: var(--cv-texto); }
:root[data-theme="light"] .cvi-no.nota { background: rgb(255 255 255 / 90%); }
:root[data-theme="light"] .cvi-capa { background: linear-gradient(160deg, #fff, #f1eee7); }
:root[data-theme="light"] .cvi-capa.modelo, :root[data-theme="light"] .cvi-capa:has(.cvi-mapa) { background-image: radial-gradient(rgb(21 17 46 / 10%) 1px, transparent 1.2px), linear-gradient(160deg, #fff, #f1eee7); }
:root[data-theme="light"] .cvi-mini-no > rect:first-child { fill: #fff; stroke: rgb(21 17 46 / 14%); }
:root[data-theme="light"] .cvi-mini-no .topo { fill: rgb(21 17 46 / 25%); }
:root[data-theme="light"] .cvi-mini-no .linha { fill: rgb(21 17 46 / 10%); }
:root[data-theme="light"] .cvi-abas button.ativa, :root[data-theme="light"] .cvi-busca { background: rgb(21 17 46 / 7%); }
:root[data-theme="light"] .cvi-mais { background: rgb(21 17 46 / 8%); color: var(--cv-texto); border-color: rgb(21 17 46 / 12%); }
:root[data-theme="light"] .cvi-marca { color: rgb(21 17 46 / 55%); }

/* ---------- celular ---------- */
@media (max-width: 760px) {
  .cvi-heroi { height: 300px; }
  .cvi-no:nth-of-type(2), .cvi-no:nth-of-type(4) { display: none; }
  .cvi-no { scale: 0.75; transform-origin: top left; }
  .cvi-titulo { width: calc(100% - 48px); top: 120px; padding: 16px 12px 18px; background: rgb(20 20 23 / 70%); backdrop-filter: blur(6px); }
  .cvi-titulo h1 { font-size: 30px; }
  .cvi-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
  .cvi-abas button { padding: 9px 12px; font-size: 13px; }
  .cvi-selo { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cvi-no, .cvi-titulo, .cvi-cartao, .cvi-fios path { animation: none; opacity: 1; stroke-dashoffset: 0; transform: rotate(var(--gira, 0deg)); }
  #aba-canvas.cv-entrando * { animation: none !important; }
}