/* =============================================================================
   EL MOVIMIENTO DE LA CASA (01-10-2026) — el lenguaje de Econnet en
   Galeixandre: aparecer al bajar, letras que suben, el foco que sigue al
   cursor, la barra de lectura, el escaparate y la foto que vuela de la
   tarjeta a la ficha. La lógica: assets/js/movimiento.js y escaparate.js.
   ========================================================================== */

:root { --lujo: cubic-bezier(0.22, 1, 0.36, 1); }

/* ---------- aparecer al bajar (movimiento.js) ---------------------------- */
[data-revelar][data-oculto] { opacity: 0; }
[data-revelar][data-visto] { animation: entrar 0.85s var(--lujo) both; animation-delay: var(--retraso, 0s); }
@keyframes entrar { from { opacity: 0; transform: translateY(26px); } }

/* Al cargar, sin esperar al scroll: escalonado con --i. */
.entrada { animation: entrar 0.9s var(--lujo) both; animation-delay: calc(0.15s + var(--i, 0) * 0.09s); }

/* ---------- letras que suben --------------------------------------------- */
[data-letras] { overflow: hidden; }
[data-letras] .letra { display: inline-block; }
[data-letras][data-oculto] { opacity: 1; }
[data-letras][data-oculto] .letra { transform: translateY(105%); }
[data-letras][data-visto] { animation: none; }
[data-letras][data-visto] .letra { animation: subir-letra 0.9s var(--lujo) both; animation-delay: calc(0.05s + var(--i) * 0.05s); }
@keyframes subir-letra { from { transform: translateY(105%); } }

/* La casa en grande, antes del pie. */
.marca-grande {
  margin: clamp(4rem, 9vw, 8rem) 0 0; padding: 0 var(--margen); text-align: center; white-space: nowrap;
  font-family: var(--serif); font-weight: 400; line-height: 0.82; letter-spacing: -0.02em;
  font-size: min(15.5vw, 15rem); color: var(--tinta);
}
.marca-grande .logo-casa { font-size: min(10.5vw, 10rem); letter-spacing: 0.02em; }
.marca-grande .letra { vertical-align: top; }

/* ---------- el foco que sigue al cursor ---------------------------------- */
[data-foco] { position: relative; isolation: isolate; }
[data-foco]::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(340px circle at var(--fx, 50%) var(--fy, 0%), rgba(205, 176, 116, 0.16), transparent 65%);
  transition: opacity 0.4s var(--lujo);
}
[data-foco]:hover::before { opacity: 1; }

/* ---------- la barra de lectura ------------------------------------------ */
.progreso-lectura { display: none; }
@supports (animation-timeline: scroll()) {
  .progreso-lectura {
    display: block; position: fixed; inset-inline: 0; top: 0; z-index: 70; height: 2px;
    transform-origin: left; background: var(--oro);
    animation: progreso linear both; animation-timeline: scroll(root);
  }
}
@keyframes progreso { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- el escaparate (escaparate.js) -------------------------------- */
.escaparate { position: relative; }
.escaparate__cabeza { position: absolute; right: var(--margen); top: -2.6rem; }
.escaparate__contador { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.18em; color: var(--tinta-tenue); }

.escenario {
  --paso: min(30vw, 470px); --ancho: min(40vw, 560px); --alto: clamp(320px, 44vw, 560px);
  position: relative; height: var(--alto); overflow: hidden; perspective: 1400px;
  touch-action: pan-y; user-select: none; outline: none;
}
/* Un vial es casi cinco veces más alto que ancho: su ancho sale del alto del escenario. */
.escenario--vial { --alto: clamp(380px, 44vw, 580px); --ancho: calc(var(--alto) * 0.19); --paso: calc(var(--alto) * 0.42); }
.escenario img, .escenario a { -webkit-user-drag: none; user-select: none; }

/* El nombre, gigante y detrás. Entra con cada pieza. */
.palabra-fondo {
  position: absolute; left: 50%; top: 50%; z-index: 0; margin: 0; white-space: nowrap; pointer-events: none;
  font-family: var(--serif); font-weight: 400; line-height: 0.8; letter-spacing: -0.03em;
  font-size: min(calc(150vw / var(--largo, 6)), 30vw, 300px);
  color: rgba(244, 239, 231, 0.07);
  transform: translate(-50%, -55%);
  animation: palabra 1.2s var(--lujo) both;
}
@keyframes palabra { from { opacity: 0; transform: translate(-50%, -38%); letter-spacing: 0.04em; } }

.pieza {
  position: absolute; left: 50%; top: 50%; width: var(--ancho);
  opacity: var(--a, 1);
  transform: translate(-50%, -50%) translateX(calc(var(--o, 0) * var(--paso))) scale(var(--s, 1));
  transition: transform 1.1s var(--lujo), opacity 0.9s var(--lujo), filter 0.9s var(--lujo);
}
.pieza[aria-hidden="true"] { filter: saturate(0.55) brightness(0.8); cursor: pointer; }
.pieza[aria-hidden="true"]:hover { filter: none; }
.giro {
  --rx: 0deg; --ry: 0deg; --sx: 0px;
  position: relative; transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d;
  transition: transform 0.6s var(--lujo);
}
.pieza--centro .giro { animation: posarse 1.4s var(--lujo) both; }
@keyframes posarse { from { transform: translateY(18px) rotateY(-10deg); opacity: 0.4; } }
.objeto { display: grid; place-items: center; aspect-ratio: 4 / 3; }
.escenario--vial .objeto { aspect-ratio: 0.21; }
.objeto img {
  width: 100%; height: 100%; object-fit: contain;
}
/* La sombra en el suelo: se estira hacia el lado contrario del giro. */
.sombra {
  position: absolute; left: 14%; right: 14%; bottom: 2%; height: 6%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), transparent); filter: blur(6px);
  transform: translateX(var(--sx)) translateY(50%); transition: transform 0.6s var(--lujo);
}
.escenario--vial .sombra { left: 4%; right: 4%; height: 2.5%; }

.flecha-escaparate {
  position: absolute; top: 50%; z-index: 30; width: 3rem; height: 3rem; display: grid; place-items: center;
  border: 1px solid rgba(244, 239, 231, 0.3); border-radius: 50%; color: var(--tinta); background: transparent;
  transform: translateY(-50%); cursor: pointer; transition: background-color 0.3s, color 0.3s;
}
.flecha-escaparate:hover { background: var(--tinta); color: var(--papel); }
.flecha-escaparate--izq { left: clamp(10px, 3vw, 48px); }
.flecha-escaparate--der { right: clamp(10px, 3vw, 48px); }

/* Lo de comprar, debajo: entra escalonado con cada pieza. */
.escaparate__info { display: grid; justify-items: center; text-align: center; padding: 0 var(--margen); min-height: 15rem; }
.aparece { animation: entrar 0.8s var(--lujo) both; animation-delay: calc(0.1s + var(--i, 0) * 0.07s); }
.escaparate__ante { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--oro); margin: 0; }
.escaparate__titulo { font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 4.4vw, 3.8rem); line-height: 1; margin: 0.6rem 0 0; }
.escaparate__titulo a { color: var(--tinta); }
.escaparate__linea { font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: var(--tinta); opacity: 0.75; margin: 0.6rem 0 0; max-width: 36em; }
.escaparate__precio { font-family: var(--sans); font-size: 1.15rem; color: var(--tinta); margin: 1rem 0 0; }
.escaparate__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; margin-top: 1.4rem; }

/* El índice: todas, por nombre; la raya de arriba avanza hasta la elegida. */
.escaparate__indice {
  list-style: none; margin: clamp(2rem, 4vw, 3.5rem) auto 0; padding: 0 var(--margen); max-width: var(--ancho);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}
.escaparate__indice button {
  position: relative; width: 100%; padding: 1rem 1rem 1rem 0; text-align: left; background: none; cursor: pointer;
  border-top: 1px solid var(--linea); color: var(--tinta-tenue); transition: color 0.4s;
}
.escaparate__indice button:hover, .escaparate__indice button[aria-current="true"] { color: var(--tinta); }
.escaparate__indice i { position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--oro); transition: width 0.7s var(--lujo); }
.escaparate__indice button[aria-current="true"] i { width: 100%; }
.escaparate__num { display: block; font-family: var(--sans); font-size: 0.65rem; letter-spacing: 0.18em; }
.escaparate__nombre { display: block; margin-top: 0.3rem; font-family: var(--sans); font-size: 0.85rem; }

@media (max-width: 760px) {
  /* En el móvil, la pieza manda: casi todo el ancho, y se cambia deslizando. */
  /* Omar, 02-10: «en Cordes Sélections en el móvil no parece que haya que
     desplazar». Ahora la pieza deja sitio para que asomen las de los lados,
     hay flechas pequeñas y un «Desliza» hasta que se usa. */
  .escenario { --ancho: 66vw; --paso: 54vw; --alto: 52vw; }
  .escenario--vial { --alto: 112vw; --ancho: calc(var(--alto) * 0.19); --paso: 40vw; }
  .flecha-escaparate { top: auto; bottom: 0.4rem; transform: none; width: 2.4rem; height: 2.4rem; font-size: 0.9rem; background: rgba(13, 11, 9, 0.55); }
  .flecha-escaparate--izq { left: 0.6rem; }
  .flecha-escaparate--der { right: 0.6rem; }
  .escaparate__indice { grid-auto-flow: column; grid-auto-columns: 42%; overflow-x: auto; grid-template-columns: none; scrollbar-width: none; }
  .escaparate__cabeza { top: -2.2rem; }
}

/* El aviso de deslizar (escaparate.js): solo en pantallas táctiles, hasta que
   se usa el escaparate una vez. */
.escaparate__desliza {
  position: absolute; left: 50%; bottom: 0.9rem; z-index: 31; margin: 0; transform: translateX(-50%);
  display: none; align-items: center; gap: 0.6rem; pointer-events: none;
  font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--tinta);
  transition: opacity 0.5s ease;
}
.escaparate__desliza i { display: block; width: 1.6rem; height: 1px; background: var(--oro); animation: desliza 1.8s ease-in-out infinite; }
.escaparate__desliza i:first-child { animation-direction: reverse; }
@keyframes desliza { 0%, 100% { transform: translateX(-0.35rem); opacity: 0.4; } 50% { transform: translateX(0.35rem); opacity: 1; } }
@media (hover: none) and (pointer: coarse) { .escaparate__desliza { display: flex; } }
.escaparate--usado .escaparate__desliza { opacity: 0; }

/* ---------- la foto que vuela de la tarjeta a la ficha -------------------
   View Transitions entre páginas (Chrome y Safari recientes): la foto que se
   pulsa y la primera de la ficha comparten nombre (lo pone ficha.js y
   carta.js / escaparate.js justo al navegar). Donde no hay soporte, se
   cambia de página como siempre. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: salir-pagina 0.25s var(--lujo) both; }
::view-transition-new(root) { animation: entrar-pagina 0.5s var(--lujo) 0.05s both; }
::view-transition-group(foto) { animation-duration: 0.6s; animation-timing-function: var(--lujo); }
@keyframes salir-pagina { to { opacity: 0; } }
@keyframes entrar-pagina { from { opacity: 0; transform: translateY(14px); } }

@media (prefers-reduced-motion: reduce) {
  [data-revelar][data-oculto] { opacity: 1; }
  .entrada, .aparece, [data-revelar][data-visto], .palabra-fondo, .pieza--centro .giro { animation: none !important; }
  .pieza, .giro { transition: none; }
  @view-transition { navigation: none; }
}