/* ==========================================================================
   CC Site FX - the client logo raster.
   Loads after ccfx-v3.css, so a rule here settles a tie inside the effect
   layer. Everything is scoped to .ccgrid, the raster on the home page, and
   therefore reaches the English and the German copy alike.
   ========================================================================== */

/* --------------------------------------------------------------------
   THE RIM, DRAWN INSIDE THE TILE

   The engine hangs its rim on a box that reaches --gc-pad past the element
   and lets the bloom fall outside. That is right for a card standing on its
   own and wrong here: the twenty tiles are opaque, they meet along hair
   lines a single pixel wide, and the grid clips at its own rounded corner.
   Light spilling out of a tile would be covered by whichever neighbour is
   painted after it and cut away completely along the outer edge, so the same
   pointer gesture would read differently from tile to tile.

   Pulling the box onto the tile and turning the bloom inwards fixes all of
   that at once, and it keeps the hair line raster, which is what this
   section is built on, exactly as it is. No tile needs a gap or a corner of
   its own.
   -------------------------------------------------------------------- */
.ccgrid .ccgrid-cell.mmrb-glowcard {
  --gc-pad: 0px;
}

/* Ring on the tile edge, then a short bloom inwards. The reach stops at
   14px: the tile carries 10px of padding, so the light stays off all but
   the very widest logos. */
.ccgrid .ccgrid-cell.mmrb-glowcard > .mmrb-glowcard__edge::before {
  box-shadow:
    inset 0 0 0 1px var(--gc-ring),
    inset 0 0 3px 0 hsl(var(--gc-h) var(--gc-s) var(--gc-l) / 55%),
    inset 0 0 8px 0 hsl(var(--gc-h) var(--gc-s) var(--gc-l) / 35%),
    inset 0 0 14px 0 hsl(var(--gc-h) var(--gc-s) var(--gc-l) / 22%);
}

/* Only the tile under the pointer lights up.

   The engine also lets a rim grow on anything within 150px of the pointer.
   Across a raster this dense every neighbour of the hovered tile sits one
   pixel away, so that preview would light half a row at once. Bound to
   :hover instead, one tile answers and the rest stay still. The fade is the
   engine's: a quarter second in, three quarters out. */
.ccgrid .ccgrid-cell.mmrb-glowcard:not(:hover) > .mmrb-glowcard__edge {
  opacity: 0;
}
.ccgrid .ccgrid-cell.mmrb-glowcard:hover > .mmrb-glowcard__edge {
  opacity: 1;
}

/* The spot that follows the pointer. The engine's pool is 300px wide, which
   is wider than a tile and would wash the whole of it evenly; at 120px it
   stays a moving spot. Both tints come from ccx-spot-soft and sit low
   enough that the logo does not brighten. */
.ccgrid .ccgrid-cell.mmrb-glowcard > .mmrb-glowcard__fill {
  background:
    radial-gradient(circle 120px at var(--mm-x, 50%) var(--mm-y, 50%), var(--gc-spot), transparent 100%),
    radial-gradient(ellipse 110% 110% at 50% 50%, var(--gc-soft), transparent 72%);
}

/* --------------------------------------------------------------------
   THE HIGHLIGHT, ONE CLOCK PER TILE

   The shared sweep slides the band across and straight back again, without
   a pause, and the raster handed every tile the same six second run with the
   offsets stepped along the row. Two logos were never lit at the same
   instant, but the light still travelled the wall as one ordered wave and
   the whole thing repeated identically every six seconds.

   Here the band rests off the left edge for the larger part of a cycle and
   then crosses once. At both ends of the run it stands clear of the picture,
   so the jump back to the start cannot be seen, and a tile reads as a single
   glint followed by a rest rather than a constant shimmer.

   Run times and offsets are in the block below, worked out by
   tools/r8-logogrid/make-gloss-timing.py. Four run times share the twenty
   tiles, five each, and all four divide into 168 seconds, so the raster
   returns to the same state after that. One pass over that super cycle
   therefore covers every state the wall will ever reach, which is what makes
   the figures below a limit rather than an average.
   -------------------------------------------------------------------- */
@keyframes ccx-logogrid-shine {
  0%, 62%  { background-position: 165% 0; }
  100%     { background-position: -65% 0; }
}

.ccgrid .ccgrid-cell .elementor-widget-image .elementor-widget-container.ccx-logogloss::after {
  animation-name: ccx-logogrid-shine;
}

/* Laid out so that no moment of the super cycle carries more than two lit
   tiles, with the closest pair of neighbours 1.56s apart. Read back out of
   the browser over three minutes, 1500 samples at 1440px: nothing lit 18.7%
   of the time, one tile 69.0%, two tiles 12.1%, three tiles twice, on the
   instant one sweep hands over to the next. A tile is lit over 4.8% of its
   own cycle. Regenerate with tools/r8-logogrid/make-gloss-timing.py. */
.ccgrid .ccgrid-cell:nth-child(1) .elementor-widget-image .elementor-widget-container{--ccx-gloss-speed:12.0s;--ccx-gloss-delay:4.44s;}
.ccgrid .ccgrid-cell:nth-child(2) .elementor-widget-image .elementor-widget-container{--ccx-gloss-speed:8.0s;--ccx-gloss-delay:8.86s;}
.ccgrid .ccgrid-cell:nth-child(3) .elementor-widget-image .elementor-widget-container{--ccx-gloss-speed:12.0s;--ccx-gloss-delay:8.49s;}
.ccgrid .ccgrid-cell:nth-child(4) .elementor-widget-image .elementor-widget-container{--ccx-gloss-speed:8.0s;--ccx-gloss-delay:1.86s;}
.ccgrid .ccgrid-cell:nth-child(5) .elementor-widget-image .elementor-widget-container{--ccx-gloss-speed:12.0s;--ccx-gloss-delay:0.0s;}
.ccgrid .ccgrid-cell:nth-child(6) .elementor-widget-image .elementor-widget-container{--ccx-gloss-speed:8.0s;--ccx-gloss-delay:4.92s;}
.ccgrid .ccgrid-cell:nth-child(7) .elementor-widget-image .elementor-widget-container{--ccx-gloss-speed:12.0s;--ccx-gloss-delay:3.78s;}
.ccgrid .ccgrid-cell:nth-child(8) .elementor-widget-image .elementor-widget-container{--ccx-gloss-speed:14.0s;--ccx-gloss-delay:7.53s;}
.ccgrid .ccgrid-cell:nth-child(9) .elementor-widget-image .elementor-widget-container{--ccx-gloss-speed:7.0s;--ccx-gloss-delay:5.51s;}
.ccgrid .ccgrid-cell:nth-child(10) .elementor-widget-image .elementor-widget-container{--ccx-gloss-speed:14.0s;--ccx-gloss-delay:3.53s;}
.ccgrid .ccgrid-cell:nth-child(11) .elementor-widget-image .elementor-widget-container{--ccx-gloss-speed:12.0s;--ccx-gloss-delay:0.52s;}
.ccgrid .ccgrid-cell:nth-child(12) .elementor-widget-image .elementor-widget-container{--ccx-gloss-speed:7.0s;--ccx-gloss-delay:5.03s;}
.ccgrid .ccgrid-cell:nth-child(13) .elementor-widget-image .elementor-widget-container{--ccx-gloss-speed:7.0s;--ccx-gloss-delay:8.03s;}
.ccgrid .ccgrid-cell:nth-child(14) .elementor-widget-image .elementor-widget-container{--ccx-gloss-speed:7.0s;--ccx-gloss-delay:3.03s;}
.ccgrid .ccgrid-cell:nth-child(15) .elementor-widget-image .elementor-widget-container{--ccx-gloss-speed:14.0s;--ccx-gloss-delay:8.2s;}
.ccgrid .ccgrid-cell:nth-child(16) .elementor-widget-image .elementor-widget-container{--ccx-gloss-speed:8.0s;--ccx-gloss-delay:1.47s;}
.ccgrid .ccgrid-cell:nth-child(17) .elementor-widget-image .elementor-widget-container{--ccx-gloss-speed:14.0s;--ccx-gloss-delay:1.53s;}
.ccgrid .ccgrid-cell:nth-child(18) .elementor-widget-image .elementor-widget-container{--ccx-gloss-speed:14.0s;--ccx-gloss-delay:5.53s;}
.ccgrid .ccgrid-cell:nth-child(19) .elementor-widget-image .elementor-widget-container{--ccx-gloss-speed:8.0s;--ccx-gloss-delay:5.58s;}
.ccgrid .ccgrid-cell:nth-child(20) .elementor-widget-image .elementor-widget-container{--ccx-gloss-speed:7.0s;--ccx-gloss-delay:3.51s;}