/* Session Recap — full-bleed red screen. Red at top fading to warm cream at the
   bottom where the % and the "View Full Report" pull-up handle sit. */
.recap-screen {
  position: relative;
  height: 780px;
  overflow: hidden;
  /* The wash is ours, not the clips'. Stops sampled straight down the arrival artwork
     this replaces, clear of the runner, so the saturation and the red→cream falloff are
     the original's — the clips only add the runners on top. */
  /* The design's own gradient vector (Ellipse 31226), rendered out and cropped past the
     frame's corner radius so it can go full-bleed. A CSS ramp could not hold its
     saturation — the falloff is organic, not linear. The flat colour underneath only
     covers the instant before the image decodes. */
  background: #050A0A;   /* only ever seen for an instant before the layers paint */
  user-select: none;
  -webkit-user-select: none;
}

/* Bottom up: the clip, its own white foot, then the blur blob — one lighten stack, which
   is the Figma blend. Lighten keeps whichever is brighter, so the clip's black backing is
   replaced wholesale by the blob and the runner survives only where he is brighter than
   it, which is what tints him red instead of leaving him grey on red. */
.recap-clip {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  /* The clip is a colour photograph and the design's figure is not — his own greens and
     pinks fought the red. Drained and lifted, he reads as the blob's own light. */
  filter: saturate(0.28) brightness(0.86);
  pointer-events: none;
  z-index: 0;
  /* Hidden until it is actually running. A video element that has not started yet draws
     the platform's own start-playback button over the frame, and no CSS on that shadow
     control removes it reliably — so the element is simply not there until the script
     sees it playing. What shows meanwhile is the gradient, which is the frame anyway.
     Stated here rather than only in the rAF loop: the loop's first callback lands after
     the first paint, and that one painted frame is where the button was being seen. */
  visibility: hidden;
  /* Leaving for the report: the runner goes TRANSPARENT where he is and still running,
     rather than being frozen by the outgoing snapshot and cut. What shows through him is
     the fill and the blob, which is the red the report opens on — so the two screens meet
     on the same colour.
     .9s against a 300ms wait before the page changes (recap.html), which is the point: he
     is only about 40% of the way out when the pages start to cross, so he is still there,
     visibly thinning, AS the report arrives. Faded all the way first, the screen just sat
     empty for a moment and the two things read as separate events. */
  transition: opacity .9s ease;
}
.recap-leaving .recap-clip { opacity: 0; }
/* 달리기_션_흑's own fill: black to 78%, white at the foot. Under the blob, so the white
   it adds is what the blob's pale edge then sits on. */
.recap-fade {
  position: absolute;
  inset: 0;
  /* Lighten, not plus-lighter: this is the clip's own FILL, and adding it instead of
     taking the brighter of the two washed the whole frame out. Only the gradient effect
     over it is plus-lighter. */
  mix-blend-mode: lighten;
  background: linear-gradient(180deg, #050A0A 78%, #FFFFFF 100%);
  pointer-events: none;
}
/* The blob, full frame. Its radial runs solid #FA3030 out to 73%, then orange, peach and
   white at the rim — so covering the frame IS the background colour, and nothing else is
   needed to make it. */
.recap-glow {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* The blob is an egg, so scaling alone never reaches the top CORNERS — the shape is
     narrower there than the frame, and outside the path the SVG is transparent, which is
     what let the clip's black through. The core colour goes behind it to close them, but
     it has to STOP before the foot: carried the whole way down it kept adding red to the
     white fill underneath, which is the pink edge that showed by View Full Report. Below
     the halfway mark the artwork is peach and white anyway, so nothing needs backing. */
  background: linear-gradient(180deg, #FA3030 0 40%, rgba(250,48,48,0) 56%);
  transform: scale(1.32);
  /* Kept on lighten. plus-lighter ADDS, and the clip's backing is dark grey rather than
     true black, so every channel gained ~26 — the whole frame came up washed, and where
     the blob's peach rim crossed the fill's ramp the two summed into a yellow band. On
     lighten the same stack lands on the design. Say the word and I will crush the clip's
     blacks so plus-lighter can be used as drawn. */
  mix-blend-mode: lighten;
  pointer-events: none;
}

/* Everything else on the screen sits above the clip. */
.recap-screen > *:not(.recap-clip) { z-index: 2; }

.recap-title {
  position: absolute;
  top: 120px;
  left: 0; right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--font-supreme-bold);
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -1.5px;
  color: #fff;
}

/* Sits at the design's x99 / y566, left-aligned from there rather than centred. */
.recap-match {
  position: absolute;
  /* Off the BOTTOM, not the top. Anchored at 566 from the top it sat where the design
     puts it on a 780 frame and ran straight into the handle on a real phone, whose
     viewport is nearer 700. 101 up from the foot is the same place on 780 and holds its
     gap to the handle on any height. */
  bottom: 101px;
  left: 99px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  color: #fff;
}
/* Title/T2. Hidden while the % counts up; rises in from below once it hits 76. */
.recap-match-label {
  margin: 0;
  font-family: var(--font-supreme-bold);
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -1px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .45s ease, transform .5s cubic-bezier(.2,.8,.3,1);
}
.recap-match.done .recap-match-label { opacity: 1; transform: translateY(0); }
/* The score arrives before it counts: it slides up out of near-nothing, and only once
   it has landed does the number run. Counting during the slide read as two things
   happening at once. */
.recap-pct {
  display: flex; align-items: baseline; gap: 6px;
  opacity: .18;
  transform: translateY(18px);
  transition: opacity .34s ease, transform .42s cubic-bezier(.2,.8,.3,1);
}
.recap-match.enter .recap-pct { opacity: 1; transform: translateY(0); }
/* Right-aligned in the width the final score needs, so the units digit never moves:
   the resting 0.0 sits in the same column 78.8 lands in, and the count does not shove
   "pts" around as it gains a digit. */
.recap-pct .num { font-family: var(--font-offbit); font-weight: 700; font-size: 72px; line-height: 1.1; letter-spacing: -1.44px; min-width: 131px; text-align: right; }
.recap-pct .unit { font-family: var(--font-supreme-bold); font-size: 18px; line-height: 1.2; letter-spacing: -0.54px; }

/* Pull-up handle at the very bottom. #FA3030 with a 20% white layer over it, which is
   rgb(251,89,89) — the chevron is inline SVG so it takes the same colour from here. */
/* 하단바 (730:8935): a 100-tall container on the frame's bottom edge, 16px side padding,
   its content 8px in from the top — a 30px icon, 2px, then the 21px label. That puts the
   block at 688–741, i.e. 39px off the bottom. */
.recap-full {
  position: absolute;
  bottom: 39px;
  left: 16px; right: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-decoration: none;
  color: #FB5959;
  animation: hint-nudge 3.6s ease-in-out 1.2s infinite;
}
/* One nudge, then still. Twice in a row read as a bounce, which is too much motion for
   something this small on a phone. */
@keyframes hint-nudge {
  0%, 100% { transform: translateY(0); }
  9%  { transform: translateY(-6px); }
  22% { transform: translateY(0); }
}
.recap-full svg { width: 30px; height: 30px; display: block; }
.recap-full span { font-family: var(--font-supreme-bold); font-size: 15px; line-height: 21px; letter-spacing: -0.5px; }