/* El Económico: animaciones. Solo se activan con html.fx-ready (lo pone fx.js si no hay "reducir movimiento"). */

/* Cinta de platos: estilo base, también sin JavaScript */
#cinta { overflow: hidden; }
#cinta span span { color: var(--dorado, #D4A64A); font-style: normal; font-size: .55em; vertical-align: middle; margin: 0 .45em; }
#cinta .fx-track { display: flex; width: max-content; will-change: transform; }
#cinta .fx-track > * { flex: none; }

/* Barra de progreso de lectura */
#fx-progress { position: fixed; inset: 0 0 auto 0; height: 3px; background: var(--dorado, #D4A64A); transform-origin: 0 50%; scale: 0 1; z-index: 9999; pointer-events: none; }

/* Cabecera al hacer scroll */
.fx-ready header { transition: box-shadow .4s ease; }
.fx-ready header img { transition: scale .5s cubic-bezier(.2, .8, .2, 1); transform-origin: left center; }
.fx-ready header.fx-scrolled { box-shadow: 0 14px 34px -16px rgba(42, 26, 27, .35); }
.fx-ready header.fx-scrolled img { scale: .84; }

/* Titulares: palabras que suben desde una máscara */
.fx-ready .fx-w { display: inline-block; overflow: hidden; vertical-align: top; padding: .14em .02em .18em; margin: -.14em -.02em -.18em; }
.fx-ready .fx-wi { display: inline-block; translate: 0 118%; rotate: 5deg; transform-origin: 0 100%;
	transition: translate 1.05s cubic-bezier(.2, .85, .2, 1) calc(var(--d, 0ms) + var(--i, 0) * 55ms),
	            rotate 1.05s cubic-bezier(.2, .85, .2, 1) calc(var(--d, 0ms) + var(--i, 0) * 55ms); }
.fx-ready .fx-in .fx-wi { translate: 0 0; rotate: 0deg; }

/* Bloques que suben y aparecen */
.fx-ready .fx-up { opacity: 0; translate: 0 2.25rem;
	transition: opacity .9s ease var(--d, 0ms), translate 1.1s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms); }
.fx-ready .fx-up.fx-in { opacity: 1; translate: 0 0; }

/* Fotos que se descubren con una cortina y se asientan */
.fx-ready .fx-img { --clip: inset(100% 0 0 0); clip-path: var(--clip); scale: 1.22;
	transition: clip-path 1.35s cubic-bezier(.77, 0, .18, 1) var(--d, 0ms), scale 1.9s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms), transform .6s ease; }
.fx-ready .fx-img.fx-l { --clip: inset(0 100% 0 0); }
.fx-ready .fx-img.fx-r { --clip: inset(0 0 0 100%); }
.fx-ready .fx-img.fx-t { --clip: inset(0 0 100% 0); }
.fx-ready .fx-img.fx-c { --clip: inset(0 50% 0 50%); }
.fx-ready .fx-img.fx-in { clip-path: inset(0 0 0 0); scale: 1; }
#cinta .fx-track > * { padding-right: .45em; }

/* Las fotos ampliadas antes de revelarse no deben crear scroll horizontal */
html.fx-ready, .fx-ready body, .fx-ready #terraza { overflow-x: clip; }