/* ============================================================
   CARD 3 "COMO FUNCIONA" — cena animada (emissão dos cartões)
   Porte do protótipo (card3.zip / "Card Emission Animation") para
   CSS custom properties + JS vanilla (secao-passos-card3.js).
   Estado PADRÃO (sem JS, ou prefers-reduced-motion) = os 2 cartões já
   no lugar + título revelado, igual ao antigo card3.svg/webp estático.
   Toca 1x (sem loop) na 1ª vez que o card entra na viewport.
   ============================================================ */

.nc3-scaler{
  position:relative; width:100%; aspect-ratio:422/391;
  border-radius:26px; overflow:hidden; background:#fff;
  /* 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 .nc3-scaler{ transform:translateY(-4px); }
}

.nc3-card{
  position:absolute; left:0; top:0; width:422px; height:391px;
  transform:scale(var(--nc3-scale, 1)); transform-origin:top left;
  font-family:'ITC Avant Garde Gothic', 'Poppins', sans-serif;
}

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

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

.nc3-title{
  position:absolute; left:22px; top:72px; width:300px;
  color:#005afb; font-size:37px; font-weight:600; line-height:42px; letter-spacing:-1.2px;
}
.nc3-title-mask{ overflow:hidden; }
.nc3-title-line{
  opacity:var(--nc3-o,1); transform:translateY(var(--nc3-y,0px));
  transition:opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1);
  color:#005afb;
}

.nc3-cards{ position:absolute; inset:0; }
.nc3-layer{
  position:absolute; inset:0;
  opacity:var(--nc3-o,1);
  transform:translate(var(--nc3-x,0px), var(--nc3-y,0px)) rotate(var(--nc3-r,0deg)) scale(var(--nc3-s,1));
  transition:opacity .55s ease, transform .95s cubic-bezier(.18,.85,.25,1);
}
.nc3-layer--b{ transform-origin:60% 95%; }
.nc3-layer--a{ transform-origin:45% 95%; }
.nc3-float{ animation:nc3-float 6.5s ease-in-out infinite; }
.nc3-layer--b .nc3-float{ animation-duration:7.5s; animation-delay:.9s; }
@media (prefers-reduced-motion:reduce){
  .nc3-float{ animation:none; }
}

/* sem drop-shadow nos cartoes: o dono pediu a cena plana (10-09-2026) */
.nc3-card-img{ position:absolute; width:348.795px; height:220.035px; }
.nc3-layer--a .nc3-card-img{ left:24px; top:392.094px; transform:rotate(-40.84deg); transform-origin:0 0; }
.nc3-layer--b .nc3-card-img{ left:-2px; top:444.385px; transform:rotate(-59.4525deg); transform-origin:0 0; }

@keyframes nc3-float{ 0%,100%{ transform:translate3d(0,0,0); } 50%{ transform:translate3d(0,-5px,0); } }