/* Splash de marca */
.splash { position: fixed; inset: 0; z-index: 900; background: var(--ink); display: flex; align-items: center; justify-content: center; transition: opacity .6s var(--ease), visibility .6s; }
.splash img { width: min(70vw, 360px); height: auto; opacity: 0; transform: translateY(8px); animation: splashIn .7s var(--ease) .05s forwards; }
.splash.is-hidden { opacity: 0; visibility: hidden; }
@keyframes splashIn { to { opacity: 1; transform: none; } }

/* Reveal al hacer scroll */
.js .reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal-img { clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease); }
.js .reveal-img.is-visible { clip-path: inset(0 0 0 0); }

/* Hero: la roca respira y el titular entra línea a línea */
.hero-media img { animation: rockBreath 22s ease-in-out infinite alternate; }
@keyframes rockBreath { from { transform: scale(1.0); } to { transform: scale(1.06); } }
.js .hero h1 span, .js .hero .lead, .js .hero .hero-actions { opacity: 0; transform: translateY(26px); animation: lineIn 1s var(--ease) forwards; }
.js .hero h1 span:nth-child(1) { animation-delay: .35s; }
.js .hero h1 span:nth-child(2) { animation-delay: .6s; }
.js .hero .lead { animation-delay: .95s; }
.js .hero .hero-actions { animation-delay: 1.15s; }
@keyframes lineIn { to { opacity: 1; transform: none; } }
.hero-has-splash h1 span, .hero-has-splash .lead, .hero-has-splash .hero-actions { animation-delay: calc(var(--splash, 0s) + 0.2s) !important; }

/* Rejilla de proyectos: aparición al filtrar */
.shot { animation: shotIn .6s var(--ease) both; }
@keyframes shotIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal-img, .js .hero h1 span, .js .hero .lead, .js .hero .hero-actions { opacity: 1; transform: none; clip-path: none; animation: none; }
  .hero-media img { animation: none; }
}
