/**
 * La entrada del home.
 *
 * Reemplaza a la cortina de la moto. La diferencia de fondo: la cortina hacía
 * esperar, esto ocurre después de que el navegador ya pintó. No retrasa nada.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * POR QUÉ NO HAY UN SOLO `opacity` ACÁ
 * ─────────────────────────────────────────────────────────────────────────
 * Un fade se ve mejor. Pero Chrome NO cuenta como pintado un elemento en
 * `opacity: 0`, así que animar la opacidad del contenido principal le suma la
 * duración completa de la animación al LCP — la métrica que vinimos a
 * arreglar. Un fade de 400 ms serían 400 ms de regalo al problema.
 *
 * `transform` no tiene ese efecto: el elemento está pintado desde el primer
 * frame, sólo que desplazado. Corre en el compositor, no toca el layout (así
 * que tampoco genera CLS) y el navegador lo resuelve fuera del hilo principal.
 *
 * Por eso el movimiento es sólo desplazamiento. Es más sobrio que un fade, y
 * es la única versión que no se pega un tiro en el pie.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * QUÉ SE MUEVE Y QUÉ NO
 * ─────────────────────────────────────────────────────────────────────────
 * El hero (.header-widget-region) NO se toca. Es el elemento más grande de la
 * primera pantalla, o sea el candidato a marcar el LCP. Tiene que aparecer en
 * el primer frame posible y quedarse quieto. Ésa es toda la idea.
 *
 * Se mueven las secciones de abajo, escalonadas, y todo termina antes de los
 * 520 ms.
 */

/* El escalonado: cada sección entra un pelo después que la anterior.
   Sólo las primeras seis — más abajo ya nadie está mirando en el primer
   segundo, y animar de más es trabajo que el navegador hace para nada. */
.pp-entrada #content.site-content > *:nth-child(-n + 6) {
    animation: pp-entrada-subir 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
    /* Le avisamos al navegador qué va a cambiar para que lo suba a su propia
       capa antes de empezar, en vez de descubrirlo a mitad de la animación. */
    will-change: transform;
}

.pp-entrada #content.site-content > *:nth-child(1) { animation-delay: 0ms; }
.pp-entrada #content.site-content > *:nth-child(2) { animation-delay: 60ms; }
.pp-entrada #content.site-content > *:nth-child(3) { animation-delay: 120ms; }
.pp-entrada #content.site-content > *:nth-child(4) { animation-delay: 180ms; }
.pp-entrada #content.site-content > *:nth-child(5) { animation-delay: 240ms; }
.pp-entrada #content.site-content > *:nth-child(6) { animation-delay: 300ms; }

@keyframes pp-entrada-subir {
    from { transform: translate3d(0, 14px, 0); }
    to   { transform: translate3d(0, 0, 0); }
}

/* Terminada la animación, soltamos la capa: mantenerla reservada le cuesta
   memoria al navegador y ya no sirve de nada. */
.pp-entrada #content.site-content > * {
    will-change: auto;
}

/**
 * Movimiento reducido.
 *
 * Quien pidió menos animaciones en su sistema operativo no las recibe. Esto
 * no es un detalle de cortesía: es un criterio de la auditoría de
 * accesibilidad, y para varias personas el movimiento en pantalla es
 * literalmente mareo.
 */
@media (prefers-reduced-motion: reduce) {
    .pp-entrada #content.site-content > *:nth-child(-n + 6) {
        animation: none;
    }
}