/* ═══════════════════════════════════════════════════════════════════
   FLUIDEZ — capa de movimiento sobre styles.css y experience.css
   Viene de la versión de prueba "SkinLeatherWeb-pruebas" (set. 2026) y se adaptó a la web
   reparada el 6-10-2026. Si algo no convence, se sacan este archivo, fluidez.js y vendor/lenis.*
   y la web queda con el movimiento anterior.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --sl-suave: cubic-bezier(0.22, 1, 0.36, 1);   /* frena largo: entradas */
}

/* ─── 1. EL HERO ENTRA EN CASCADA ─────────────────────────────────────
   "backwards" y no "both": al terminar la animación el elemento queda libre, así el botón
   conserva su efecto al pasar el mouse. */
@media (prefers-reduced-motion: no-preference) {
  #hero .hero-eyebrow { animation: slSube 1s 0.1s var(--sl-suave) backwards; }
  #hero .hero-word { animation: slTitulo 1.25s 0.2s var(--sl-suave) backwards; }
  #hero .hero-word + .hero-word { animation-delay: 0.34s; }
  #hero .hero-sub { animation: slSube 1.1s 0.55s var(--sl-suave) backwards; }
  #hero .hero-cta { animation: slSube 1.1s 0.7s var(--sl-suave) backwards; }
  #hero .hero-origin { animation: slSube 1.1s 0.85s var(--sl-suave) backwards; }
  #hero .hero-scroll-stage { animation: slPieza 1.6s 0.05s var(--sl-suave) backwards; }
  #hero .hero-scroll-hint { animation: slSube 1s 1.1s var(--sl-suave) backwards; }
}
@keyframes slSube {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slTitulo {
  from { opacity: 0; transform: translateY(24px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
/* El sillón no se funde (es la imagen principal): aparece descubriéndose desde abajo. */
@keyframes slPieza {
  from { transform: scale(1.04); clip-path: inset(12% 0 0 0); }
  to   { transform: scale(1);    clip-path: inset(0 0 0 0); }
}


/* ─── 2. "LEATHER" HECHO DE CUERO ─────────────────────────────────────
   La palabra se rellena con la foto del cuero suela de la casa. Al deslizar, la veta se corre
   y las letras se separan apenas: el despiece del sillón, dicho en tipografía. */
#hero .hero-title {
  letter-spacing: calc(-0.045em + var(--sl-abre, 0) * 0.04em);
}
#hero .hero-leather {
  padding: 0 0.06em 0.08em 0;   /* la itálica se sale de su caja: que no se corte */
  background-image: url("img/cueros/suela.webp");
  background-size: 160% auto;
  background-position: 50% var(--sl-veta, 40%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  #hero .hero-leather { color: #876647; -webkit-text-fill-color: #876647; }
}


/* ─── 3. EL EPÍGRAFE DEL DESPIECE ─────────────────────────────────────
   Ocupa el lugar de la leyenda anterior (hereda .hero-craft-caption: posición y reglas de
   celular). Narra qué se ve mientras la pieza se desarma; la barra de avance es un pespunte. */
.sl-despiece { opacity: 0; transition: opacity 0.6s var(--sl-suave); }
.sl-despiece.activo { opacity: 1; }
.sl-despiece .sl-capitulo {
  display: inline-flex;
  align-items: baseline;
  gap: 0.75em;
  white-space: nowrap;
}
.sl-despiece .sl-num {
  font-family: var(--font-serif);
  font-size: 1.9em;
  font-style: italic;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #94734e;
}
.sl-despiece .sl-texto {
  display: inline-block;
  transition: opacity 0.3s ease, transform 0.45s var(--sl-suave);
}
.sl-despiece .sl-texto.cambiando { opacity: 0; transform: translateY(5px); }
.sl-despiece .hero-progress {
  height: 1px;
  background: repeating-linear-gradient(to right, rgba(92, 74, 53, 0.25) 0 6px, transparent 6px 11px);
}
.sl-despiece .hero-progress i {
  background: repeating-linear-gradient(to right, #94734e 0 6px, transparent 6px 11px);
  transition: none;
}


/* ─── 4. SECCIONES Y MUEBLES QUE ENTRAN CON FRENO ─────────────────────
   Más largo y con freno que los 420 ms anteriores: se nota el movimiento sin demorar la lectura.
   Mismo observador de motion.js (agrega .visible); acá solo cambia el tiempo y la distancia. */
html .reveal, html .product-card, html .product-card-poltrona, html .product-card-sillon, html .sillones-callout {
  transition: opacity 0.9s var(--sl-suave), transform 0.9s var(--sl-suave) !important;
}
html :is(.reveal, .product-card, .product-card-poltrona, .product-card-sillon, .sillones-callout).motion-pending {
  transform: translateY(26px);
}
/* En cascada cuando entran juntos. */
html .cueros-grid .reveal:nth-child(2) { transition-delay: 0.06s !important; }
html .cueros-grid .reveal:nth-child(3) { transition-delay: 0.12s !important; }
html .cueros-grid .reveal:nth-child(4) { transition-delay: 0.18s !important; }
html .cueros-grid .reveal:nth-child(5) { transition-delay: 0.24s !important; }
html .cueros-grid .reveal:nth-child(6) { transition-delay: 0.30s !important; }
html .cueros-grid .reveal:nth-child(7) { transition-delay: 0.36s !important; }
html .cueros-grid .reveal:nth-child(8) { transition-delay: 0.42s !important; }
html .beneficios-grid .reveal:nth-child(2) { transition-delay: 0.08s !important; }
html .beneficios-grid .reveal:nth-child(3) { transition-delay: 0.16s !important; }
html .beneficios-grid .reveal:nth-child(4) { transition-delay: 0.24s !important; }
html .products-grid > :nth-child(even) { transition-delay: 0.08s !important; }

/* Títulos palabra por palabra (de "stagger-text", Vengeance UI): fluidez.js envuelve cada
   palabra y sube cuando su bloque .reveal se vuelve visible. */
.sl-palabra {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.08em;   /* que no se corten las descendentes, sin agrandar el renglón */
  margin-bottom: -0.08em;
}
.sl-palabra > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 1s var(--sl-suave);
  transition-delay: calc(var(--i, 0) * 60ms + 100ms);
}
.reveal.visible .sl-palabra > span { transform: translateY(0); }
section h2 { text-wrap: balance; }


/* ─── 5. DETALLES ─────────────────────────────────────────────────── */
/* El cuero se acerca al pasar. */
.cuero-swatch img { transition: transform 1.2s var(--sl-suave); }
.cuero-card:hover .cuero-swatch img { transform: scale(1.08); }

/* Hilo dorado de avance de la página. */
.sl-progreso {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 1001;
  background: #94734e;
  transform-origin: left center;
  transform: scaleX(0);
  pointer-events: none;
}

/* La pista se va con un fundido cuando empezás a deslizar. */
.hero-scroll-hint { transition: opacity 0.45s ease, transform 0.45s ease; }


/* ─── 6. SCROLL SUAVE (Lenis, solo con mouse o trackpad) ─────────── */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }


/* ─── Quien pidió menos movimiento, recibe menos movimiento ────────── */
@media (prefers-reduced-motion: reduce) {
  .sl-palabra > span { transform: none; transition: none; }
  .cuero-swatch img { transition: none; }
  .sl-progreso { display: none; }
}