/* ==========================================================================
   Frase con scroll — letras gigantes rellenas con fotos del huerto
   (ver js/statement.js)
   ========================================================================== */

.statement {
  position: relative;
  overflow: hidden;
  overflow: clip;
  padding-block: clamp(40px, 8vw, 112px);
}

.statement__text {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(4.5rem, 20vw, 15rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-align: center;
}

.statement__line { display: block; }
.statement__line + .statement__line { margin-top: 0.02em; }

/* Las letras llevan la foto con un velo blanco encima: se leen claras y
   completas aunque la foto tenga zonas oscuras. */
.statement__fill {
  --bg-y: 50%;
  --img: none;
  --wash: linear-gradient(rgba(244, 247, 245, 0.45), rgba(244, 247, 245, 0.45));
  display: inline-block;
  padding: 0.04em 0.12em 0.1em;
  font-weight: 600;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-color: var(--text);          /* si la foto no carga: letras perla */
  background-image: var(--wash), var(--img);
  background-repeat: no-repeat;
  background-size: 100% 100%, cover;
  background-position: 0 0, 50% var(--bg-y);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1px rgba(244, 247, 245, 0.45);
}
/* Segunda línea en itálica, como el apellido en el nombre. */
.statement__line:nth-child(even) .statement__fill { font-weight: 400; font-style: italic; }

/* Con movimiento: una sola línea por fila, desplazada por JS. */
.statement.is-live .statement__text { text-align: left; }
.statement.is-live .statement__fill { white-space: nowrap; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .statement__text { font-size: clamp(3rem, 12vw, 9rem); }
}