/* ====================================================================
 * IDEA CARDS (.ccidea-card)
 *
 * Three cards under "Three ideas we would bring to a production floor."
 * on the home page, and the same component again on /process-tools/.
 * Each card holds a round icon, a headline, a paragraph, a row of step
 * chips and a ghost numeral.
 *
 * WHY THE CLASS NAMES ARE REPEATED
 * The look of the cards comes from the custom CSS of the section they
 * sit in, and Elementor writes that out with four class names in front
 * of every selector:
 *
 *   .elementor-8073 .elementor-element.elementor-element-788cf5ff .ccidea-card
 *
 * A rule here that only names .ccidea-card once carries less weight and
 * would lose, no matter which file is printed later. Every rule below
 * that has to correct a value from that stylesheet therefore repeats its
 * class until it is one step above it. Rules that add something new,
 * which is most of this file, are written plainly.
 * ==================================================================== */

/* The card answers the pointer with a light that follows it, handed out
 * in inc/ccx-ideas.php with the soft values from assets/cc-fx.css. The
 * area glow that comes with them is taken down further here: it lies
 * under a full paragraph of body text, and at its usual strength the
 * whole card lifts and the text loses contrast while the pointer rests
 * on it. What stays at full strength is the pool of light around the
 * pointer, which is the part a visitor is meant to notice. */
.ccidea-card.mmrb-glowcard {
  --gc-soft: hsl(212 92% 62% / 1.5%);
}
/* The pool itself is drawn 300px wide by the effect layer, which is the
 * right size for the wide surfaces it was built for and almost as wide
 * as this card, so it arrives as an even wash instead of a light that
 * moves. Here it is the size of the icon circle times three, which
 * leaves the corners of the card dark and makes the movement readable.
 * The second layer is the area glow and keeps the values above. */
.ccidea-card > .mmrb-glowcard__fill {
  background:
    radial-gradient(circle 165px at var(--mm-x, 50%) var(--mm-y, 50%), var(--gc-spot), transparent 100%),
    radial-gradient(ellipse 120% 120% at 50% 50%, var(--gc-soft), transparent 75%);
}

.ccidea-card {
  /* Tuning in one place. The numeral is placed by its box, while what a
   * reader sees is the digits inside that box, and the two are not the
   * same: at 104px the digits start 15px below the top of their box, so
   * a top inset of 2px puts them 18px below the upper edge of the card.
   * Sideways the box follows the digits closely, which is why the inset
   * and the gap are almost the same number. Every measured value is in
   * report/r8-ideas.md. */
  --ccidea-num-size: 104px;
  --ccidea-num-top: 2px;
  --ccidea-num-right: 23px;
  --ccidea-num-opacity: 0.72;

  /* The step chips and the icon share one rhythm: the icon lights up,
   * then the light walks the chips one by one, then the card rests for
   * about five seconds. */
  --ccidea-cycle: 7.2s;
  --ccidea-step: 0.42s;
  --ccidea-card-i: 0;

  /* The gap the section stylesheet leaves between two chips, which is
   * also the length of the line drawn between them. It is read here and
   * not changed: a wider gap moves the point at which the row wraps, and
   * on the live page the third card would fall from one line of chips
   * into two, which makes every card in the row taller. */
  --ccidea-chip-gap: 8px;

  /* The rim aura of the glow card. The three cards stand 24px apart, so
   * the aura stops in the middle of that gap instead of reaching into
   * the neighbour. */
  --gc-pad: 20px;
}
.ccidea-n1 { --ccidea-card-i: 0; }
.ccidea-n2 { --ccidea-card-i: 1; }
.ccidea-n3 { --ccidea-card-i: 2; }

/* The first card ends on a one, and a one carries a good deal of white
 * space of its own on the right. Aligned by the box, its digits would
 * stand 14px further from the edge than those of the other two cards.
 * The inset is reduced by that amount so all three numerals end on the
 * same line. */
.ccidea-n1 { --ccidea-num-right: 9px; }

/* --------------------------------------------------------------------
 * THE CARD FRAME
 *
 * The section stylesheet clips the card, which was the only way to keep
 * the ghost numeral from hanging out of it. The numeral now sits inside
 * the frame by itself (see below), and nothing else on the card reaches
 * past its edge, while the aura of the rim glow lies 20px outside it and
 * was being cut off at the frame. So the clip goes.
 * -------------------------------------------------------------------- */
.ccidea-card.ccidea-card.ccidea-card.ccidea-card.ccidea-card {
  overflow: visible;
}

/* --------------------------------------------------------------------
 * THE GHOST NUMERAL
 *
 * It was meant to sit at the right edge of the card. It sat at the left
 * edge with its upper third cut off, and Elementor is the reason.
 *
 * Every container of the page carries a ::before for its background
 * overlay, and frontend.css gives that pseudo element a full set of box
 * values:
 *
 *   left: calc(0px - var(--border-left-width));
 *   width: max(100% + var(--border-left-width) + var(--border-right-width), 100%);
 *   height: max(...);  border-style / border-color / border-*-width
 *
 * The section stylesheet sets only `right` and `top` on the same pseudo.
 * With `left` and `width` both present, `right` is ignored, the box is
 * as wide as the whole card, and the digits are drawn at its left end,
 * behind the icon and the headline. `top: -46px` then pushed them up out
 * of the clipped frame, which took off the upper 19px.
 *
 * The fix is to hand the box back: no left, no bottom, no width, no
 * height, and no border, because those border values would now draw a
 * hairline frame around the shrunken box. What is left is a box that is
 * as wide as its digits and sits in the corner it was meant for.
 *
 * Where it sits: the top right, in the band beside the round icon. That
 * band is empty across the full width of the card, so the digits stand
 * clear of every line of text, which is what the ghost numerals of the
 * reference blocks do as well.
 *
 * The fill is a gradient from top to bottom instead of one flat value.
 * The upper edge is what makes the numeral readable on the card, the
 * lower edge keeps it from competing with the headline underneath, and
 * the whole thing brightens a little while the pointer is on the card.
 * -------------------------------------------------------------------- */
.ccidea-card.ccidea-card.ccidea-card.ccidea-card.ccidea-n1::before,
.ccidea-card.ccidea-card.ccidea-card.ccidea-card.ccidea-n2::before,
.ccidea-card.ccidea-card.ccidea-card.ccidea-card.ccidea-n3::before {
  top: var(--ccidea-num-top);
  right: var(--ccidea-num-right);
  left: auto;
  bottom: auto;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  font-size: var(--ccidea-num-size);
  line-height: 1;
  opacity: var(--ccidea-num-opacity);
  mix-blend-mode: normal;
  transition: opacity 0.35s ease-out;
  background-image: linear-gradient(180deg,
    rgba(255, 255, 255, 0.115) 0%,
    rgba(255, 255, 255, 0.085) 42%,
    rgba(255, 255, 255, 0.036) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.ccidea-card:hover.ccidea-card.ccidea-card.ccidea-card.ccidea-n1::before,
.ccidea-card:hover.ccidea-card.ccidea-card.ccidea-card.ccidea-n2::before,
.ccidea-card:hover.ccidea-card.ccidea-card.ccidea-card.ccidea-n3::before {
  opacity: 1;
}

/* --------------------------------------------------------------------
 * THE SURFACE
 *
 * A card of this size with type in the upper half and chips at the foot
 * leaves a wide quiet area, and quiet areas on a dark background read as
 * empty rather than as calm. This lays a drawn texture into the lower
 * left corner and lets it fade out long before it reaches the text: one
 * pixel marks at four percent white, which is the weight the ghost
 * numerals use, so nothing new enters the palette.
 *
 * Each of the three cards gets its own pattern, and all three are the
 * same drawing in three states: punched dots, ruled lines, the full
 * grid. Nothing runs diagonally, because the light waves in the
 * background of this part of the page already do, and a second set of
 * diagonals on top of them reads as noise. Should the variation ever be
 * unwanted, giving all three the pattern of one card is a two line
 * change.
 *
 * The layer sits at z-index 0, which is under the content of the card
 * (the section stylesheet lifts every child to 1) and above the card
 * background.
 * -------------------------------------------------------------------- */
.ccidea-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.8;
  transition: opacity 0.35s ease-out;
  background-image: radial-gradient(rgba(255, 255, 255, 0.13) 1px, transparent 1.2px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(125% 96% at 0% 100%, #000 0%, rgba(0, 0, 0, 0.6) 32%, transparent 68%);
  mask-image: radial-gradient(125% 96% at 0% 100%, #000 0%, rgba(0, 0, 0, 0.6) 32%, transparent 68%);
}
.ccidea-n2::after {
  background-image: repeating-linear-gradient(0deg,
    rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 13px);
  background-size: auto;
}
.ccidea-n3::after {
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 21px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 21px);
  background-size: auto;
}
.ccidea-card:hover::after { opacity: 1; }

/* --------------------------------------------------------------------
 * THE ICON IN ITS CIRCLE
 *
 * The picture sat two pixels above the centre of the circle. The circle
 * is the widget box itself, 52px across and centred through flexbox, and
 * the spacing below the icon was entered as a bottom margin on the
 * widget. Elementor puts a widget margin on the inner container, so
 * those 4px landed inside the circle, made the flex child 30px tall
 * instead of 26px and pushed the picture up by half of it.
 *
 * The margin comes off. The gap below the circle is unchanged: it comes
 * from the 16px the card puts between its children, and the widget box
 * keeps its fixed height either way.
 * -------------------------------------------------------------------- */
.ccidea-ico.ccidea-ico.ccidea-ico.ccidea-ico.ccidea-ico > .elementor-widget-container {
  margin: 0;
}

/* The circle answers the pointer with its own rim through the effect
 * layer. On top of that it carries the beat of the card: a short pulse
 * at the start of every cycle, just before the light starts walking the
 * chips, so the row below reads as the continuation of it. */
.ccidea-ico {
  position: relative;
}
.ccidea-ico::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0);
  pointer-events: none;
}
.ccidea-card.ccidea-live .ccidea-ico::after {
  animation: ccidea-ico-pulse var(--ccidea-cycle) ease-out infinite;
  animation-delay: calc(var(--ccidea-card-i) * 0.55s);
}
@keyframes ccidea-ico-pulse {
  0%   { border-color: rgba(255, 255, 255, 0);    box-shadow: 0 0 0 0 rgba(126, 178, 255, 0); }
  4%   { border-color: rgba(170, 205, 255, 0.45); box-shadow: 0 0 13px 0 rgba(126, 178, 255, 0.22); }
  16%  { border-color: rgba(255, 255, 255, 0);    box-shadow: 0 0 0 0 rgba(126, 178, 255, 0); }
  100% { border-color: rgba(255, 255, 255, 0);    box-shadow: 0 0 0 0 rgba(126, 178, 255, 0); }
}

/* --------------------------------------------------------------------
 * THE STEP CHIPS
 *
 * The row names the steps of the idea in the order they happen, so it is
 * read as a sequence and is now drawn as one: neighbouring chips are
 * joined by a hairline, and a light walks the chain from the first step
 * to the last once per cycle.
 *
 * Three details keep it honest. The hairline is only drawn between chips
 * that ended up on the same line, which the stylesheet cannot know and
 * assets/ccx-ideas.js marks. A chip never breaks into two lines, so
 * every link of the chain is one shape; the widest chip on the page is
 * 152px against a card that offers 316px even on a phone. And the gap
 * between two chips is left exactly as it is, because it decides where
 * the row wraps.
 *
 * The row is pushed to the foot of the card. The cards of a row are
 * equally tall because they are grid items, but their paragraphs are
 * not, so the chip rows used to end at three different heights.
 * -------------------------------------------------------------------- */
.ccidea-card .ccchips.ccchips.ccchips {
  margin-top: auto;
}
.ccidea-card .ccstep {
  position: relative;
  white-space: nowrap;
}

/* Index of the chip inside its row, for the delay of the walking light.
 * Six covers every row on the page, the longest holds four. */
.ccidea-card .ccstep:nth-of-type(1) { --ccidea-chip-i: 0; }
.ccidea-card .ccstep:nth-of-type(2) { --ccidea-chip-i: 1; }
.ccidea-card .ccstep:nth-of-type(3) { --ccidea-chip-i: 2; }
.ccidea-card .ccstep:nth-of-type(4) { --ccidea-chip-i: 3; }
.ccidea-card .ccstep:nth-of-type(5) { --ccidea-chip-i: 4; }
.ccidea-card .ccstep:nth-of-type(6) { --ccidea-chip-i: 5; }

/* The link to the chip before it, drawn into the 12px gap. */
.ccidea-card .ccstep.ccidea-linked::before {
  content: "";
  position: absolute;
  left: calc(var(--ccidea-chip-gap) * -1);
  top: 50%;
  width: var(--ccidea-chip-gap);
  height: 1px;
  background-image: linear-gradient(90deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.32) 50%,
    rgba(255, 255, 255, 0.08) 100%);
  opacity: 0.52;
  pointer-events: none;
}

.ccidea-card.ccidea-live .ccstep {
  animation: ccidea-chip-lit var(--ccidea-cycle) ease-out infinite;
  animation-delay: calc(var(--ccidea-card-i) * 0.55s + var(--ccidea-chip-i, 0) * var(--ccidea-step));
}
.ccidea-card.ccidea-live .ccstep.ccidea-linked::before {
  animation: ccidea-link-lit var(--ccidea-cycle) ease-out infinite;
  animation-delay: calc(var(--ccidea-card-i) * 0.55s + (var(--ccidea-chip-i, 0) - 0.5) * var(--ccidea-step));
}
/* The resting values are the ones the section stylesheet gives a chip.
 * They have to be named here as well: an animation that runs without a
 * pause is in charge of these properties the whole time. */
@keyframes ccidea-chip-lit {
  0% {
    border-color: rgba(255, 255, 255, 0.12);
    background-color: rgba(255, 255, 255, 0.05);
    color: #C9D0E0;
    box-shadow: 0 0 0 0 rgba(126, 178, 255, 0);
  }
  4% {
    border-color: rgba(166, 202, 255, 0.5);
    background-color: rgba(150, 190, 255, 0.13);
    color: #EAF1FF;
    box-shadow: 0 0 14px 0 rgba(126, 178, 255, 0.2);
  }
  17%, 100% {
    border-color: rgba(255, 255, 255, 0.12);
    background-color: rgba(255, 255, 255, 0.05);
    color: #C9D0E0;
    box-shadow: 0 0 0 0 rgba(126, 178, 255, 0);
  }
}
/* The link brightens half a step before the chip it leads to, so the
 * light reads as travelling and not as three lamps switching on. */
@keyframes ccidea-link-lit {
  0%        { opacity: 0.52; }
  5%        { opacity: 1; }
  18%, 100% { opacity: 0.52; }
}

/* --------------------------------------------------------------------
 * BREAKPOINTS
 *
 * The section stylesheet resizes the numeral at 1024px and drops it
 * altogether below 768px. The first no longer applies, the card is
 * wider there rather than narrower. The second was a way around the
 * clipping and is no longer needed either, so the numeral comes back on
 * the phone at a size that fits the band beside the smaller icon.
 * -------------------------------------------------------------------- */
@media (max-width: 767px) {
  .ccidea-card {
    --ccidea-num-size: 76px;
    --ccidea-num-top: 4px;
    --ccidea-num-right: 15px;
  }
  .ccidea-n1 { --ccidea-num-right: 5px; }
  .ccidea-card.ccidea-card.ccidea-card.ccidea-card.ccidea-n1::before { content: "01"; }
  .ccidea-card.ccidea-card.ccidea-card.ccidea-card.ccidea-n2::before { content: "02"; }
  .ccidea-card.ccidea-card.ccidea-card.ccidea-card.ccidea-n3::before { content: "03"; }
  /* The three cards stand under each other with 16px between them. */
  .ccidea-card { --gc-pad: 12px; }
}

/* --------------------------------------------------------------------
 * REDUCED MOTION
 *
 * Nothing moves. The card keeps its texture, its numeral and the chain
 * between the chips, all of which are drawn and not animated.
 * -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ccidea-card .ccstep,
  .ccidea-card .ccstep::before,
  .ccidea-ico::after {
    animation: none;
  }
  .ccidea-card::after,
  .ccidea-card::before {
    transition: none;
  }
}