/* ==========================================================================
   LeanHaus — Movimiento
   .reveal-on  → apariciones al entrar en pantalla (todo el sitio)
   .motion-on  → efectos ligados a la posición del scroll
   Ambas las añade el <head> solo con JS y sin prefers-reduced-motion.
   Si algo falla, se quitan y el contenido queda visible.
   ========================================================================== */

@keyframes rise { from { transform: translate3d(0, 112%, 0); } }
@keyframes fade-up { from { opacity: 0; transform: translate3d(0, 24px, 0); } }
@keyframes caret-blink { 50% { opacity: 0; } }

/* ---- Entrada del hero ---- */
.js .line__inner { animation: rise 1400ms var(--ease-expo) both; }
.js .line + .line .line__inner { animation-delay: 110ms; }
.js .hero__bottom { animation: fade-up 1200ms 450ms var(--ease-expo) both; }
.js .hero__toggle { animation: fade-up 1000ms 900ms var(--ease-expo) both; }

/* Cursor de escritura: parpadea mientras escribe y se apaga al terminar */
.caret { animation: caret-blink 900ms steps(1) infinite; }
.caret.is-done { animation: caret-blink 900ms steps(1) 3; opacity: 0; transition: opacity 400ms 2.7s; }

/* Evita que los elementos se desvanezcan al prepararlos */
.reveal-prep [data-reveal],
.reveal-prep [data-reveal] > img { transition: none !important; }

/* ---- Bloques: enfoque suave (sube, aparece y se desenfoca) ---- */
.reveal-on [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  filter: blur(10px);
  transition:
    opacity 1100ms var(--ease-expo),
    transform 1400ms var(--ease-expo),
    filter 1100ms var(--ease-expo);
  transition-delay: var(--d, 0ms);
}
.reveal-on [data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ---- Piezas pequeñas (etiquetas, enlaces, datos): suben en cascada ---- */
.reveal-on [data-reveal="soft"] {
  filter: none;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity 800ms var(--ease-expo),
    transform 1000ms var(--ease-expo);
  transition-delay: var(--d, 0ms);
}

/* ---- Imágenes: cortinilla de abajo a arriba + zoom que se asienta ---- */
.reveal-on [data-reveal="clip"] {
  opacity: 1;
  filter: none;
  transform: none;
  clip-path: inset(99.4% 0 0 0 round var(--radius-m));
  transition: clip-path 1500ms var(--ease-expo);
  transition-delay: var(--d, 0ms);
}
.reveal-on [data-reveal="clip"].is-in { clip-path: inset(0 0 0 0 round var(--radius-m)); }
/* `scale` y `translate` van por separado para que el zoom de entrada
   no retrase el parallax ni el hover */
.reveal-on [data-reveal="clip"] > img {
  scale: 1.3;
  transition: scale 2000ms var(--ease-expo), transform 1400ms var(--ease-expo);
}
.reveal-on [data-reveal="clip"].is-in > img { scale: 1; }

/* Parallax dentro del marco de los casos (motion.js escribe --py) */
.reveal-on .case__media[data-reveal="clip"] > img { translate: 0 var(--py, 0px); scale: 1.35; }
.reveal-on .case__media[data-reveal="clip"].is-in > img { scale: 1.1; }
/* El vídeo apenas se amplía para que no se recorte la interfaz que muestra */
.reveal-on .case__media[data-reveal="clip"] > video {
  translate: 0 calc(var(--py, 0px) * 0.4);
  scale: 1.2;
  transition: scale 2000ms var(--ease-expo);
}
.reveal-on .case__media[data-reveal="clip"].is-in > video { scale: 1.04; }

/* ---- Titulares palabra a palabra ---- */
.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0 0.06em 0.14em 0;
  margin: 0 -0.06em -0.14em 0;
}
.split-word__inner { display: inline-block; }

.reveal-on [data-split] .split-word__inner {
  transform: translate3d(0, 115%, 0) rotate(5deg);
  transform-origin: 0 100%;
  transition: transform 1300ms var(--ease-expo);
  transition-delay: calc(var(--w, 0) * 60ms + var(--d, 0ms));
}
.reveal-on [data-split].is-in .split-word__inner { transform: none; }

/* ---- Ligados al scroll ---- */
.motion-on [data-words] .scrub-word { opacity: var(--o, 0.45); }

.split-letter { display: inline-block; }
.motion-on [data-letters] .split-letter { transform: translate3d(0, var(--ly, 100%), 0); }

/* ---- Proyectos: que se note que hay más ---- */
@keyframes nudge-x {
  0%, 68%, 100% { transform: translateX(0); }
  76% { transform: translateX(5px); }
  84% { transform: translateX(0); }
  90% { transform: translateX(3px); }
}
@keyframes tab-tour {
  35% { color: var(--fg); transform: translateX(0.625rem); }
}
@keyframes tab-tour-pill {
  35% { color: var(--fg); border-color: var(--fg); transform: translateY(-3px); }
}
.motion-on .cases__nav:not(.is-done) .cases__arrow--next svg,
.motion-on .case__next-icon svg { animation: nudge-x 3.2s var(--ease-out) infinite; }
.motion-on .cases__tabs.is-touring .case-tab:not([aria-selected="true"]) > span {
  animation: tab-tour 1100ms var(--ease-expo) calc(var(--ti, 0) * 160ms) both;
}
@media (max-width: 1100px) {
  .motion-on .cases__tabs.is-touring .case-tab:not([aria-selected="true"]) > span { animation: none; }
  .motion-on .cases__tabs.is-touring .case-tab:not([aria-selected="true"]) {
    animation: tab-tour-pill 1100ms var(--ease-expo) calc(var(--ti, 0) * 160ms) both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .line__inner,
  .js .hero__bottom,
  .js .hero__toggle,
  .caret { animation: none; }
  .caret { display: none; }
}