/* Mavella -- animated product covers, shared shell.
   Scoped under .l365-shelf so nothing here can leak into app.css's
   global :root variables or unrelated screens.

   Contract every cover file (app/shelf/covers/<id>.js) follows:
   - it injects one <svg class="cvr-svg cvr-<id>"> into a
     ".cvr-cover" host, with no <style> of its own -- all animation
     lives here, keyed off a shared set of conventions:
     - every animated element carries a class starting "cvr-anim-"
     - animations default to paused (first frame only, until the
       host gets ".is-playing" from an IntersectionObserver)
     - prefers-reduced-motion forces every "cvr-anim-*" element back
       to a static first frame, unconditionally
   - only transform/opacity are animated (GPU-friendly, no layout
     thrash), loops run 2-6s with an ease timing function
   - no text is drawn into the SVG, so one asset works in all 13
     app languages; the product name/label lives in the card DOM */

.l365-shelf {
  --shelf-green: #0B4D2A;
  --shelf-green-soft: #123E27;
  --shelf-gold: #B8862B;
  --shelf-gold-soft: #E4C77C;
  --shelf-cream: #F6EFE0;
  --shelf-ink: #1B2A20;
}

.cvr-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--shelf-green) 0%, var(--shelf-green-soft) 100%);
  display: block;
}

.cvr-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Every animated part starts paused (frame 0) until the shelf strip's
   IntersectionObserver marks the cover ".is-playing" -- this is the
   "lazy-start" contract, and it also doubles as the resting state a
   screenshot or a slow connection will actually see. */
.cvr-cover [class*="cvr-anim-"] {
  animation-play-state: paused;
  transform-box: fill-box;
  will-change: transform, opacity;
}

.cvr-cover.is-playing [class*="cvr-anim-"] {
  animation-play-state: running;
}

/* Reduced motion wins over everything, including .is-playing: every
   cover renders its static first frame and nothing more. */
@media (prefers-reduced-motion: reduce) {
  .cvr-cover [class*="cvr-anim-"] {
    animation: none !important;
    transition: none !important;
  }
}

/* ---- full_reading: chart wheel, turning slowly ---- */
.cvr-full_reading .fr-ring-outer { fill: none; stroke: var(--shelf-gold); stroke-width: 1.5; opacity: .85; }
.cvr-full_reading .fr-ring-inner { fill: none; stroke: var(--shelf-cream); stroke-width: 1; opacity: .4; }
.cvr-full_reading .fr-tick { stroke: var(--shelf-cream); stroke-width: 1; opacity: .55; }
.cvr-full_reading .fr-hub { fill: var(--shelf-gold); }
@keyframes cvr-kf-fr-spin { to { transform: rotate(360deg); } }
.cvr-anim-fr-spin { animation: cvr-kf-fr-spin 6s linear infinite; }
@keyframes cvr-kf-fr-glow {
  0%, 100% { opacity: .7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}
.cvr-anim-fr-glow { animation: cvr-kf-fr-glow 3s ease-in-out infinite; }

/* ---- gemstone: faceted gem rotating, planet ring orbiting ---- */
.cvr-gemstone .gem-orbit-path { fill: none; stroke: var(--shelf-gold); stroke-width: 1; opacity: .35; }
.cvr-gemstone .gem-planet { fill: var(--shelf-cream); }
.cvr-gemstone .gem-face { fill: var(--shelf-gold-soft); opacity: .9; }
.cvr-gemstone .gem-facet { fill: var(--shelf-gold); opacity: .18; stroke: var(--shelf-cream); stroke-width: .5; stroke-opacity: .4; }
@keyframes cvr-kf-gem-spin {
  0% { transform: rotate(0deg) scaleX(1); }
  50% { transform: rotate(180deg) scaleX(.72); }
  100% { transform: rotate(360deg) scaleX(1); }
}
.cvr-anim-gem-spin { animation: cvr-kf-gem-spin 5s ease-in-out infinite; }
@keyframes cvr-kf-gem-orbit { to { transform: rotate(-360deg); } }
.cvr-anim-gem-orbit { animation: cvr-kf-gem-orbit 4s linear infinite; }

/* ---- life365_complete: wheel + compass + Lo Shu grid, merging ---- */
.cvr-life365_complete .lc-ring { fill: none; stroke: var(--shelf-gold); stroke-width: 1.4; opacity: .8; }
.cvr-life365_complete .lc-tick { stroke: var(--shelf-cream); stroke-width: 1; opacity: .5; }
.cvr-life365_complete .lc-compass-ring { fill: none; stroke: var(--shelf-cream); stroke-width: 1; opacity: .45; }
.cvr-life365_complete .lc-compass-line { stroke: var(--shelf-cream); stroke-width: 1; opacity: .4; }
.cvr-life365_complete .lc-cell { fill: none; stroke: var(--shelf-gold); stroke-width: 1; opacity: .55; }
.cvr-life365_complete .lc-hub { fill: var(--shelf-gold); }
@keyframes cvr-kf-lc-wheel { to { transform: rotate(360deg); } }
.cvr-anim-lc-wheel { animation: cvr-kf-lc-wheel 6s linear infinite; }
@keyframes cvr-kf-lc-compass { to { transform: rotate(-360deg); } }
.cvr-anim-lc-compass { animation: cvr-kf-lc-compass 5s linear infinite; }
@keyframes cvr-kf-lc-grid {
  0%, 100% { transform: scale(1); opacity: .8; }
  50% { transform: scale(1.08); opacity: 1; }
}
.cvr-anim-lc-grid { animation: cvr-kf-lc-grid 5s ease-in-out infinite; }
@keyframes cvr-kf-lc-hub {
  0%, 100% { opacity: .75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.35); }
}
.cvr-anim-lc-hub { animation: cvr-kf-lc-hub 4s ease-in-out infinite; }

/* ---- marriage_timing: wheel with 7th house + Venus + window ---- */
.cvr-marriage_timing .mt-ring-outer { fill: none; stroke: var(--shelf-gold); stroke-width: 1.5; opacity: .8; }
.cvr-marriage_timing .mt-ring-inner { fill: none; stroke: var(--shelf-cream); stroke-width: 1; opacity: .35; }
.cvr-marriage_timing .mt-tick { stroke: var(--shelf-cream); stroke-width: 1; opacity: .5; }
.cvr-marriage_timing .mt-hub { fill: var(--shelf-gold); opacity: .9; }
.cvr-marriage_timing .mt-track { fill: var(--shelf-cream); opacity: .25; }
.cvr-marriage_timing .mt-house7 { fill: var(--shelf-gold); }
.cvr-marriage_timing .mt-venus { fill: var(--shelf-cream); }
.cvr-marriage_timing .mt-window { fill: var(--shelf-gold-soft); }
@keyframes cvr-kf-mt-house7 {
  0%, 100% { opacity: .35; }
  50% { opacity: .9; }
}
.cvr-anim-mt-house7 { animation: cvr-kf-mt-house7 4s ease-in-out infinite; }
@keyframes cvr-kf-mt-venus {
  0%, 100% { opacity: .6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.5); }
}
.cvr-anim-mt-venus { animation: cvr-kf-mt-venus 3s ease-in-out infinite; }
@keyframes cvr-kf-mt-window {
  0%, 100% { opacity: .45; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}
.cvr-anim-mt-window { animation: cvr-kf-mt-window 3.5s ease-in-out infinite; }

/* ---- kundli_matching: two wheels, kootas rising in a wave ---- */
.cvr-kundli_matching .km-ring { fill: none; stroke: var(--shelf-gold); stroke-width: 1.3; opacity: .75; }
.cvr-kundli_matching .km-tick { stroke: var(--shelf-cream); stroke-width: 1; opacity: .5; }
.cvr-kundli_matching .km-bar { fill: var(--shelf-gold-soft); opacity: .85; }
@keyframes cvr-kf-km-wheel-l { to { transform: rotate(360deg); } }
.cvr-anim-km-wheel-l { animation: cvr-kf-km-wheel-l 6s linear infinite; }
@keyframes cvr-kf-km-wheel-r { to { transform: rotate(-360deg); } }
.cvr-anim-km-wheel-r { animation: cvr-kf-km-wheel-r 5s linear infinite; }
@keyframes cvr-kf-km-bar {
  0%, 100% { transform: scaleY(.3); opacity: .55; }
  50% { transform: scaleY(1); opacity: 1; }
}
.cvr-anim-km-bar0 { animation: cvr-kf-km-bar 2.6s ease-in-out infinite; }
.cvr-anim-km-bar1 { animation: cvr-kf-km-bar 2.6s ease-in-out infinite; animation-delay: .2s; }
.cvr-anim-km-bar2 { animation: cvr-kf-km-bar 2.6s ease-in-out infinite; animation-delay: .4s; }
.cvr-anim-km-bar3 { animation: cvr-kf-km-bar 2.6s ease-in-out infinite; animation-delay: .6s; }
.cvr-anim-km-bar4 { animation: cvr-kf-km-bar 2.6s ease-in-out infinite; animation-delay: .8s; }
.cvr-anim-km-bar5 { animation: cvr-kf-km-bar 2.6s ease-in-out infinite; animation-delay: 1s; }
.cvr-anim-km-bar6 { animation: cvr-kf-km-bar 2.6s ease-in-out infinite; animation-delay: 1.2s; }
.cvr-anim-km-bar7 { animation: cvr-kf-km-bar 2.6s ease-in-out infinite; animation-delay: 1.4s; }

/* ---- career_money: static D10 grid, five-year climbing timeline ---- */
.cvr-career_money .cm-cell { fill: none; stroke: var(--shelf-gold); stroke-width: 1; opacity: .5; }
.cvr-career_money .cm-baseline { stroke: var(--shelf-cream); stroke-width: 1; opacity: .4; }
.cvr-career_money .cm-bar { fill: var(--shelf-gold-soft); opacity: .9; }
@keyframes cvr-kf-cm-bar {
  0%, 100% { transform: scaleY(1); opacity: .8; }
  50% { transform: scaleY(1.18); opacity: 1; }
}
.cvr-anim-cm-bar0 { animation: cvr-kf-cm-bar 3s ease-in-out infinite; }
.cvr-anim-cm-bar1 { animation: cvr-kf-cm-bar 3s ease-in-out infinite; animation-delay: .3s; }
.cvr-anim-cm-bar2 { animation: cvr-kf-cm-bar 3s ease-in-out infinite; animation-delay: .6s; }
.cvr-anim-cm-bar3 { animation: cvr-kf-cm-bar 3s ease-in-out infinite; animation-delay: .9s; }
.cvr-anim-cm-bar4 { animation: cvr-kf-cm-bar 3s ease-in-out infinite; animation-delay: 1.2s; }

/* ---- year_ahead: 12-segment ring filling in month by month ---- */
.cvr-year_ahead .ya-ring-inner { fill: none; stroke: var(--shelf-cream); stroke-width: 1; opacity: .3; }
.cvr-year_ahead .ya-hub { fill: var(--shelf-gold); }
.cvr-year_ahead .ya-seg { stroke: var(--shelf-gold); stroke-width: 3; stroke-linecap: round; }
@keyframes cvr-kf-ya-seg {
  0% { opacity: .15; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: .15; }
}
.cvr-anim-ya-seg0 { animation: cvr-kf-ya-seg 3s ease-in-out infinite; }
.cvr-anim-ya-seg1 { animation: cvr-kf-ya-seg 3s ease-in-out infinite; animation-delay: .25s; }
.cvr-anim-ya-seg2 { animation: cvr-kf-ya-seg 3s ease-in-out infinite; animation-delay: .5s; }
.cvr-anim-ya-seg3 { animation: cvr-kf-ya-seg 3s ease-in-out infinite; animation-delay: .75s; }
.cvr-anim-ya-seg4 { animation: cvr-kf-ya-seg 3s ease-in-out infinite; animation-delay: 1s; }
.cvr-anim-ya-seg5 { animation: cvr-kf-ya-seg 3s ease-in-out infinite; animation-delay: 1.25s; }
.cvr-anim-ya-seg6 { animation: cvr-kf-ya-seg 3s ease-in-out infinite; animation-delay: 1.5s; }
.cvr-anim-ya-seg7 { animation: cvr-kf-ya-seg 3s ease-in-out infinite; animation-delay: 1.75s; }
.cvr-anim-ya-seg8 { animation: cvr-kf-ya-seg 3s ease-in-out infinite; animation-delay: 2s; }
.cvr-anim-ya-seg9 { animation: cvr-kf-ya-seg 3s ease-in-out infinite; animation-delay: 2.25s; }
.cvr-anim-ya-seg10 { animation: cvr-kf-ya-seg 3s ease-in-out infinite; animation-delay: 2.5s; }
.cvr-anim-ya-seg11 { animation: cvr-kf-ya-seg 3s ease-in-out infinite; animation-delay: 2.75s; }

/* ---- dosha_check: three badges flickering into one calm glow ---- */
.cvr-dosha_check .dc-badge { fill: var(--shelf-gold-soft); stroke: var(--shelf-gold); stroke-width: 1; opacity: .8; }
.cvr-dosha_check .dc-glow { fill: var(--shelf-cream); opacity: 0; }
@keyframes cvr-kf-dc-badge {
  0%, 100% { opacity: .55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.25); }
}
.cvr-anim-dc-badge1 { animation: cvr-kf-dc-badge 3s ease-in-out infinite; }
.cvr-anim-dc-badge2 { animation: cvr-kf-dc-badge 3s ease-in-out infinite; animation-delay: .4s; }
.cvr-anim-dc-badge3 { animation: cvr-kf-dc-badge 3s ease-in-out infinite; animation-delay: .8s; }
@keyframes cvr-kf-dc-glow {
  0%, 100% { opacity: .15; transform: scale(1); }
  50% { opacity: .6; transform: scale(1.3); }
}
.cvr-anim-dc-glow { animation: cvr-kf-dc-glow 3s ease-in-out infinite; animation-delay: 1.2s; }

/* ---- numerology: Lo Shu grid, cells fading in one by one ---- */
.cvr-numerology .nm-cell { fill: none; stroke: var(--shelf-gold); stroke-width: 1; }
@keyframes cvr-kf-nm-cell {
  0%, 100% { opacity: .15; transform: scale(.6); }
  40% { opacity: 1; transform: scale(1); }
  90% { opacity: 1; transform: scale(1); }
}
.cvr-anim-nm-cell0 { animation: cvr-kf-nm-cell 3s ease-in-out infinite; }
.cvr-anim-nm-cell1 { animation: cvr-kf-nm-cell 3s ease-in-out infinite; animation-delay: .15s; }
.cvr-anim-nm-cell2 { animation: cvr-kf-nm-cell 3s ease-in-out infinite; animation-delay: .3s; }
.cvr-anim-nm-cell3 { animation: cvr-kf-nm-cell 3s ease-in-out infinite; animation-delay: .45s; }
.cvr-anim-nm-cell4 { animation: cvr-kf-nm-cell 3s ease-in-out infinite; animation-delay: .6s; }
.cvr-anim-nm-cell5 { animation: cvr-kf-nm-cell 3s ease-in-out infinite; animation-delay: .75s; }
.cvr-anim-nm-cell6 { animation: cvr-kf-nm-cell 3s ease-in-out infinite; animation-delay: .9s; }
.cvr-anim-nm-cell7 { animation: cvr-kf-nm-cell 3s ease-in-out infinite; animation-delay: 1.05s; }
.cvr-anim-nm-cell8 { animation: cvr-kf-nm-cell 3s ease-in-out infinite; animation-delay: 1.2s; }

/* ---- numerology_pack: tile row flipping letters into numbers ---- */
.cvr-numerology_pack .np-tile { fill: var(--shelf-gold-soft); opacity: .85; }
.cvr-numerology_pack .np-mark { fill: var(--shelf-green); opacity: .8; }
@keyframes cvr-kf-np-tile {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(0); }
}
.cvr-anim-np-tile0 { animation: cvr-kf-np-tile 2.6s ease-in-out infinite; }
.cvr-anim-np-tile1 { animation: cvr-kf-np-tile 2.6s ease-in-out infinite; animation-delay: .2s; }
.cvr-anim-np-tile2 { animation: cvr-kf-np-tile 2.6s ease-in-out infinite; animation-delay: .4s; }
.cvr-anim-np-tile3 { animation: cvr-kf-np-tile 2.6s ease-in-out infinite; animation-delay: .6s; }
.cvr-anim-np-tile4 { animation: cvr-kf-np-tile 2.6s ease-in-out infinite; animation-delay: .8s; }
.cvr-anim-np-tile5 { animation: cvr-kf-np-tile 2.6s ease-in-out infinite; animation-delay: 1s; }

/* ---- occasion_muhurta: month grid with good dates out of phase ---- */
.cvr-occasion_muhurta .om-cell { fill: none; stroke: var(--shelf-cream); stroke-width: .75; opacity: .4; }
.cvr-occasion_muhurta .om-good { fill: var(--shelf-gold); }
@keyframes cvr-kf-om-good {
  0%, 100% { opacity: .35; }
  50% { opacity: 1; }
}
.cvr-anim-om-good0 { animation: cvr-kf-om-good 3s ease-in-out infinite; }
.cvr-anim-om-good1 { animation: cvr-kf-om-good 3s ease-in-out infinite; animation-delay: .6s; }
.cvr-anim-om-good2 { animation: cvr-kf-om-good 3s ease-in-out infinite; animation-delay: 1.2s; }

/* ---- home_vastu: 16-zone compass grid sweeping cell by cell ---- */
.cvr-home_vastu .hv-cross { stroke: var(--shelf-cream); stroke-width: 1; opacity: .35; }
.cvr-home_vastu .hv-cell { fill: none; stroke: var(--shelf-gold); stroke-width: .75; }
@keyframes cvr-kf-hv-cell {
  0%, 100% { opacity: .2; }
  50% { opacity: .95; }
}
.cvr-anim-hv-cell0 { animation: cvr-kf-hv-cell 3s ease-in-out infinite; }
.cvr-anim-hv-cell1 { animation: cvr-kf-hv-cell 3s ease-in-out infinite; animation-delay: .18s; }
.cvr-anim-hv-cell2 { animation: cvr-kf-hv-cell 3s ease-in-out infinite; animation-delay: .36s; }
.cvr-anim-hv-cell3 { animation: cvr-kf-hv-cell 3s ease-in-out infinite; animation-delay: .54s; }
.cvr-anim-hv-cell4 { animation: cvr-kf-hv-cell 3s ease-in-out infinite; animation-delay: .72s; }
.cvr-anim-hv-cell5 { animation: cvr-kf-hv-cell 3s ease-in-out infinite; animation-delay: .9s; }
.cvr-anim-hv-cell6 { animation: cvr-kf-hv-cell 3s ease-in-out infinite; animation-delay: 1.08s; }
.cvr-anim-hv-cell7 { animation: cvr-kf-hv-cell 3s ease-in-out infinite; animation-delay: 1.26s; }
.cvr-anim-hv-cell8 { animation: cvr-kf-hv-cell 3s ease-in-out infinite; animation-delay: 1.44s; }
.cvr-anim-hv-cell9 { animation: cvr-kf-hv-cell 3s ease-in-out infinite; animation-delay: 1.62s; }
.cvr-anim-hv-cell10 { animation: cvr-kf-hv-cell 3s ease-in-out infinite; animation-delay: 1.8s; }
.cvr-anim-hv-cell11 { animation: cvr-kf-hv-cell 3s ease-in-out infinite; animation-delay: 1.98s; }
.cvr-anim-hv-cell12 { animation: cvr-kf-hv-cell 3s ease-in-out infinite; animation-delay: 2.16s; }
.cvr-anim-hv-cell13 { animation: cvr-kf-hv-cell 3s ease-in-out infinite; animation-delay: 2.34s; }
.cvr-anim-hv-cell14 { animation: cvr-kf-hv-cell 3s ease-in-out infinite; animation-delay: 2.52s; }
.cvr-anim-hv-cell15 { animation: cvr-kf-hv-cell 3s ease-in-out infinite; animation-delay: 2.7s; }

/* ---- commercial_vastu: shop floor plan, zones lighting in turn ---- */
.cvr-commercial_vastu .cv-outline { fill: none; stroke: var(--shelf-gold); stroke-width: 1.5; opacity: .85; }
.cvr-commercial_vastu .cv-divider { stroke: var(--shelf-cream); stroke-width: 1; opacity: .4; }
.cvr-commercial_vastu .cv-zone { fill: var(--shelf-gold-soft); }
@keyframes cvr-kf-cv-zone {
  0%, 100% { opacity: .12; }
  50% { opacity: .55; }
}
.cvr-anim-cv-zone0 { animation: cvr-kf-cv-zone 3s ease-in-out infinite; }
.cvr-anim-cv-zone1 { animation: cvr-kf-cv-zone 3s ease-in-out infinite; animation-delay: .5s; }
.cvr-anim-cv-zone2 { animation: cvr-kf-cv-zone 3s ease-in-out infinite; animation-delay: 1s; }

/* ---- property_verdict: floor plan, verdict ribbon breathing ---- */
.cvr-property_verdict .pv-outline { fill: none; stroke: var(--shelf-gold); stroke-width: 1.5; opacity: .85; }
.cvr-property_verdict .pv-divider { stroke: var(--shelf-cream); stroke-width: 1; opacity: .35; }
.cvr-property_verdict .pv-band { fill: var(--shelf-gold); opacity: .85; }
@keyframes cvr-kf-pv-band {
  0%, 100% { opacity: .7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}
.cvr-anim-pv-band { animation: cvr-kf-pv-band 3.5s ease-in-out infinite; }

/* ---- concord: three voices drifting to a shared centre and back ---- */
.cvr-concord .cn-voice { fill: var(--shelf-gold-soft); opacity: .85; }
.cvr-concord .cn-glow { fill: var(--shelf-cream); opacity: 0; }
@keyframes cvr-kf-cn-voice-a {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(15.6px, 15.6px); }
}
.cvr-anim-cn-voice-a { animation: cvr-kf-cn-voice-a 3s ease-in-out infinite; }
@keyframes cvr-kf-cn-voice-b {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-15.6px, 15.6px); }
}
.cvr-anim-cn-voice-b { animation: cvr-kf-cn-voice-b 3s ease-in-out infinite; animation-delay: .4s; }
@keyframes cvr-kf-cn-voice-c {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(0px, -21.6px); }
}
.cvr-anim-cn-voice-c { animation: cvr-kf-cn-voice-c 3s ease-in-out infinite; animation-delay: .8s; }
@keyframes cvr-kf-cn-glow {
  0%, 100% { opacity: 0; transform: scale(1); }
  50% { opacity: .65; transform: scale(1.4); }
}
.cvr-anim-cn-glow { animation: cvr-kf-cn-glow 3s ease-in-out infinite; }

/* Compare my reports (C34). Two sheets, lines settling in sequence, and the
   one line on each that disagrees holding the gold. Both sheets are drawn
   identically -- the product compares two reports, it never rates them. */
.cvr-compare_reports .cmpr-sheet { fill: none; stroke: var(--shelf-green-soft);
  stroke-width: 1.2; }
.cvr-compare_reports .cmpr-line { fill: var(--shelf-green-soft); opacity: .35; }
.cvr-compare_reports .cmpr-odd { fill: var(--shelf-gold); }
@keyframes cvr-kf-cmpr {
  0%   { opacity: .15; transform: translateX(-2px); }
  35%  { opacity: .85; transform: translateX(0); }
  75%  { opacity: .85; transform: translateX(0); }
  100% { opacity: .15; transform: translateX(-2px); }
}
.cvr-compare_reports .cvr-anim-cmpr-a0,
.cvr-compare_reports .cvr-anim-cmpr-a1,
.cvr-compare_reports .cvr-anim-cmpr-a2,
.cvr-compare_reports .cvr-anim-cmpr-a3,
.cvr-compare_reports .cvr-anim-cmpr-a4,
.cvr-compare_reports .cvr-anim-cmpr-b0,
.cvr-compare_reports .cvr-anim-cmpr-b1,
.cvr-compare_reports .cvr-anim-cmpr-b2,
.cvr-compare_reports .cvr-anim-cmpr-b3,
.cvr-compare_reports .cvr-anim-cmpr-b4 {
  animation: cvr-kf-cmpr 4s ease-in-out infinite;
}
.cvr-compare_reports .cvr-anim-cmpr-a1 { animation-delay: .12s; }
.cvr-compare_reports .cvr-anim-cmpr-a2 { animation-delay: .24s; }
.cvr-compare_reports .cvr-anim-cmpr-a3 { animation-delay: .36s; }
.cvr-compare_reports .cvr-anim-cmpr-a4 { animation-delay: .48s; }
.cvr-compare_reports .cvr-anim-cmpr-b0 { animation-delay: .30s; }
.cvr-compare_reports .cvr-anim-cmpr-b1 { animation-delay: .42s; }
.cvr-compare_reports .cvr-anim-cmpr-b2 { animation-delay: .54s; }
.cvr-compare_reports .cvr-anim-cmpr-b3 { animation-delay: .66s; }
.cvr-compare_reports .cvr-anim-cmpr-b4 { animation-delay: .78s; }