/**
 * =============================================
 * ANIMACIONES — animaciones.css
 * =============================================
 * Archivo:      public/css/animaciones.css
 * Descripción:  Animaciones sutiles del sitio público (aparición al hacer
 *               scroll, entrada del hero, tarjetas, carrito, detalles).
 *               Criterio: lentas, cortas y elegantes (400-800 ms, 12-24 px,
 *               sin rebotes). Todo se apaga con prefers-reduced-motion.
 * Dependencias: public/js/animaciones.js (añade la clase html.nb-anim y
 *               las marcas data-nb-reveal; sin JS el sitio se ve normal).
 * =============================================
 */
:root {
  --nb-ease: cubic-bezier(.22, .61, .36, 1);
  --nb-dur: .7s;
  --nb-oro: #C29A59;
}

/* ── 1. Aparición al hacer scroll ───────────────────────────────── */
html.nb-anim [data-nb-reveal] {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity var(--nb-dur) var(--nb-ease),
              transform var(--nb-dur) var(--nb-ease);
  transition-delay: calc(var(--nb-i, 0) * 80ms);
  will-change: opacity, transform;
}
html.nb-anim [data-nb-reveal="fade"]  { transform: none; }
html.nb-anim [data-nb-reveal="left"]  { transform: translate3d(-24px, 0, 0); }
html.nb-anim [data-nb-reveal="right"] { transform: translate3d(24px, 0, 0); }
html.nb-anim [data-nb-reveal="zoom"]  { transform: scale(.96); }
html.nb-anim [data-nb-reveal].is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Línea dorada que se dibuja bajo los títulos de sección */
.nb-home-section-head::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin: 1rem auto 0;
  background: var(--nb-oro);
  border-radius: 2px;
}
html.nb-anim .nb-home-section-head[data-nb-reveal]::after {
  transform: scaleX(0);
  transition: transform .9s var(--nb-ease) .25s;
}
html.nb-anim .nb-home-section-head[data-nb-reveal].is-in::after {
  transform: scaleX(1);
}

/* ── 2. Hero: entrada en cascada + zoom lento ───────────────────── */
@keyframes nbHeroIn {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: none; }
}
.nb-hero-badge { animation: nbHeroIn .8s var(--nb-ease) .15s both; }
.nb-hero-sub   { animation: nbHeroIn .8s var(--nb-ease) .55s both; }
.nb-hero-ctas  { animation: nbHeroIn .8s var(--nb-ease) .8s both; }

@keyframes nbHeroZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}
.nb-hero-video { animation: nbHeroZoom 18s ease-out both; }

/* Botones del hero: elevación suave */
.nb-hero-cta { transition: transform .35s var(--nb-ease), box-shadow .35s var(--nb-ease), background-color .3s ease, color .3s ease; }
.nb-hero-cta:hover { transform: translateY(-2px); }

/* ── 3. Navegación: subrayado que crece desde el centro (solo PC) ─ */
@media (min-width: 992px) {
  .navbar-nav > .nav-link,
  .navbar-nav > .nav-item > .nav-link:not(.dropdown-toggle) {
    position: relative;
  }
  .navbar-nav > .nav-link::before,
  .navbar-nav > .nav-item > .nav-link:not(.dropdown-toggle)::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: .5rem;
    width: 0;
    height: 1px;
    background: var(--nb-oro);
    transform: translateX(-50%);
    transition: width .35s var(--nb-ease);
    pointer-events: none;
  }
  .navbar-nav > .nav-link:hover::before,
  .navbar-nav > .nav-link.active::before,
  .navbar-nav > .nav-item > .nav-link:not(.dropdown-toggle):hover::before,
  .navbar-nav > .nav-item > .nav-link.active:not(.dropdown-toggle)::before {
    width: 45%;
  }
}

/* ── 4. Tarjetas de producto ────────────────────────────────────── */
.nb-pc-v2 .nb-pc-img { transition: transform .8s var(--nb-ease), opacity .5s ease; }
.nb-pc-v2-price-current { transition: color .3s ease; }
.nb-pc-v2:hover .nb-pc-v2-price-current { color: #86662F; }

/* Brillo que cruza el botón al pasar el mouse */
.nb-pc-v2-btn-dark { position: relative; overflow: hidden; }
.nb-pc-v2-btn-dark:not(:disabled)::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg);
  transition: left .7s var(--nb-ease);
  pointer-events: none;
}
.nb-pc-v2-btn-dark:not(:disabled):hover::after { left: 130%; }
.nb-pc-v2-btn-dark i { transition: transform .3s var(--nb-ease); }
.nb-pc-v2-btn-dark:not(:disabled):hover i { transform: translateX(2px) scale(1.08); }

/* Pulso corto al agregar al carrito */
@keyframes nbBtnPulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(.97); }
  100% { transform: scale(1); }
}
.nb-btn-pulse { animation: nbBtnPulse .45s var(--nb-ease); }

/* Etiqueta de descuento: un destello único al aparecer */
.nb-pc-badge-pct { overflow: hidden; }
html.nb-anim [data-nb-reveal].is-in .nb-pc-badge-pct::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -80%;
  width: 60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg);
  animation: nbShimmer 1.2s var(--nb-ease) .6s 1 both;
  pointer-events: none;
}
@keyframes nbShimmer {
  from { left: -80%; }
  to   { left: 140%; }
}

/* ── 5. Carrito: latido del ícono y salto del contador ──────────── */
@keyframes nbBadgePop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}
@keyframes nbCartBeat {
  0%, 100% { transform: scale(1); }
  35%      { transform: scale(1.14); }
  65%      { transform: scale(.96); }
}
.nb-cart-badge.nb-bump { animation: nbBadgePop .55s var(--nb-ease); }
.nb-icon-btn.nb-bump   { animation: nbCartBeat .6s var(--nb-ease); }

/* Líneas del carrito: entran suaves */
@keyframes nbRowIn {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}
.nb-cart-row { animation: nbRowIn .5s var(--nb-ease) both; }
.nb-cart-row:nth-child(2) { animation-delay: .06s; }
.nb-cart-row:nth-child(3) { animation-delay: .12s; }
.nb-cart-row:nth-child(4) { animation-delay: .18s; }
.nb-cart-row:nth-child(n+5) { animation-delay: .24s; }

/* ── 6. Categorías: zoom suave de la foto ───────────────────────── */
.nb-cat-card .nb-cat-thumb { overflow: hidden; }
.nb-cat-card .nb-cat-thumb img { transition: transform .9s var(--nb-ease); }
.nb-cat-card:hover .nb-cat-thumb img { transform: scale(1.06); }

/* ── 7. Imágenes: aparecen con fundido y se aclaran ─────────────── */
html.nb-anim img.nb-img-wait {
  opacity: 0;
  filter: blur(8px);
}
html.nb-anim img.nb-img-ok {
  transition: opacity .6s ease, filter .6s ease;
}

/* ── 8. Entrada suave de la página ──────────────────────────────── */
@keyframes nbPageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
html.nb-anim body { animation: nbPageIn .35s ease-out; }

/* ── 9. Accesibilidad: sin movimiento si el usuario lo pide ─────── */
@media (prefers-reduced-motion: reduce) {
  html.nb-anim [data-nb-reveal],
  html.nb-anim [data-nb-reveal].is-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .nb-hero-badge, .nb-hero-sub, .nb-hero-ctas, .nb-hero-video,
  .nb-cart-row, .nb-btn-pulse,
  .nb-cart-badge.nb-bump, .nb-icon-btn.nb-bump,
  html.nb-anim body { animation: none !important; }
  html.nb-anim img.nb-img-wait { opacity: 1; filter: none; }
  .nb-home-section-head[data-nb-reveal]::after { transform: none !important; transition: none !important; }
  .nb-pc-v2-btn-dark::after { display: none; }
}