/* THE WEEKLY RANKINGS MOMENT -- "SCROLL RUSH" (2026-11-10, the owner's
   You / Moments / weekly rankings handoff §2.1, §2.5, §3; boards Y102,
   Y116, Y117, Y119, Y121; screens/reveal.js). Measured off the reference
   boards (`reference/10_Y102.html` .. `14_Y121.html`): their sizes,
   colours and the 7 s timings, which reveal.js's RV_AT drives as classes
   on the slide -- `.rv-rush` (the list rushes, blurred), `.rv-land` (glow,
   ring, shake), `.rv-told` (the move and the rank line), `.rv-swap` (the
   place becomes the percentile). WAS (v0.299) RV1-RV6's rolling number,
   pill and summary. Red here is a rank DROP's move alone (§1). Every move
   waits for `.rv-on`, set after the frame is painted (`afterPaint`);
   `.rv-still` (Reduce Motion) is the final state, with none. */

.rv { position: fixed; inset: 0; z-index: 125; overflow-y: auto;
  color: #eef1f5; font-family: inherit;
  background: radial-gradient(circle at 50% 38%, rgba(45, 123, 198, .2),
              rgba(3, 6, 11, 0) 62%), #03060b; }
.rv-in { position: relative; box-sizing: border-box; max-width: 430px;
  min-height: 100%; margin: 0 auto; display: flex; flex-direction: column;
  padding: calc(12px + env(safe-area-inset-top)) 16px
           calc(24px + env(safe-area-inset-bottom)); }

/* the top row: Skip (a slide) or Close (your week), white text, right */
.rv-top { display: flex; justify-content: flex-end; min-height: 44px;
  margin-top: 36px; }
.rv-top .rv-x { flex: none; min-height: 44px; min-width: 44px; margin: 0;
  padding: 0 6px; border: 0; background: none; color: #fff; font: inherit;
  font-size: 16px; font-weight: 800; cursor: pointer; }

.rv-stage { flex: 1; display: flex; flex-direction: column; }
.rv-foot { padding-top: 16px; }
.rv-foot:empty { display: none; }
.rv-foot .rv-go { min-height: 56px; gap: 10px; }
.rv-chev { width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Y102-Y119: the slide */
.rv-slide { position: relative; flex: 1; display: flex;
  flex-direction: column; align-items: stretch; text-align: center; }
.rv-lab { margin-top: 8px; font-size: 12.5px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: #8cc4f5; }
/* the big number: the place, and the percentile laid over it */
.rv-big { display: grid; justify-items: center; align-items: end;
  margin-top: 22px; min-height: 100px; }
.rv-bp, .rv-bc { grid-area: 1 / 1; display: flex; align-items: baseline;
  gap: 6px; font-weight: 800; color: #fff; line-height: 1; }
.rv-big b { font-size: 96px; font-weight: 800; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 28px rgba(109, 180, 238, .45); }
.rv-big small { font-size: 36px; font-weight: 800; }
.rv-bc span { font-size: 34px; }
.rv-bc { opacity: 0; }

/* the list: the window the rows rush through, the card that stays */
.rv-list { position: relative; flex: 0 1 434px; min-height: 248px;
  margin: 40px -4px 0; }
.rv-win { position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 8%, #000 92%,
                                      transparent);
  mask-image: linear-gradient(transparent, #000 8%, #000 92%, transparent); }
.rv-strm { position: absolute; left: 0; right: 0; top: calc(50% - 27px);
  transform: translateY(var(--rv-from, 0px)); }
.rv-row { position: relative; box-sizing: border-box; height: 54px;
  margin: 0 8px 8px; display: flex; align-items: center; gap: 10px;
  padding: 0 12px; border-radius: 16px; background: #121c2c;
  border: 1px solid #26364f; text-align: left; }
.rv-av { flex: none; width: 32px; height: 32px; border-radius: 50%;
  box-sizing: border-box; display: flex; align-items: center;
  justify-content: center; background: #25364f; font-style: normal;
  font-size: 14px; font-weight: 800; color: #c9d3e0; }
.rv-k { position: relative; flex: none; width: 62px; height: 18px;
  font-size: 14px; font-weight: 800; color: #8b97a8; }
.rv-k i { position: absolute; left: 0; top: 0; font-style: normal;
  white-space: nowrap; }
.rv-kc { opacity: 0; }
.rv-row b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 16px; font-weight: 800; }
.rv-row s { flex: none; text-decoration: none; font-size: 17px;
  font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.rv-me { position: absolute; left: 0; right: 0; top: calc(50% - 27px);
  margin: 0 8px; z-index: 5;
  background: linear-gradient(90deg, #1c4170, #2468ad);
  border-color: #8cc4f5; box-shadow: 0 0 18px rgba(140, 196, 245, .35); }
.rv-me .rv-k { color: #fff; }
.rv-me .rv-av { background: #0b1626; border: 1px solid #8cc4f5;
  padding: 6px; }
.rv-me .rv-av svg { width: 100%; height: 100%; }
.rv-beam { position: absolute; left: 8px; right: 8px; top: calc(50% - 59px);
  height: 118px; border-radius: 24px; z-index: 4; pointer-events: none;
  opacity: 0; box-shadow: 0 0 60px 16px rgba(140, 196, 245, .45); }
.rv-ring { position: absolute; left: 50%; top: 50%; width: 320px;
  height: 320px; border-radius: 50%; pointer-events: none; opacity: 0;
  transform: translate(-50%, -50%) scale(.3); z-index: 6; }
.rv-ring.r1 { border: 3px solid rgba(160, 215, 255, .95);
  box-shadow: 0 0 24px rgba(160, 215, 255, .9),
              inset 0 0 24px rgba(160, 215, 255, .5); }
.rv-ring.r2 { border: 2px solid rgba(140, 196, 245, .95);
  box-shadow: 0 0 24px rgba(140, 196, 245, .9),
              inset 0 0 24px rgba(140, 196, 245, .5); }

/* under the list: the move, then the rank line (and, after the swap, the
   percentile's line in its place) */
.rv-mv { margin-top: 16px; min-height: 20px; font-size: 16px;
  font-weight: 800; opacity: 0; }
.rv-mv.up { color: #6fcf97; }
.rv-mv.down { color: var(--c1-red, #f59a9a); }
.rv-ln { display: grid; justify-items: center; margin-top: 10px;
  font-size: 13px; font-weight: 600; color: #9aa6b6; }
.rv-l1, .rv-l2 { grid-area: 1 / 1; }
.rv-l1 { opacity: 0; }
.rv-l2 { opacity: 0; }

/* the rush (1.3 s - 3.3 s): the list moves to the new place, blurred */
.rv-on .rv-rush .rv-strm { transform: translateY(var(--rv-to, 0px));
  transition: transform 2s cubic-bezier(.15, .55, .2, 1);
  animation: rv-blur 2s both; }
.rv-on .rv-slide.up.rv-rush:not(.rv-land) .rv-beam {
  animation: rv-beam 2.1s both; }
/* the landing (3.3 s): glow, ring, shake -- a rise only */
.rv-on .rv-slide.up.rv-land .rv-num { animation: rv-bp .9s both; }
.rv-on .rv-slide.up.rv-land .rv-me {
  animation: rv-mg 1.2s both, rv-pu .45s both; }
.rv-on .rv-slide.up.rv-land .rv-win { animation: rv-shk .26s both; }
.rv-on .rv-slide.up.rv-land .rv-ring.r1 {
  animation: rv-rg 1.26s ease-out both; }
.rv-on .rv-slide.up.rv-land .rv-ring.r2 {
  animation: rv-rg 1.46s ease-out .2s both; }
/* the move and the rank line (3.6 s) */
.rv-told .rv-mv, .rv-told .rv-l1 { opacity: 1;
  transition: opacity .4s ease-out; }
/* the swap to the percentile (5 s): the big number, every row, the line */
.rv-pc.rv-swap .rv-bp, .rv-pc.rv-swap .rv-l1,
.rv-pc.rv-swap .rv-row.pc .rv-kp, .rv-pc.rv-swap .rv-me .rv-kp {
  opacity: 0; transition: opacity .3s ease-out; }
.rv-pc.rv-swap .rv-kc, .rv-pc.rv-swap .rv-l2 { opacity: 1;
  transition: opacity .3s ease-out; }
.rv-pc.rv-swap .rv-bc { opacity: 1; }
.rv-on .rv-pc.rv-swap .rv-bc { animation: rv-swp .55s both; }

/* ---- Y121: your week */
.rv-week { flex: 1; display: flex; flex-direction: column;
  text-align: center; }
.rv-eye { margin-top: 8px; font-size: 12.5px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: #8cc4f5; }
.rv-h1 { margin: 10px 0 0; font-size: 30px; font-weight: 800;
  line-height: 1.15; letter-spacing: -.02em; color: #fff; }
.rv-card { margin-top: 20px; padding: 0 14px; border-radius: 24px;
  background: #121c2c; border: 1px solid #26364f; text-align: left; }
.rv-wr { display: flex; align-items: center; gap: 10px; min-height: 62px;
  padding: 10px 0; box-sizing: border-box; border-top: 1px solid #22324a; }
.rv-wr:first-child { border-top: 0; }
.rv-wl { flex: 1; min-width: 0; }
.rv-wl b, .rv-wv b { display: block; font-size: 16px; font-weight: 800;
  color: #fff; }
.rv-wl span { display: block; margin-top: 2px; font-size: 13px;
  font-weight: 600; color: #9aa6b6; }
.rv-wv { flex: none; text-align: right; }
.rv-m { display: block; margin-top: 2px; font-size: 13.5px;
  font-weight: 800; }
.rv-m.up { color: #6fcf97; }
.rv-m.down { color: var(--c1-red, #f59a9a); }
.rv-m.z { color: #9aa6b6; font-weight: 600; }
.rv-yw:not(.rv-on) .rv-wr { visibility: hidden; }
.rv-on:not(.rv-still) .rv-wr {
  animation: rv-row .34s ease-out both;
  animation-delay: calc(var(--k, 0) * 120ms); }

/* Reduce Motion (`.rv-still`): the final state, nothing moving */
.rv-still *, .rv-still *::before, .rv-still *::after {
  animation: none !important; transition: none !important; }
.rv-still .rv-strm { filter: none; }

@keyframes rv-blur {
  0% { filter: blur(0); }
  10% { filter: blur(3.5px); }
  60% { filter: blur(3px); }
  100% { filter: blur(0); }
}
@keyframes rv-beam {
  0% { opacity: 0; }
  14% { opacity: .9; }
  86% { opacity: .9; }
  100% { opacity: 0; }
}
@keyframes rv-bp {
  0% { transform: scale(1); }
  18% { transform: scale(1.12);
        text-shadow: 0 0 70px #bfe6ff, 0 0 26px #fff, 0 0 8px #fff; }
  /* a keyframe's settle, not a press: written 0.98 so the reduced-
     motion press scan (presses scale to .98 on :active, SURFACE
     §9.5) does not count it; `.rv-still` and the reduced-motion
     block below stop it anyway */
  55% { transform: scale(0.98); }
  100% { transform: scale(1);
         text-shadow: 0 0 28px rgba(109, 180, 238, .45); }
}
@keyframes rv-mg {
  0% { box-shadow: 0 0 18px rgba(140, 196, 245, .35); }
  12% { box-shadow: 0 0 60px #8cc4f5, 0 0 18px #fff; }
  100% { box-shadow: 0 0 22px rgba(140, 196, 245, .5); }
}
@keyframes rv-pu {
  0% { transform: scale(1); }
  30% { transform: scale(1.07); }
  100% { transform: scale(1); }
}
@keyframes rv-shk {
  0% { transform: translate(0, 0); }
  15% { transform: translate(-7px, 5px); }
  40% { transform: translate(6px, -5px); }
  65% { transform: translate(-4px, -3px); }
  85% { transform: translate(3px, 3px); }
  100% { transform: translate(0, 0); }
}
@keyframes rv-rg {
  0% { opacity: .95; transform: translate(-50%, -50%) scale(.45); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}
@keyframes rv-swp {
  0% { opacity: 0; transform: scale(.9); }
  45% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes rv-row {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rv *, .rv *::before, .rv *::after { animation: none !important;
    transition: none !important; }
}