/* ============================================================
   SegmentNow — capa de movimiento e interacciones
   Enlazar DESPUÉS del CSS de la página. Usa solo transform/opacity
   (acelerado por GPU) y respeta prefers-reduced-motion.
   ============================================================ */

@keyframes sn-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sn-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sn-rise    { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sn-float   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes sn-spin    { to { transform: rotate(360deg); } }
@keyframes sn-pulse   { 0%,100% { box-shadow: 0 0 0 0 rgba(34,160,107,.32); } 50% { box-shadow: 0 0 0 6px rgba(34,160,107,0); } }

/* ---- Entrada de página ---- */
main, .auth-card, .ob-wrap, .hero { animation: sn-fade-in .45s ease both; }

/* ---- Bloques que aparecen al cargar ---- */
.card, .stat, .feature, .credits-card, .ob-step { animation: sn-fade-up .5s cubic-bezier(.2,.7,.2,1) both; }
.stat:nth-child(1){animation-delay:.02s} .stat:nth-child(2){animation-delay:.08s}
.stat:nth-child(3){animation-delay:.14s} .stat:nth-child(4){animation-delay:.20s}

/* ---- Resultados del Audience Builder (entrada escalonada) ---- */
.ab-grid .ab-card{ animation: sn-fade-up .45s cubic-bezier(.2,.7,.2,1) both; }
.ab-grid .ab-card:nth-child(1){animation-delay:.03s}
.ab-grid .ab-card:nth-child(2){animation-delay:.09s}
.ab-grid .ab-card:nth-child(3){animation-delay:.15s}
.ab-grid .ab-card:nth-child(4){animation-delay:.21s}
.ab-grid .ab-card:nth-child(5){animation-delay:.27s}
.ab-grid .ab-card:nth-child(6){animation-delay:.33s}

/* ---- Filas de tabla (entrada escalonada) ---- */
.aud-table tbody tr{ animation: sn-rise .4s ease both; }
.aud-table tbody tr:nth-child(2){animation-delay:.04s}
.aud-table tbody tr:nth-child(3){animation-delay:.08s}
.aud-table tbody tr:nth-child(4){animation-delay:.12s}
.aud-table tbody tr:nth-child(5){animation-delay:.16s}
.aud-table tbody tr:nth-child(n+6){animation-delay:.20s}

/* ---- Hover: elevar tarjetas ---- */
.card, .feature, .ab-card, .credits-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.ab-card:hover, .card:hover, .feature:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -22px rgba(15,46,38,.45); }
.ab-card.featured:hover { box-shadow: 0 18px 36px -20px rgba(34,160,107,.5); }

/* ---- Botones: micro-interacciones ---- */
.btn, .ab-add, .at-export, .at-del, .ab-save, .improve, .ab-go, .c-delete, #send, .np-foot { transition: transform .12s ease, box-shadow .18s ease, background .18s ease, filter .18s ease; }
.btn:hover, .at-export:hover, .ab-save:hover, .improve:hover, .ab-go:hover { transform: translateY(-1px); }
.btn:active, .at-export:active, .ab-save:active, .ab-go:active, #send:active { transform: translateY(0) scale(.97); }
.ab-add:hover { transform: scale(1.08); }
.ab-add:active { transform: scale(.9); }
#send:hover { transform: scale(1.06); }

/* CTA principal verde con sutil profundidad */
.btn.primary, .at-export, .ab-save, .ab-go { background-image: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.05)); }

/* ---- Navegación lateral: deslizar al hover ---- */
.side a.item, .side button.item { transition: background .15s ease, color .15s ease, transform .15s ease; }
.side a.item:hover, .side button.item:hover { transform: translateX(3px); }
.side a.item.active, .side button.item.active { animation: sn-pop .25s ease both; }
@keyframes sn-pop { from { transform: scale(.98); } to { transform: none; } }

/* ---- Enlaces con subrayado animado ---- */
.cc-note a, .auth-foot a, .link { position: relative; }
.cc-note a::after, .auth-foot a::after, .link::after { content:""; position:absolute; left:0; bottom:-2px; height:1.5px; width:100%; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .22s ease; }
.cc-note a:hover::after, .auth-foot a:hover::after, .link:hover::after { transform: scaleX(1); }

/* ---- Foco con halo de acento ---- */
input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px var(--accent-soft, rgba(34,160,107,.18)) !important; }

/* ---- Mascota flotante (Audience Builder) ---- */
.mascot { animation: sn-float 4.5s ease-in-out infinite; }

/* ---- Spinner suave ---- */
.spin { animation: sn-spin .7s linear infinite; }

/* ---- Chips e insignias: aparición ---- */
.ab-chip { transition: border-color .15s ease, background .15s ease; }

/* ---- Botón "Desbloquear y descargar" con pulso de atención sutil al abrir ---- */
.confirm-back.show .ab-go { animation: sn-pulse 2.2s ease-in-out 1; }

/* ============================================================
   Accesibilidad: respetar reduce motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}