/* Animaciones de la web TZARAF Bible.
   Solo se activan si el navegador permite movimiento (prefers-reduced-motion) y el script cargó: clase .js en <html>. */

/* Títulos: cada palabra sube desde una máscara */
.tww{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.18em;margin-bottom:-.18em}
h1 .tw{padding-bottom:.16em;margin-bottom:-.16em}
.js .tw{display:inline-block;transform:translateY(108%);opacity:0;transition:transform 1s cubic-bezier(.2,.75,.1,1),opacity .9s ease;transition-delay:calc(var(--i,0) * 55ms)}
.js .wsplit.in .tw{transform:none;opacity:1}
.js h1:not(.wsplit){opacity:0}
/* El h1 usa texto con degradado: cada palabra lo lleva */
h1 .tw{background:linear-gradient(180deg,#fff 30%,rgba(255,255,255,.55));-webkit-background-clip:text;background-clip:text;color:transparent}
/* Destello dorado que recorre el título una vez revelado */
h1 .tw.gold{background:linear-gradient(100deg,#fff 0 38%,var(--accent) 50%,#fff 62% 100%);background-size:300% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;animation:sheen 2.4s cubic-bezier(.4,0,.2,1) 1.5s both}
@keyframes sheen{to{background-position:0 0}}

/* Bloques que aparecen al hacer scroll */
.js .rv{opacity:0;transform:translateY(26px);filter:blur(6px);transition:opacity .9s cubic-bezier(.2,.7,.1,1),transform .9s cubic-bezier(.2,.7,.1,1),filter .9s;transition-delay:calc(var(--d,0) * 90ms)}
.js .rv.in{opacity:1;transform:none;filter:none}

/* Pantallas: suben, se enfocan y un brillo las recorre */
.frame{overflow:hidden}
.js .frame.rvf{opacity:0;transform:translateY(60px) scale(.95);filter:blur(8px);transition:opacity 1.1s cubic-bezier(.2,.7,.1,1),transform 1.3s cubic-bezier(.2,.7,.1,1),filter 1.1s}
.js .frame.rvf.in{opacity:1;transform:none;filter:none}
.frame::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.16) 48%,rgba(226,165,75,.10) 52%,transparent 70%);transform:translateX(-130%)}
.frame.in::before{animation:glint 1.8s cubic-bezier(.4,0,.2,1) .7s both}
@keyframes glint{to{transform:translateX(130%)}}
.hero .frame.in::before{animation-delay:1.5s}

/* Dispositivos: acercamiento lento de la imagen */
.js .devices figure img{transform:scale(1.12);transition:transform 2.6s cubic-bezier(.2,.7,.1,1)}
.js .devices figure.in img{transform:none}

/* Estudio de palabra: barras que crecen */
.js .colloc i::after{width:0;transition:width 1.4s cubic-bezier(.2,.7,.1,1);transition-delay:calc(var(--d,0) * 120ms)}
.js .colloc.in i::after{width:var(--w)}

/* Búsqueda: resultados escalonados */
.results .res{animation:resIn .55s cubic-bezier(.2,.7,.1,1) both}
.results .res:nth-child(2){animation-delay:.07s}.results .res:nth-child(3){animation-delay:.14s}
.results .res:nth-child(4){animation-delay:.21s}.results .res:nth-child(5){animation-delay:.28s}.results .res:nth-child(6){animation-delay:.35s}
@keyframes resIn{from{opacity:0;transform:translateY(10px)}}
.search input.typing{caret-color:var(--accent)}

@media (prefers-reduced-motion:reduce){
  .frame::before,h1 .tw.gold,.results .res{animation:none!important}
}