/* THE RATING RISES (2026-11-10, TRACK B of the owner's You/Moments
   handoff v1 -- §2.2-2.4, §3, boards Y63-Y70 and Y122; screens/rise.js).
   Y63's reference read for the timings, sizes and colours, built in the
   app's own way: every move a CSS animation started by a class once the
   frame is painted (`.go`), the beats rise.js's `RZ_MS`. A quality's
   colours are set on its frame by rise.js (`--qc`, its bar's `--g0` /
   `--g1`, its glows `--qa*`) from the qualities' one owner (kernel.js
   `T_QUALITIES`); the T rating's are Y122's, below (`.k-t`). */

.rz { position: fixed; inset: 0; z-index: 126; overflow: hidden;
  color: var(--ink); font-family: inherit;
  -webkit-tap-highlight-color: transparent; }
/* black (Y63: #03060b); the T rating's frame: the You screen dimmed to
   almost black under it (Y122), then gone 2.2 s to 3.2 s */
.rz-bg { position: absolute; inset: 0; background: #03060b; }
.rz.tmode .rz-bg { background: rgba(3, 6, 11, .96); }
.rz.fade .rz-bg { opacity: 0; transition: opacity 1s linear; }
.rz.fade .rz-ring { opacity: 0; transition: opacity .5s linear .5s; }

/* Skip, then Close (top right, white text) */
.rz-skip, .rz-close { position: absolute; z-index: 9;
  top: calc(4px + env(safe-area-inset-top, 0px)); right: 8px;
  min-height: 44px; padding: 0 14px; display: flex; align-items: center;
  background: none; border: 0; color: #fff; font: inherit; font-size: 16px;
  font-weight: 800; transition: opacity .6s ease; }
.rz-close { opacity: 0; pointer-events: none; }
.rz.landed .rz-skip { opacity: 0; pointer-events: none; }
.rz.landed .rz-close { opacity: 1; pointer-events: auto; }
.rz.tmode .rz-skip, .rz.tmode .rz-close { display: none; }

/* the frame: the ring at the boards' place (190 px down a 844 board) */
.rz-stage { position: absolute; left: 0; right: 0; z-index: 7;
  top: calc(env(safe-area-inset-top, 0px) + clamp(56px, 18vh, 157px)); }
.rz-slide { --qc: var(--accent-soft); --qa9: rgba(160, 215, 255, .95);
  --qa8: rgba(160, 215, 255, .8); --qa4: rgba(120, 190, 245, .36);
  --qa2: rgba(45, 123, 198, .18); --qa0: rgba(45, 123, 198, 0); }
/* Y122's T rating: its bar #0e3763 -> #1d78c8 -> #00aeef (the logo's
   blue, as the board draws it), its glows the boards' light blue */
.rz-slide.k-t { --qc: #00aeef; --g0: #0e3763; --g1: #1d78c8; }
.rz-ring { position: relative; width: 322px; height: 322px; margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, var(--qa2), var(--qa0) 62%); }
/* Y122: the T ring where You's card draws its own -- the frame's stage
   at the screen's top-left, so the ring's place is the card's rect
   (absolute, not fixed: the shake's transform holds it) */
.rz.tat .rz-stage { top: 0; }
.rz-slide.at .rz-ring { position: absolute; margin: 0; transform-origin: 0 0; }
.rz-ring > svg { position: absolute; left: 0; top: 0; width: 322px;
  height: 322px; overflow: visible; }

.rz-track { fill: none; stroke: #243652; stroke-width: 24;
  stroke-linecap: round; }
.rz-arc { fill: none; stroke-width: 24; stroke-linecap: round;
  stroke-dasharray: 0 2000; opacity: 0;
  filter: drop-shadow(0 0 7px var(--qa8)); }
.rz-g0 { stop-color: var(--g0, #0e3763); }
.rz-g1 { stop-color: var(--g1, #1d78c8); }
.rz-g2 { stop-color: var(--qc); }
.rz-t0 { stop-color: #2d7bc6; stop-opacity: 0; }
.rz-t1 { stop-color: #8cc4f5; stop-opacity: .8; }
.rz-t2 { stop-color: #fff; }
.rz-f0 { stop-color: #fff; }
.rz-f1 { stop-color: #bfe0fb; stop-opacity: .95; }
.rz-f2 { stop-color: #2d7bc6; stop-opacity: .5; }
.rz-f3 { stop-color: #2d7bc6; stop-opacity: 0; }
.rz-i0 { stop-color: #e6f1fc; }
.rz-i1 { stop-color: #c0d9f1; }
.rz-s0 { font-size: 12.5px; font-weight: 700; fill: #8f9bad;
  text-anchor: middle; }

/* the comet: its tail, its flare and the X ball, riding the bar */
.rz-hd { transform-box: view-box; transform-origin: 150px 150px;
  transform: rotate(30deg); opacity: 0; }
.rz-tl { fill: none; stroke-linecap: round; stroke-width: 20; }
.rz-tl.rz-tw { stroke: #2d7bc6; stroke-opacity: .6; stroke-width: 38;
  filter: blur(4px); }
.rz-tl.rz-tn { stroke-width: 6; }
.rz-fl, .rz-ball { transform-box: fill-box; transform-origin: center; }
.rz-up { transform-box: fill-box; transform-origin: center;
  transform: rotate(-30deg); }
.rz-bc { stroke: #2d7bc6; stroke-width: 5; }
.rz-xd { fill: #0b0f14; }
.rz-xb { fill: #00aeef; }
.rz-xw { fill: #eaf4ff; }

/* the eyebrow (the quality's name in its colour) and the number */
.rz-c { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; }
.rz-e { font-size: 12.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--qc); }
.rz-slide.k-t .rz-e { color: var(--accent-soft); }
.rz-n { margin-top: 2px; display: flex; align-items: baseline;
  justify-content: center; font-size: 112px; font-weight: 800;
  letter-spacing: -.05em; line-height: 1; color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 28px rgba(109, 180, 238, .45); }
.rz-n small { font-size: 58px; letter-spacing: -.02em; }

/* the X at the bar's end, its bloom and its two rings */
.rz-x { position: absolute; width: 190px; height: 237px; z-index: 8;
  pointer-events: none; opacity: 0; filter: drop-shadow(0 0 10px var(--qa9)); }
.rz-x svg { width: 100%; height: 100%; overflow: visible; }
.rz-sh { transform-box: view-box; }
.rz-bl { position: absolute; width: 1000px; height: 1000px; z-index: 8;
  pointer-events: none; opacity: 0; border-radius: 50%;
  mix-blend-mode: screen;
  background: radial-gradient(circle, #fff 0, rgba(255, 255, 255, .9) 5%,
    var(--qa8) 16%, var(--qa4) 36%, var(--qa0) 62%); }
.rz-r1, .rz-r2 { position: absolute; width: 220px; height: 220px; z-index: 8;
  box-sizing: border-box; pointer-events: none; opacity: 0;
  border-radius: 50%; border: 4px solid rgba(255, 255, 244, .95);
  box-shadow: 0 0 24px var(--qa9), inset 0 0 24px var(--qa4);
  transform: scale(.45); }
.rz-r2 { border-width: 2px; }

/* the move line (you.js `youMoveLine`, TRACK A's) under the ring */
.rz-move { position: relative; z-index: 7; margin: 8px 16px 0;
  min-height: 44px; text-align: center; opacity: 0; }

/* Open stats, pinned at the bottom: the screen's one blue button */
.rz-foot { position: absolute; left: 16px; right: 16px; z-index: 9;
  bottom: calc(36px + env(safe-area-inset-bottom, 0px)); opacity: 0;
  pointer-events: none; transition: opacity .6s ease; }
.rz.on .rz-foot { opacity: 1; pointer-events: auto; }
.rz-open { display: flex; align-items: center; justify-content: center;
  gap: 8px; width: 100%; height: 56px; border: 0; border-radius: 18px;
  font: inherit; font-size: 17px; font-weight: 800; color: #fff;
  background: linear-gradient(160deg, #2a7ccb, #1d62ad 55%, #134a8a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3),
              0 10px 28px rgba(33, 150, 243, .35); }
.rz-open svg { width: 18px; height: 18px; fill: none; stroke: #fff;
  stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── THE MOVES, from the frame's start (`.go`, after its first paint) */
.go .rz-arc { animation: rz-arc 1.91s cubic-bezier(.22, .61, .36, 1) .22s both; }
.go .rz-hd { animation: rz-hd 1.85s cubic-bezier(.22, .61, .36, 1) .22s both,
  rz-out .33s linear 2.07s forwards; }
.go .rz-up { animation: rz-up 1.85s cubic-bezier(.22, .61, .36, 1) .22s both; }
.go .rz-tl { animation: rz-tail 1.85s linear .22s both; }
.go .rz-fl { animation: rz-flare .4s ease-out 1.98s both; }
.go .rz-ball { animation: rz-pop .2s ease-out 2.02s both; }
.go .rz-x { animation: rz-x .24s cubic-bezier(.5, 0, .9, .4) 1.89s both; }
.go .rz-sh { animation: rz-sh 1s cubic-bezier(.1, .8, .25, 1) 2.13s both; }
.go .rz-bl { animation: rz-bloom .78s linear 2.1s both; }
.go .rz-r1 { animation: rz-r1 1.1s ease-out 2.13s both; }
.go .rz-r2 { animation: rz-r2 1.23s ease-out 2.25s both; }
.go .rz-fx { animation: rz-shake .25s linear 2.13s both; }
.go .rz-c { animation: rz-num .83s ease-out 2.1s both; }
.go .rz-n { animation: rz-glow 1.28s ease-out 2.1s both; }
.go .rz-move { animation: rz-in .67s ease-out 1.68s both; }

/* the final state, at once (Reduce Motion, or no moves) */
.rz-slide.still .rz-arc { stroke-dasharray: var(--len) 2000; opacity: 1; }
.rz-slide.still .rz-move { opacity: 1; }

@keyframes rz-arc {
  0% { stroke-dasharray: 0 2000; opacity: 0; }
  2% { opacity: 1; }
  100% { stroke-dasharray: var(--len) 2000; opacity: 1; }
}
@keyframes rz-hd {
  0% { transform: rotate(30deg); opacity: 0; }
  3% { opacity: 1; }
  100% { transform: rotate(var(--rot)); opacity: 1; }
}
@keyframes rz-up {
  0% { transform: rotate(-30deg); }
  100% { transform: rotate(calc(var(--rot) * -1)); }
}
@keyframes rz-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes rz-tail { from { opacity: 1; } to { opacity: .35; } }
@keyframes rz-flare {
  0% { transform: scale(1); }
  50% { transform: scale(2.6); }
  100% { transform: scale(1); }
}
@keyframes rz-pop {
  0% { transform: scale(1); opacity: 1; }
  40% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1.9); opacity: 0; }
}
/* the X swells (Y63: 1.89 s to 2.13 s) ... */
@keyframes rz-x {
  0% { opacity: 0; transform: scale(.2); }
  12% { opacity: 1; transform: scale(.24); }
  100% { opacity: 1; transform: scale(1); }
}
/* ... and bursts into shards (2.13 s to 3.13 s) */
@keyframes rz-sh {
  0% { transform: none; opacity: 1; }
  15% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(.3);
    opacity: 0; }
}
@keyframes rz-bloom {
  0% { opacity: 0; }
  10% { opacity: 1; }
  30% { opacity: .6; }
  100% { opacity: 0; }
}
@keyframes rz-r1 {
  0% { opacity: 0; transform: scale(.45); }
  4% { opacity: .95; transform: scale(.5); }
  100% { opacity: 0; transform: scale(2.7); }
}
@keyframes rz-r2 {
  0% { opacity: 0; transform: scale(.4); }
  4% { opacity: .6; transform: scale(.45); }
  100% { opacity: 0; transform: scale(3.2); }
}
@keyframes rz-shake {
  0% { transform: translate(0, 0); }
  9% { transform: translate(-6px, 4px); }
  17% { transform: translate(6px, -5px); }
  29% { transform: translate(-4px, -3px); }
  40% { transform: translate(4px, 3px); }
  55% { transform: translate(-2px, 1px); }
  72%, 100% { transform: translate(0, 0); }
}
/* the number's pop settling (Y63): 0.98 written out, so the press guard
   (SURFACE §9.5, a tap's `scale(.98)`) never takes a keyframe for a press;
   every animation here is off under reduced motion (the block below) */
@keyframes rz-num {
  0% { transform: scale(1); }
  18% { transform: scale(1.17); }
  64% { transform: scale(0.98); }
  100% { transform: scale(1); }
}
@keyframes rz-glow {
  0% { text-shadow: 0 0 28px rgba(109, 180, 238, .45); }
  12% { text-shadow: 0 0 70px #bfe6ff, 0 0 26px #fff, 0 0 8px #fff; }
  100% { text-shadow: 0 0 28px rgba(109, 180, 238, .45); }
}
@keyframes rz-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rz *, .rz *::before, .rz *::after { animation: none !important;
    transition: none !important; }
  .rz-arc { stroke-dasharray: var(--len) 2000; opacity: 1; }
  .rz-hd, .rz-x, .rz-bl, .rz-r1, .rz-r2 { display: none; }
  .rz-move { opacity: 1; }
}