/* Longevity List motion. Every animation and transition lives here and nowhere else. Rules: MOTION.md. */

/* the home sky: the only thing that moves (ruling 10, narrowed by ruling 11) */
.lx-flow { position: absolute; top: 0; left: 0; width: 200%; height: 100%; background-repeat: repeat-x; background-size: 50% 100%; pointer-events: none; will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .scene[data-flow] .lx-drift { animation: lx-drift var(--flow-sun) ease-in-out infinite alternate; }
  .scene[data-flow] .lx-slow { animation-duration: var(--flow-sun-slow); animation-direction: alternate-reverse; }
  @keyframes lx-drift { from { transform: translateX(-4%); } to { transform: translateX(4%); } }
  .scene[data-flow] .lx-flow { animation: lx-flow var(--flow-cloud) linear infinite; }
  @keyframes lx-flow { to { transform: translateX(calc(-1 * var(--tw, 50%))); } }
}

/* feedback: approved by Si 20 Oct 2026 ("go with your recommenadations"). MOTION.md section 3 */
/* M1 hover eases */
.btn,
.header nav a,
.cell .links a,
.faq summary,
.details summary,
.mrow summary .n,
.toggle,
.footer a { transition: color var(--dur-hover) ease, background-color var(--dur-hover) ease, box-shadow var(--dur-hover) ease; }
/* M2 an answer fades in */
@media (prefers-reduced-motion: no-preference) {
  .faq details[open] .a, .details details[open] .body-in, .mrow[open] .more { animation: lx-fade var(--dur-hover) ease; }
  @keyframes lx-fade { from { opacity: 0; } to { opacity: 1; } }
}
/* comparison page: a filtered price dot fades (21 Oct, follows M1) */
.strip i, .dist-plot > i { transition: opacity var(--dur-hover) ease; }
/* M3 focus ring (instant) */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.search input:focus-visible { outline: none; }