/* ======================================================================
   Carregando da Nise (10/10): um modelo só para tudo que espera a IA ou a rede.
   Inspirado no jeito do Google Flow, Kling e Higgsfield: o quadro já nasce no formato
   do resultado, a luz roxa respira (opacidade), uma onda de pontos passa por cima,
   a porcentagem fica no centro e, quando fica pronto, a mídia aparece por opacidade.
   Peças (todas montadas por carregando.js):
     .nc          cartão de geração (vídeo, imagem, UGC, cena do editor, nó do Canvas)
     .nc-pontos9  marca de carregando: 9 pontos acendendo em onda (substitui os giros)
     .nc-linha    carregando em linha, para texto ("Transcrevendo…", "Renderizando…")
     .nc-esqueleto bloco cinza que respira, para listas que ainda não chegaram
     fade         toda mídia de lista entra por opacidade quando termina de baixar
   ====================================================================== */
:root {
  --nc-fundo: #0b0b0e;
  --nc-neon: #a46bff;
  --nc-neon-2: #6a3df0;
  --nc-texto: #f5f5f7;
  --nc-texto-2: rgb(245 245 247 / 58%);
}

/* ---------- cartão ---------- */
.nc { position: absolute; inset: 0; overflow: hidden; isolation: isolate; display: grid; grid-template-rows: auto 1fr auto; background: var(--nc-fundo); color: var(--nc-texto); font-family: var(--ui, "Inter", system-ui, sans-serif); container-type: size; }
.nc.solto { position: relative; inset: auto; width: 100%; aspect-ratio: var(--nc-formato, 16 / 9); border-radius: var(--raio, 16px); }

/* luz: duas manchas roxas que respiram fora de fase (a "opacidade" que dá vida ao quadro) */
.nc-luz { position: absolute; inset: -25%; z-index: -3; filter: blur(42px); }
.nc-luz i { position: absolute; width: 62%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--nc-neon) 0%, transparent 68%); animation: nc-respira 4.2s ease-in-out infinite; animation-delay: var(--fase, 0s); }
.nc-luz i:nth-child(1) { left: 6%; top: 10%; }
.nc-luz i:nth-child(2) { right: 4%; bottom: 6%; background: radial-gradient(circle, var(--nc-neon-2) 0%, transparent 68%); animation-delay: calc(var(--fase, 0s) - 2.1s); }
@keyframes nc-respira { 0%, 100% { opacity: 0.16; transform: scale(0.9); } 50% { opacity: 0.62; transform: scale(1.08); } }

/* pontos: grade fraca parada + a mesma grade acesa só onde a onda passa */
.nc-grade, .nc-onda { position: absolute; inset: 0; z-index: -2; pointer-events: none; background-size: 14px 14px; background-position: 7px 7px; }
.nc-grade { background-image: radial-gradient(circle at center, rgb(255 255 255 / 9%) 1px, transparent 1.6px); }
.nc-onda { background-image: radial-gradient(circle at center, rgb(255 255 255 / 75%) 1.1px, transparent 1.8px); -webkit-mask: linear-gradient(115deg, transparent 38%, #000 50%, transparent 62%) 0 0 / 300% 100% no-repeat; mask: linear-gradient(115deg, transparent 38%, #000 50%, transparent 62%) 0 0 / 300% 100% no-repeat; animation: nc-onda 2.8s cubic-bezier(.45, 0, .55, 1) infinite; animation-delay: var(--fase, 0s); }
@keyframes nc-onda { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }

.nc-grao { position: absolute; inset: -50%; z-index: -1; opacity: 0.08; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: nc-grao 0.6s steps(4) infinite; }
@keyframes nc-grao { 25% { transform: translate(-6%, 4%); } 50% { transform: translate(5%, -7%); } 75% { transform: translate(-3%, -4%); } }

/* topo: selo de estado + relógio */
.nc-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 0; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--nc-texto-2); font-variant-numeric: tabular-nums; }
.nc-selo { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 7px; border-radius: 999px; background: rgb(255 255 255 / 7%); backdrop-filter: blur(8px); color: var(--nc-texto); }
.nc-selo i { width: 6px; height: 6px; border-radius: 50%; background: var(--nc-neon); box-shadow: 0 0 8px var(--nc-neon); animation: nc-pisca 1.4s ease-in-out infinite; }
@keyframes nc-pisca { 50% { opacity: 0.25; } }

/* centro: porcentagem grande + frase que troca por opacidade */
.nc-topo { grid-row: 1; } .nc-pe { grid-row: 3; }
.nc-centro { grid-row: 2; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 8px 14px; text-align: center; min-height: 0; }
.nc-pct { font-family: var(--cond, "Archivo", "Arial Narrow", sans-serif); font-stretch: 75%; font-weight: 800; font-size: clamp(26px, 15cqmin, 64px); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.nc-pct small { font-size: 0.45em; margin-left: 2px; color: var(--nc-texto-2); font-weight: 700; }
.nc-pct.fila { font-size: clamp(18px, 9cqmin, 34px); text-transform: uppercase; letter-spacing: 0.02em; }
.nc-frase { display: grid; font-size: 13px; font-weight: 500; color: var(--nc-texto-2); min-height: 1.35em; }
.nc-frase span { grid-area: 1 / 1; animation: nc-frase-pulsa 2.4s ease-in-out infinite; animation-delay: var(--fase, 0s); }
.nc-frase .entra { animation: nc-frase-entra 0.5s ease both; }
.nc-frase .sai { animation: nc-frase-sai 0.45s ease both; }
@keyframes nc-frase-pulsa { 50% { opacity: 0.55; } }
@keyframes nc-frase-entra { from { opacity: 0; filter: blur(4px); } }
@keyframes nc-frase-sai { to { opacity: 0; filter: blur(4px); } }

/* pé: modelo + barra fininha */
.nc-pe { display: flex; justify-content: center; padding: 0 12px 16px; font-size: 11px; color: var(--nc-texto-2); }
.nc-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgb(255 255 255 / 8%); }
.nc-barra i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, var(--nc-neon-2), var(--nc-neon)); box-shadow: 0 0 10px var(--nc-neon); transition: width 0.5s linear; }

/* sem porcentagem (quando não dá para estimar): os 9 pontos no lugar do número */
.nc-centro .nc-pontos9 { width: clamp(22px, 12cqmin, 40px); }

/* na fila: tudo mais apagado e lento */
.nc.fila .nc-luz { filter: blur(46px) saturate(0); }
.nc.fila .nc-luz i { animation-duration: 6s; }
.nc.fila .nc-onda { animation-duration: 4.5s; opacity: 0.5; }
.nc.fila .nc-selo i { background: var(--nc-texto-2); box-shadow: none; }
.nc.fila .nc-barra { display: none; }

/* tamanhos pequenos (cena do editor, nó do Canvas): só o essencial */
@container (max-height: 150px) {
  .nc-topo, .nc-pe { display: none; }
  .nc-frase { font-size: 11px; }
}

/* ---------- 9 pontos em onda (marca de carregando) ---------- */
.nc-pontos9 { display: inline-grid; grid-template-columns: repeat(3, 1fr); gap: 18%; width: 18px; aspect-ratio: 1; vertical-align: middle; flex: none; }
.nc-pontos9 i { border-radius: 50%; background: var(--nc-neon); animation: nc-ponto 1.2s ease-in-out infinite; animation-delay: calc(var(--fase, 0s) + var(--d) * 0.12s); }
.nc-pontos9 i:nth-child(1) { --d: 0; } .nc-pontos9 i:nth-child(2), .nc-pontos9 i:nth-child(4) { --d: 1; }
.nc-pontos9 i:nth-child(3), .nc-pontos9 i:nth-child(5), .nc-pontos9 i:nth-child(7) { --d: 2; }
.nc-pontos9 i:nth-child(6), .nc-pontos9 i:nth-child(8) { --d: 3; } .nc-pontos9 i:nth-child(9) { --d: 4; }
@keyframes nc-ponto { 0%, 100% { opacity: 0.18; transform: scale(0.7); } 40% { opacity: 1; transform: scale(1); } }
.nc-pontos9.grande { width: 34px; }

/* ---------- em linha ---------- */
.nc-linha { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--texto-2, #8f8f9c); padding: 6px 0; line-height: 1.4; }
.nc-linha > b { color: var(--texto, inherit); font-weight: 600; animation: nc-frase-pulsa 2.4s ease-in-out infinite; }
div.nc-linha { display: flex; }

/* ---------- esqueleto ---------- */
.nc-esqueleto { border-radius: 12px; background: var(--fundo-3, #1d1d23); animation: nc-esqueleto 1.6s ease-in-out infinite; animation-delay: var(--fase, 0s); min-height: 14px; }
@keyframes nc-esqueleto { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
.nc-esqueletos { display: grid; gap: 10px; padding: 6px 0; }

/* ---------- mídia de lista entra por opacidade (só depois que carregando.js liga) ---------- */
html.nc-fade :is(.midia, .cv-midia, .if-previa) > :is(img, video) { opacity: 0; transition: opacity 0.6s ease, filter 0.6s ease; filter: blur(8px); }
html.nc-fade :is(.midia, .cv-midia, .if-previa) > :is(img, video).nc-ok { opacity: 1; filter: none; }
html.nc-fade :is(.midia, .cv-midia, .if-previa):has(> :is(img, video):not(.nc-ok)) { animation: nc-esqueleto 1.6s ease-in-out infinite; }

/* ---------- revelação quando a geração fica pronta (a mídia nasce do roxo por opacidade) ---------- */
@keyframes revela { from { opacity: 0; filter: blur(18px) brightness(1.3); transform: scale(1.04); } 55% { opacity: 1; } to { opacity: 1; filter: none; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .nc *, .nc-pontos9 i, .nc-linha > b, .nc-esqueleto, html.nc-fade :is(.midia, .cv-midia, .if-previa) { animation: none !important; }
  html.nc-fade :is(.midia, .cv-midia, .if-previa) > :is(img, video) { transition: none; filter: none; }
}