/* Vida para webs de Backio. Se copia a web/ y se pega al final de estilos.css (o se enlaza aparte).
   Todo depende de la clase .js que pone vida.js; sin JS o con "reducir movimiento" la página se ve quieta y completa. */
:root {
  --vida-curva: cubic-bezier(.2, .7, .2, 1);
  --vida-corte: cubic-bezier(.7, 0, .2, 1);
  --vida-acento: currentColor; /* color de las líneas que se dibujan: cambialo por el de la marca */
}

/* Letra por letra (h1 data-letras) */
.letra, .letras-palabra { display: inline-block; }
.letras-palabra { white-space: nowrap; }
.js [data-letras] { overflow: hidden; padding-top: .06em; padding-bottom: .14em; margin-bottom: -.14em; }
.js .letra { transform: translateY(110%); animation: vida-subir 1s var(--vida-curva) forwards; animation-delay: calc(var(--vida-arranque, .4s) + var(--i) * 55ms); }

/* Entradas al cargar: data-entra="1.2" (segundos de espera) */
.js [data-entra] { opacity: 0; animation: vida-aparecer 1s forwards; }

/* Marca SVG que se dibuja sola: <svg data-dibujar> con paths de trazo */
.js [data-dibujar] path { stroke-dasharray: 420; stroke-dashoffset: 420; animation: vida-dibujar 1.8s .2s var(--vida-corte) forwards; }

@keyframes vida-subir { to { transform: none; } }
@keyframes vida-aparecer { to { opacity: 1; } }
@keyframes vida-dibujar { to { stroke-dashoffset: 0; } }
@keyframes vida-latido { 0%, 100% { translate: 0 0; } 50% { translate: 0 6px; } }
.latido { animation: vida-latido 2.4s ease-in-out infinite; }

/* Subir: el básico para textos, botones y tarjetas */
.js [data-anim] { opacity: 0; transform: translateY(28px); filter: blur(6px); transition: opacity .9s ease, transform 1s var(--vida-curva), filter .9s ease; transition-delay: var(--d, 0s); }
.js [data-anim].visto { opacity: 1; transform: none; filter: none; }
.js [data-anim="izquierda"] { transform: translateX(-40px); }
.js [data-anim="derecha"] { transform: translateX(40px); }
.js [data-anim="zoom"] { transform: scale(.94); }

/* Palabra por palabra */
.js [data-anim="palabras"] { opacity: 1; transform: none; filter: none; }
.palabra { display: inline-block; overflow: hidden; vertical-align: top; padding: .12em 0 .16em; margin: -.12em 0 -.16em; }
.palabra > span { display: inline-block; }
.js [data-anim="palabras"] .palabra > span { transform: translateY(108%); transition: transform 1.1s var(--vida-curva); transition-delay: calc(var(--d, 0s) + var(--i) * 55ms); }
.js [data-anim="palabras"].visto .palabra > span { transform: none; }

/* Lista en cascada (y una línea que se dibuja arriba si lleva data-linea) */
.js [data-anim="lista"] { opacity: 1; transform: none; filter: none; }
.js [data-anim="lista"] > * { opacity: 0; transform: translateX(-18px); transition: opacity .7s ease, transform .8s var(--vida-curva); transition-delay: calc(var(--i) * 110ms + .1s); }
.js [data-anim="lista"].visto > * { opacity: 1; transform: none; }
.js [data-linea] { position: relative; border-top-color: transparent !important; }
.js [data-linea]::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--vida-acento); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--vida-corte); }
.js [data-linea].visto::before { transform: none; }

/* Foto que se descubre de abajo hacia arriba: el recorte va en la imagen, nunca en el contenedor observado */
.js [data-anim="revelar"] { opacity: 1; transform: none; filter: none; }
.js [data-anim="revelar"] img, .js [data-anim="revelar"] video { clip-path: inset(100% 0 0 0 round var(--vida-radio, 10px)); transform: scale(1.18); transition: clip-path 1.3s var(--vida-corte), transform 1.8s var(--vida-curva); transition-delay: var(--d, 0s); }
.js [data-anim="revelar"].visto img, .js [data-anim="revelar"].visto video { clip-path: inset(0 0 0 0 round var(--vida-radio, 10px)); transform: none; }

/* Fondo de portada en video o con partículas */
.vida-fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.vida-particulas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .latido, .js .letra, .js [data-entra], .js [data-dibujar] path { animation: none; opacity: 1; transform: none; stroke-dashoffset: 0; }
}