/* Clarity Measure pixel loader. Everything that moves lives here; the module in
   /assets/pixel-loader.js only builds the grid and hands each square its place
   in the wavefront as --pixel-delay. */
.pixel-loader{display:flex;flex-direction:column;align-items:center;gap:14px}
.pixel-loader-grid{display:grid;grid-template-columns:repeat(3,4px);gap:4px}
.pixel-loader-grid i{display:block;width:4px;height:4px;border-radius:1px;background:currentColor;opacity:.15}
.pixel-loader-label{margin:0;font-size:13px;font-weight:530;letter-spacing:-.1px;color:var(--ink,#102a3b)}
.pixel-loader-clock-line{margin:0;font-size:12px;color:var(--muted,#526575)}
.pixel-loader-clock{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
/* The Drive variant is the one the app wears: a little larger, a little calmer. */
.pixel-loader.is-drive .pixel-loader-grid{grid-template-columns:repeat(3,5px);gap:5px}
.pixel-loader.is-drive .pixel-loader-grid i{width:5px;height:5px}

@media (prefers-reduced-motion:no-preference){
  .pixel-loader-grid i{animation:pixel-pulse var(--pixel-cycle,650ms) ease-in-out var(--pixel-delay,0ms) infinite}
  @keyframes pixel-pulse{0%,100%{opacity:.15}50%{opacity:1}}
  /* Opt-in only (shimmer: true): the words breathe once every 1.4s, solid ink dimming a
     little and coming back. No gradient through the text. The calm default leaves the
     label still so the grid is the only thing moving. */
  .pixel-loader.is-shimmer .pixel-loader-label{color:var(--ink,#102a3b);animation:pixel-shimmer 1.4s linear infinite}
  @keyframes pixel-shimmer{0%,100%{opacity:1}50%{opacity:.55}}
}

/* With motion refused the grid is simply there, dim and still. The clock keeps
   counting: how long something has taken is information, not decoration. */
@media (prefers-reduced-motion:reduce){
  .pixel-loader-grid i{animation:none;opacity:.3}
  .pixel-loader.is-shimmer .pixel-loader-label{animation:none;opacity:1;color:var(--ink,#102a3b)}
}