/* Small motion for the report pages - report.html, portal.html and both
   samples load this one file, so the four copies of the report chrome move
   the same way. Everything here is decoration on top of a page that already
   works without it: the score, the bars and the active tab all render at
   their final state if this file never arrives.

   report-motion.js is the other half (the tab indicator and the score's
   count-up); it watches the page instead of being called by it, so no
   page's own script needs to know it exists. */

@keyframes rm-rise { from { opacity: 0; transform: translateY(8px); } }

/* The animations end on the element's own values (no `to` keyframe), so the
   inline width or dasharray the renderer wrote is always where they land. */
@keyframes rm-arc {
  0%, 13% { stroke-dasharray: 0 999; }
}
@keyframes rm-grow { from { width: 0; } }

/* == HEADER ==
   Rises in once, when the content first shows. `backwards` rather than
   `both`: a transform left on the sticky nav after the animation would make
   it a containing block for no reason. */
.rpt-brand, .rpt-head { animation: rm-rise 0.45s cubic-bezier(0.22,1,0.36,1) backwards; }
.rpt-nav { animation: rm-rise 0.45s cubic-bezier(0.22,1,0.36,1) 0.06s backwards; }

/* == CARD STAGGER ==
   Each page staggers its first six cards; a view with more than that used to
   land the rest all at once. */
.rpt-view.is-active .rpt-section:nth-child(7)  { animation-delay: 0.24s; }
.rpt-view.is-active .rpt-section:nth-child(8)  { animation-delay: 0.28s; }
.rpt-view.is-active .rpt-section:nth-child(9)  { animation-delay: 0.32s; }
.rpt-view.is-active .rpt-section:nth-child(n+10) { animation-delay: 0.36s; }

/* == SCORE ==
   The ring draws, the bars fill one after another, and report-motion.js
   counts the number up alongside the ring. All three restart with the view,
   as the cards do. The arc is found by its linecap: the track circle under it
   has none, and the samples' arc has no id. */
.rpt-view.is-active .score-ring circle[stroke-linecap] {
  animation: rm-arc 1.15s cubic-bezier(0.22,1,0.36,1) both;
}
.rpt-view.is-active .score-bar-fill {
  animation: rm-grow 0.9s cubic-bezier(0.22,1,0.36,1) 0.2s backwards;
}
.rpt-view.is-active .score-bar-row:nth-child(2) .score-bar-fill { animation-delay: 0.26s; }
.rpt-view.is-active .score-bar-row:nth-child(3) .score-bar-fill { animation-delay: 0.32s; }
.rpt-view.is-active .score-bar-row:nth-child(4) .score-bar-fill { animation-delay: 0.38s; }
.rpt-view.is-active .score-bar-row:nth-child(5) .score-bar-fill { animation-delay: 0.44s; }

/* == TAB INDICATOR ==
   One pill that slides between tabs instead of each tab lighting up on its
   own. report-motion.js adds .has-ind only once the pill is in place, so
   until then (or without the script) the active tab keeps its own background. */
.rpt-nav-ind {
  position: absolute; left: 0; top: 0; z-index: 0;
  border-radius: 999px; pointer-events: none; opacity: 0;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(20,33,30,0.08), 0 4px 12px rgba(20,33,30,0.06);
  transition: transform 0.38s cubic-bezier(0.22,1,0.36,1),
              width 0.38s cubic-bezier(0.22,1,0.36,1),
              opacity 0.2s ease;
}
.rpt-nav-ind.is-on { opacity: 1; }
.rpt-nav.has-ind .rpt-tab { position: relative; z-index: 1; }
.rpt-nav.has-ind .rpt-tab.active { background: transparent; box-shadow: none; }
/* Forced colours drop backgrounds; an outline survives. */
@media (forced-colors: active) {
  .rpt-nav-ind { outline: 2px solid Highlight; }
}

/* == DISCLOSURES ==
   What a <details> or the methodology toggle reveals eases in rather than
   appearing in one frame. */
.rpt-view details[open] > :not(summary),
#method-section {
  animation: rm-rise 0.3s cubic-bezier(0.22,1,0.36,1) backwards;
}

/* a11y.css shortens durations but leaves delays, which would hold a card or
   a bar invisible for a beat; here nothing moves at all. */
@media (prefers-reduced-motion: reduce) {
  .rpt-brand, .rpt-head, .rpt-nav,
  .rpt-view.is-active .score-ring circle[stroke-linecap],
  .rpt-view.is-active .score-bar-fill,
  .rpt-view details[open] > :not(summary),
  #method-section { animation: none !important; }
  .rpt-nav-ind { transition: none !important; }
}