/* A clipped duplicate adds light without changing the original value graphic. */
.product-stats dd { display: grid; align-items: center; justify-items: end; }
.product-stats dd > img { grid-area: 1 / 1; }
.product-stats .stat-wave { pointer-events: none; opacity: 0; filter: brightness(1.8); }
.product-card { --stat-phase: 0s; }
.product-grid > .product-card:nth-child(2) { --stat-phase: .6s; }
.product-grid > .product-card:nth-child(3) { --stat-phase: 1.2s; }
.product-grid > .product-card:nth-child(4) { --stat-phase: 1.8s; }
.product-stats > div:nth-child(1) { --stat-row: 0s; }
.product-stats > div:nth-child(2) { --stat-row: .25s; }
.product-stats > div:nth-child(3) { --stat-row: .5s; }
.catalog-idle .stat-wave, #details[open].popup-packs-idle .stat-wave {
 animation: stat-light-x 11s ease-in-out infinite;
 animation-delay: calc(2s + var(--stat-phase, 0s) + var(--stat-row));
}
.catalog-idle .meter .stat-wave, #details[open].popup-packs-idle .meter .stat-wave { animation-name: stat-light-y; }
@keyframes stat-light-x {
 0% { opacity: 0; clip-path: inset(0 100% 0 0); }
 3% { opacity: .4; clip-path: inset(0 80% 0 0); }
 12% { opacity: .4; clip-path: inset(0 0 0 80%); }
 16%,100% { opacity: 0; clip-path: inset(0 0 0 100%); }
}
/* Meter source SVGs are rotated 90 degrees by the existing design styles. */
@keyframes stat-light-y {
 0% { opacity: 0; clip-path: inset(100% 0 0 0); }
 3% { opacity: .4; clip-path: inset(80% 0 0 0); }
 12% { opacity: .4; clip-path: inset(0 0 80% 0); }
 16%,100% { opacity: 0; clip-path: inset(0 0 100% 0); }
}
.ambient-paused .product-stats .stat-wave,
body:has(dialog[open]) main .product-stats .stat-wave { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .product-stats .stat-wave { animation: none !important; opacity: 0; } }
