/* Making the page feel alive (2026-10-22). See alive.js. */

/* A1: a new row slides in at the top of the app window's "Recently" list; the oldest one slides out */
.alive-new { animation: alive-in .55s cubic-bezier(.16,1,.3,1) both, alive-wash 1.6s ease .1s both; }
@keyframes alive-in { from { opacity: 0; transform: translateY(-10px); max-height: 0; } to { opacity: 1; transform: none; max-height: 60px; } }
@keyframes alive-wash { from { background: rgba(255,255,255,.07); } to { background: transparent; } }
.alive-out { animation: alive-out .4s ease forwards; }
@keyframes alive-out { to { opacity: 0; transform: translateY(8px); } }

/* A2: the teams console: online dots breathe; a PC that checks in flashes softly */
.s-teams .tm-grid em.ok::before { animation: alive-breathe 2.4s ease-in-out infinite; }
@keyframes alive-breathe { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(90,200,160,0); background: #5AC8A0; } 50% { opacity: .55; box-shadow: 0 0 0 3px rgba(90,200,160,.15); background: #5AC8A0; } }
.s-teams .tm-grid .alive-ping { animation: alive-ping 1.4s ease; }
@keyframes alive-ping { 0% { border-color: rgba(237,237,232,.45); background: #151517; } 100% { border-color: #252422; background: #0f0f10; } }
.s-teams .tm-grid .flag.alive-ping { animation-name: alive-ping-red; }
@keyframes alive-ping-red { 0% { background: rgba(232,40,63,.14); } 100% { background: #0f0f10; } }

/* B: the news strip under the problem section */
.nw-strip { display: block; margin-top: 56px; overflow: hidden; border-top: 1px solid rgba(237,237,232,.10); border-bottom: 1px solid rgba(237,237,232,.10);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.nw-track { display: flex; width: max-content; animation: nw-scroll 70s linear infinite; }
.nw-strip:hover .nw-track { animation-play-state: paused; }
.nw-track span { display: inline-flex; align-items: center; gap: 12px; padding: 16px 28px; white-space: nowrap; font-size: 15px; color: rgba(237,237,232,.72); }
.nw-track span b { font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: .06em; color: rgba(237,237,232,.42); }
.nw-track span::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #e8283f; margin-left: 28px; box-shadow: 0 0 6px rgba(232,40,63,.6); }
.nw-strip:hover span { color: #edede8; }
@keyframes nw-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .nw-track { animation: none; } }

/* C1: headings rise in word by word when their section arrives (.up gets .in from proof.js) */
html.js .s2head h2.up.words { opacity: 1; transform: none; }
.s2head h2.words .w { display: inline-block; font-style: inherit; opacity: 0; transform: translateY(.45em); filter: blur(4px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1), filter .7s ease; }
.s2head h2.words.in .w { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) { .s2head h2.words .w { opacity: 1; transform: none; filter: none; transition: none; } }

/* C2: the side-by-side table lights up row by row */
.alive-rows .s4row:not(.s4head) { opacity: .2; transform: translateX(-8px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.alive-rows .s4row.lit { opacity: 1; transform: none; }