/* CountVault logo (templates/_cv_logo.html, built by tools/brand/make_countvault_brand.py).
 *
 * The mark is a vault door whose combination dial is one day of traffic
 * counts: 24 hourly bars, noon at the top, the AM and PM peak hours in
 * orange, the orange index fixed above the dial.
 *
 * Motion (CSS only; the sidebar's once-per-session switch is a one-line script
 * in the partial):
 *   intro  (.cv-intro): the day's bars fill in around the dial while it turns
 *          through a combination (right, left, right), clicks home under the
 *          index, the bolts clunk, a light sweeps the door and the index
 *          glows. About 3.5 s. The sidebar plays it once per browser tab
 *          session, the sign-in pages on every visit.
 *   idle   (always): every 10 s a light runs once round the count bars and
 *          the index glows as it gets back to the top.
 *   pointer: the dial follows the pointer, the door leans toward it, the index
 *          clicks as the dial passes under it (static/cv_logo.js: inline
 *          styles on .cvm-dial-h, .cvm-tilt, .cvm-pglow, .cvm-hglow and
 *          .cvm-hsheen, removed again once the logo is home).
 * prefers-reduced-motion: none of it, the logo stands still.
 *
 * Every transform lives on a group without a transform attribute. The mark is
 * its own nested <svg viewBox="0 0 100 100">, so 50px 50px is its centre.
 * One-shot animations fill backwards only: their last frame is the resting
 * style, and a finished animation then lets Chromium drop its layers. The
 * builder paints the looping pieces (sweep, pulse) last, so the still logo
 * between glints stays one sharp layer. */

.cv-logo { display: block; overflow: visible; }

/* Paint containment on the logo's boxes keeps the animated layers from pulling
 * the text after them (sidebar nav, sign-in form) out of subpixel (LCD)
 * anti-aliasing in Chromium. Both boxes already hold the halo and shadows. */
.sidebar .brand,
.login-card .brand-logo { contain: paint; }

.cv-logo .cvm-dial,
.cv-logo .cvm-dial-h,
.cv-logo .cvm-tilt,
.cv-logo .cvm-bar,
.cv-logo .cvm-bolts,
.cv-logo .cvm-sweep { transform-origin: 50px 50px; }
.cv-logo .cvm-iglow,
.cv-logo .cvm-glow,
.cv-logo .cvm-hglow { transform-box: fill-box; transform-origin: center; }

/* resting state = the finished logo */
.cv-logo .cvm-iglow,
.cv-logo .cvm-glow,
.cv-logo .cvm-hglow,
.cv-logo .cvm-pglow,
.cv-logo .cvm-hsheen,
.cv-logo .cvm-sweep { opacity: 0; }

/* ---- intro ---------------------------------------------------------------- */
.cv-logo.cv-intro .cvm-bar {
  animation: cvm-bar-in .6s cubic-bezier(.2, .9, .3, 1.25) backwards;
  animation-delay: calc(.12s + var(--i, 0) * 32ms);
}
.cv-logo.cv-intro .cvm-dial { animation: cvm-combo 2.2s .25s backwards; }
.cv-logo.cv-intro .cvm-bolts { animation: cvm-clunk .7s ease-in-out 2.4s backwards; }
.cv-logo.cv-intro .cvm-sheen { animation: cvm-sheen 1.1s cubic-bezier(.4, 0, .2, 1) 2.45s backwards; }
.cv-logo.cv-intro .cvw-idax { animation: cvw-in .7s cubic-bezier(.2, .8, .2, 1) .15s backwards; }
.cv-logo.cv-intro .cvw-name { animation: cvw-in .7s cubic-bezier(.2, .8, .2, 1) .3s backwards; }
.cv-logo.cv-intro .cvm-iglow { animation: cvm-flash 1.3s ease-out 2.4s backwards; }

/* ---- idle ----------------------------------------------------------------- */
/* Each glow / sheen / dial group carries ONE animation: with two on one element
 * Chromium stops compositing the idle loop and restyles every frame (measured:
 * about 1.5 % of a core; composited it is next to nothing). */
.cv-logo .cvm-sweep { animation: cvm-sweep 10s linear 4s infinite; }
.cv-logo .cvm-glow { animation: cvm-pulse 10s ease-in-out 4s infinite; }
.cv-logo.cv-intro .cvm-sweep,
.cv-logo.cv-intro .cvm-glow { animation-delay: 6s; }


@keyframes cvm-bar-in {
  from { opacity: 0; transform: scale(.4); }
  to   { opacity: 1; transform: scale(1); }
}
/* right to +72, left to -34, right home with a small overshoot (the click) */
@keyframes cvm-combo {
  0%   { transform: rotate(-110deg); animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
  36%  { transform: rotate(72deg); }
  43%  { transform: rotate(72deg); animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
  69%  { transform: rotate(-34deg); }
  76%  { transform: rotate(-34deg); animation-timing-function: cubic-bezier(.3, 0, .2, 1.18); }
  100% { transform: rotate(0deg); }
}
@keyframes cvm-clunk {
  0%, 100% { transform: scale(1); }
  30%      { transform: scale(.955); }
}
@keyframes cvm-sheen {
  from { transform: translateX(0); }
  to   { transform: translateX(150px); }
}
@keyframes cvm-flash {
  0%   { opacity: 0; transform: scale(.3); }
  20%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.7); }
}
/* the light runs once round the bars in the first 1.8 s of every 10 s */
@keyframes cvm-sweep {
  0%   { opacity: 0; transform: rotate(0deg); }
  2%   { opacity: 1; }
  16%  { opacity: 1; }
  18%  { opacity: 0; transform: rotate(360deg); }
  100% { opacity: 0; transform: rotate(360deg); }
}
/* ...and the index answers as it gets back to the top */
@keyframes cvm-pulse {
  0%, 15% { opacity: 0; transform: scale(.5); }
  19%     { opacity: .9; transform: scale(1); }
  32%     { opacity: 0; transform: scale(1.4); }
  100%    { opacity: 0; transform: scale(1.4); }
}
@keyframes cvw-in {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .cv-logo, .cv-logo * { animation: none !important; }
}