/* ── the lockup, moving ────────────────────────────────────────────────
   Sizes match what build_brand set on the image it replaces, so swapping one
   for the other never reflows the header. (Written without the literal tag
   name: stage 4 regexes image tags straight out of the raw HTML, comments
   included, and reported every page as having one with no alt text.) */
.brandsvg{display:block;height:62px;width:auto;flex:none;overflow:visible}
.brand.lg .brandsvg{height:94px}
@media(max-width:900px){.brandsvg{height:54px}.brand.lg .brandsvg{height:82px}}
@media(max-width:560px){.brandsvg{height:46px}.brand.lg .brandsvg{height:70px}}

/* The sheen. A soft band of white at low alpha, clipped to the Q, crossing
   once and then waiting — a reflection catching the edge, not a shimmer.

   The travel is the Q's OWN width, not the canvas width. The first version
   swept the full 1166-unit viewBox while the clip is a Q occupying x 18..191,
   so the reflection was on screen for about a third of a second in every six
   and a half, at an unpredictable moment. It now enters at the Q's left edge
   and leaves at its right, and the pause is the pause. */
.qsheen{animation:qsweep 7s cubic-bezier(.36,0,.2,1) infinite}
@keyframes qsweep{
  0%,4%{transform:translateX(-110px) skewX(-16deg)}
  26%{transform:translateX(215px) skewX(-16deg)}
  100%{transform:translateX(215px) skewX(-16deg)}
}
/* Each sphere breathes on its own beat, smallest first, so the arc reads as
   rising rather than pulsing as one block. */
.qsph{transform-box:fill-box;transform-origin:center;
  animation:qbreathe 4.2s ease-in-out infinite;
  animation-delay:calc(var(--i) * -0.42s)}
@keyframes qbreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.075)}}

/* Hover: the arc lifts in sequence, largest last, and the ember warms.
   Pointer-driven only — it must never fire from a tap that was a scroll. */
@media(hover:hover) and (pointer:fine){
  .brand:hover .qsph{animation:none;
    transform:translateY(calc(var(--i) * -0.9px)) scale(calc(1 + var(--i) * 0.02));
    transition:transform .5s cubic-bezier(.16,1,.3,1);
    transition-delay:calc(var(--i) * 22ms)}
  .brand:hover .qsheen{animation-duration:2.2s}
}

/* The cursor: nine translucent spheres, each further behind than the last.
   A speed-driven version of this was tried and taken out again: brightening
   the head as the pointer moved turned it into a bright blob leading the
   cursor rather than a trail behind it. Fixed and faint is the brief. */
#qtrail{position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:0;
  transition:opacity .5s ease}
body.con #qtrail{opacity:1}
#qtrail i{position:absolute;top:0;left:0;display:block;border-radius:50%;
  will-change:transform;filter:blur(.3px);
  background:radial-gradient(circle at 32% 29%,
    rgba(245,210,176,.95) 0%, rgba(233,160,99,.8) 16%,
    rgba(201,122,60,.62) 46%, rgba(158,92,42,.4) 82%, rgba(90,50,20,.24) 100%)}
/* Over something clickable the trail brightens, which is the affordance the
   old ring carried and the only reason it earned its place. */
body.clg #qtrail i{filter:brightness(1.35)}
@media(hover:none),(pointer:coarse){#qtrail{display:none}}

@media(prefers-reduced-motion:reduce){
  .qsheen{display:none}
  .qsph{animation:none}
  .brand:hover .qsph{transform:none}
  #qtrail{display:none}
}