/* animations.css — Tapiceros Dusan: pantalla de carga y estados previos a las animaciones (GSAP en js/main.js) */

/* Pantalla de carga de marca: el sello aparece y un hilo dorado lo rodea como una costura (≤ 0,4 s); sale sola por CSS */
.load-splash{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;background:var(--ink);animation:splashOut .3s ease .5s forwards}
.load-splash__seal{position:relative;width:min(40vw,150px);aspect-ratio:1}
.load-splash img{position:absolute;inset:9%;width:82%;height:auto;opacity:0;transform:scale(.82);animation:splashSeal .38s cubic-bezier(.2,.8,.2,1) forwards}
.load-splash svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.load-splash circle{fill:none;stroke:var(--gold);stroke-width:1;stroke-dasharray:3 2.2;stroke-dashoffset:0;animation:splashStitch .4s ease-out forwards}
@keyframes splashSeal{to{opacity:1;transform:none}}
@keyframes splashStitch{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes splashOut{to{opacity:0;visibility:hidden}}
.no-splash .load-splash{display:none}

/* Estados previos a la animación (solo con JS y GSAP cargados: clase .js en <html>) */
.js [data-split]{visibility:hidden}
.js [data-rise]{opacity:0;transform:translateY(3rem)}
.js [data-hero-fade]{opacity:0;transform:translateY(1.6rem)}
.js .rule{transform:scaleX(0)}
.js [data-reveal-img]{clip-path:inset(100% 0 0 0)}
/* Red de seguridad: si algo falla, todo aparece a los 3 s */
.js.anim-fallback [data-split]{visibility:visible}
.js.anim-fallback [data-rise],.js.anim-fallback [data-hero-fade]{opacity:1;transform:none}
.js.anim-fallback .rule{transform:none}
.js.anim-fallback [data-reveal-img]{clip-path:none}

@media (prefers-reduced-motion:reduce){
  .load-splash{display:none}
  .js [data-split]{visibility:visible}
  .js [data-rise],.js [data-hero-fade]{opacity:1;transform:none}
  .js .rule{transform:none}
  .js [data-reveal-img]{clip-path:none}
  .statement__text .w,.quote__text .w{opacity:1}
}