/* PAES Ultra · Ánimo (app/animo.js): la espera con foto y frase.
   Tratamiento de foto idéntico al de la portada —recorte apretado, desaturado, oscurecido y velo bajo el
   texto— porque es lo que evita que una imagen de banco se reconozca como imagen de banco. Solo tokens. */

.animo {
  position: relative;
  overflow: hidden;
  display: grid;
  min-height: 210px;
  margin: 8px 0 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  isolation: isolate;
}

.animo-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.5) contrast(1.06) brightness(.78);
  z-index: 0;
  animation: animo-acerca 14s var(--ease-out) both;
}
/* Velo: el texto va sobre foto, así que necesita su propio fondo, no solo contraste de suerte. */
.animo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 0%, var(--foto-velo) 62%, var(--foto-velo) 100%);
}

.animo-cuerpo {
  position: relative;
  z-index: 2;
  align-self: end;
  display: grid;
  gap: 8px;
  padding: 22px 24px 20px;
}
.animo-etq {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--foto-etq);
}
.animo-frase {
  margin: 0;
  max-width: 46ch;
  font-family: var(--read);
  font-size: 19px;
  line-height: 1.35;
  color: var(--foto-ink);
  text-wrap: balance;
  animation: animo-entra var(--dur-3) var(--ease-out) both;
}
.animo-que {
  font-size: 12.5px;
  color: var(--foto-ink-2);
}

/* Barra indeterminada: dice "esto se está cargando" sin fingir que sabe cuánto falta. */
.animo-barra {
  position: relative;
  overflow: hidden;
  height: 3px;
  margin-top: 4px;
  border-radius: var(--pill);
  background: color-mix(in srgb, var(--foto-ink) 22%, transparent);
}
.animo-barra i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 38%;
  border-radius: var(--pill);
  background: var(--foto-ink);
  animation: animo-corre 1.25s var(--ease) infinite;
}

/* Estado vacío: sin foto ni barra, porque no se está esperando nada. */
.animo--vacio {
  min-height: 0;
  background: var(--surface-2);
  border-style: dashed;
}
.animo--vacio::after { content: none; }
.animo--vacio .animo-etq { color: var(--ink-3); }
.animo--vacio .animo-frase { font-size: 16px; color: var(--ink); }
.animo--vacio .animo-que { color: var(--ink-2); }

.animo--compacto { min-height: 150px; }
.animo--compacto .animo-frase { font-size: 16.5px; }
.animo--compacto .animo-cuerpo { padding: 16px 18px 15px; }

/* La frase bajo el botón de la portada instantánea, mientras bajan los bancos. */
.animo-hero {
  display: grid;
  gap: 4px;
  margin-top: 16px;
  max-width: 44ch;
  animation: animo-entra 700ms var(--ease-out) 240ms both;
}
.animo-hero p {
  margin: 0;
  font-family: var(--read);
  font-size: 16px;
  line-height: 1.4;
  color: var(--foto-ink-2);
}
.animo-hero .animo-etq { color: var(--foto-etq); }

@keyframes animo-entra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes animo-corre {
  0%   { left: -40%; }
  100% { left: 100%; }
}
/* Un acercamiento de un 4 % en catorce segundos: se percibe como que la imagen está viva, no como
   movimiento. Más que eso marea en una espera. */
@keyframes animo-acerca {
  from { transform: scale(1); }
  to   { transform: scale(1.04); }
}

@media (max-width: 560px) {
  .animo { min-height: 180px; }
  .animo-frase { font-size: 17px; }
  .animo-cuerpo { padding: 18px 16px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .animo-foto, .animo-frase, .animo-hero { animation: none; }
  .animo-barra i { animation: none; width: 100%; opacity: .5; }
}