/* ============================================================
   CARD 2 "COMO FUNCIONA" — cena animada (escolha das categorias)
   Porte do protótipo (card2.zip / "Card Categories Animation") para
   CSS custom properties + JS vanilla (secao-passos-card2.js).
   Estado PADRÃO (sem JS, ou prefers-reduced-motion) = grade de
   categorias revelada e SEM seleção — igual ao antigo card2.svg
   estático. O JS faz a revelação 1x e depois entra num loop contínuo
   (cursor escolhendo 3 categorias, pausa, desfaz, repete) enquanto o
   card estiver na viewport — pausa quando sai da tela.
   ============================================================ */

.nc2-scaler{
  position:relative; width:100%; aspect-ratio:422/391;
  border-radius:26px; overflow:hidden; background:#005bff;
  /* sombra removida a pedido do dono (10-09-2026): o card fica plano,
     o hover mantem so o leve levantar */
  transition:transform .2s cubic-bezier(.23,1,.32,1);
}
@media (hover:hover){
  .nc-step:hover .nc2-scaler{ transform:translateY(-4px); }
}

.nc2-card{
  position:absolute; left:0; top:0; width:422px; height:391px;
  transform:scale(var(--nc2-scale, 1)); transform-origin:top left;
  font-family:Poppins, Helvetica, sans-serif;
}

.nc2-blob{ position:absolute; left:-60px; right:-60px; bottom:-110px; height:330px; background:radial-gradient(50% 50% at 45% 65%, #2ee6ff 0%, rgba(46,230,255,0) 70%); filter:blur(38px); animation:nc2-drift1 11s ease-in-out infinite; }
.nc2-blob--2{ left:-40px; right:-40px; bottom:-80px; height:240px; background:radial-gradient(50% 50% at 72% 70%, #7ef0ff 0%, rgba(126,240,255,0) 68%); opacity:.55; filter:blur(44px); animation:nc2-drift2 14s ease-in-out infinite; }
.nc2-topfade{ position:absolute; left:0; right:0; top:0; height:180px; background:linear-gradient(180deg, #0044f0 0%, rgba(0,68,240,0) 100%); }
.nc2-card.is-paused .nc2-blob{ animation-play-state:paused; }

.nc2-dots{ position:absolute; left:20px; top:16px; display:flex; gap:5px; }
.nc2-dot{
  width:10px; height:10px; border-radius:50%; background:#002e7f;
  opacity:var(--nc2-o,1); transform:scale(var(--nc2-o,1));
  transition:opacity .3s cubic-bezier(.3,1.6,.5,1), transform .3s cubic-bezier(.3,1.6,.5,1);
}
.nc2-dot:nth-child(2){ background:#357dff; transition-delay:.05s; }
.nc2-dot:nth-child(3){ background:#78a8ff; transition-delay:.1s; }

.nc2-badge{
  position:absolute; right:20px; top:14px; height:14px; padding:0 7px;
  border:.9px solid rgba(255,255,255,.9); border-radius:5.5px; display:flex; align-items:center;
  gap:3px; color:#fff; font-size:7.5px; font-weight:500; letter-spacing:.2px;
  opacity:var(--nc2-o,1); transform:translateY(var(--nc2-y,0px));
  transition:opacity .4s ease, transform .4s ease;
}

.nc2-title{
  position:absolute; left:0; right:0; top:12px; text-align:center;
  color:#fff; font-size:15px; font-weight:600; letter-spacing:-.1px;
  opacity:var(--nc2-o,1); transform:translateY(var(--nc2-y,0px));
  transition:opacity .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1);
}

.nc2-lines{ position:absolute; left:43px; top:76px; width:350px; color:#fff; font-size:19px; font-weight:500; line-height:1.34; letter-spacing:-.2px; }
.nc2-line-mask{ overflow:hidden; }
.nc2-line{
  opacity:var(--nc2-o,1); transform:translateY(var(--nc2-y,0px));
  transition:opacity .55s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1);
  font-family:'ITC Avant Garde Gothic', 'Poppins', sans-serif;
}

.nc2-chip{
  position:absolute; border-radius:7.12px; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center; gap:5px;
  background:var(--nc2-bg,#fff); box-shadow:var(--nc2-sh, 0 2px 4.5px rgba(0,0,0,.25));
  color:var(--nc2-c,#005bff);
  opacity:var(--nc2-o,1); transform:translateY(var(--nc2-y,0px)) scale(var(--nc2-s,1));
  transition:opacity .4s ease, transform .4s cubic-bezier(.25,1.5,.45,1), background .35s ease, box-shadow .35s ease, color .35s ease;
}
.nc2-chip svg{ flex:none; display:block; }
.nc2-chip span{ font-size:9.5px; font-weight:600; letter-spacing:-.1px; font-family:Poppins; }

.nc2-cursor{
  position:absolute; left:0; top:0; width:20px; height:20px;
  opacity:var(--nc2-o,0);
  transform:translate(var(--nc2-x,210px), var(--nc2-y,340px));
  transition:transform .55s cubic-bezier(.4,.05,.2,1), opacity .3s ease;
  pointer-events:none; filter:drop-shadow(0 2px 3px rgba(0,20,60,.45));
}
.nc2-cursor-inner{
  display:block; transform:scale(var(--nc2-s,1)); transform-origin:4px 4px;
  transition:transform .18s ease;
}

@keyframes nc2-drift1{ 0%,100%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(18px,-14px,0) scale(1.08); } }
@keyframes nc2-drift2{ 0%,100%{ transform:translate3d(0,0,0) scale(1.05); } 50%{ transform:translate3d(-22px,10px,0) scale(1); } }

@media (prefers-reduced-motion:reduce){
  .nc2-blob{ animation:none; }
}