/* ====================================================================
 * PRICE APP PAGE (/price-app/)
 *
 * Three groups, one stylesheet, because they all answer the same note:
 * the parts of this page that already work should be pushed a little
 * further, and the parts that repeat themselves eleven times over should
 * stay quiet.
 *
 *   .ccpc-stage    the setup block. Holds the drawing that connects the
 *                  four numbered circles.
 *   .ccpc-num      one of those circles. Ring of light around it, a slow
 *                  breath in that ring, and a flare at the moment the
 *                  spark on the line reaches it.
 *   .ccpc-card     optional customisations and key features. Rim glow and
 *                  the soft interior spot, the same pair every other card
 *                  on the site wears, plus a ring on the round icon.
 *   .ccpc-add      additional features. Ten cards in a block: no glow,
 *                  only a lift under the pointer, a brighter frame and a
 *                  ring that appears while the pointer is on the card.
 *
 * All the ids live in inc/ccx-papp-cards.php and reach the elements as
 * these marker classes, so no selector here is tied to a post number and
 * the file works on the staging clone unchanged.
 * ==================================================================== */


/* --------------------------------------------------------------------
 * THE LINE BETWEEN THE STEPS
 *
 * The drawing is one absolutely positioned overlay across the block. It
 * is the first child, which puts it behind the steps: the overlay and
 * the step blocks are all positioned, so document order decides who
 * paints on top, and the line has to run under the circles rather than
 * across them. It takes no part in the flex layout of the block and adds
 * no height.
 *
 * Where the line goes is measured, not written down: three circles in a
 * row wide, two and one between 768 and 1024, four under each other on a
 * phone. assets/ccx-papp-cards.js has the reasoning.
 * -------------------------------------------------------------------- */
.ccpc-stage {
  --ccpc-cycle: 4.5s;
}

.ccpc-stage > .ccpc-rail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.ccpc-stage > .ccpc-rail--off {
  display: none;
}

/* The resting line. Silver where it starts, warming towards the orange
 * of the circles, and faint enough that it reads as a distance rather
 * than as a rule across the block. */
.ccpc-rail__base {
  stroke: rgba(215, 220, 232, 0.17);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The spark. One dash on an otherwise empty pattern: its gap holds the
 * whole line plus the dark stretch between two passes, so one turn of
 * the pattern is one turn of the animation and the loop closes without a
 * jump. Both numbers come from the script, which knows how long the line
 * turned out to be.
 *
 * The halo is the same dash drawn wider and weaker underneath. A blur
 * filter would have done the same thing and would have had to be
 * recomputed on every frame of the pass; a second stroke costs nothing.
 */
.ccpc-rail__halo,
.ccpc-rail__beam {
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--ccpc-dash, 0) var(--ccpc-gap, 99999);
  stroke-dashoffset: var(--ccpc-from, 0);
  animation: ccpc-run var(--ccpc-cycle) linear infinite;
  animation-play-state: paused;
}
.ccpc-rail__halo {
  stroke: rgba(255, 142, 43, 0.20);
  stroke-width: 9;
}
.ccpc-rail__beam {
  stroke: #ffcf9e;
  stroke-width: 2.4;
}

@keyframes ccpc-run {
  from { stroke-dashoffset: var(--ccpc-from, 0); }
  to   { stroke-dashoffset: var(--ccpc-to, 0); }
}

/* The pass runs while the block is on screen and holds its place when it
 * is not, so scrolling back does not drop the viewer into the middle of
 * a half finished sweep. */
.ccpc-stage.ccpc-live .ccpc-rail__halo,
.ccpc-stage.ccpc-live .ccpc-rail__beam,
.ccpc-stage.ccpc-live .ccpc-num .elementor-icon::before,
.ccpc-stage.ccpc-live .ccpc-num .elementor-icon::after {
  animation-play-state: running;
}


/* --------------------------------------------------------------------
 * THE NUMBERED CIRCLES
 *
 * The circle is drawn by the page as one picture: an orange disc of 64px
 * inside a box of 80, with a hairline ring on the outer edge of that box.
 * Both layers below sit exactly on that box, which puts the light on the
 * hairline ring instead of tight around the disc, and leaves the drawing
 * itself untouched.
 *
 * The box shadows never move, only opacity and scale do, so the two
 * layers stay on the compositor and the pass costs a repaint of the line
 * and nothing else.
 * -------------------------------------------------------------------- */
.ccpc-num .elementor-icon {
  position: relative;
  isolation: isolate;
}

/* the ring, and its slow breath */
.ccpc-num .elementor-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  box-shadow:
    0 0 0 1px rgba(255, 142, 43, 0.30),
    0 0 16px 1px rgba(255, 142, 43, 0.26),
    0 0 36px 5px rgba(255, 142, 43, 0.12);
  opacity: 0.62;
  animation: ccpc-breathe 3.8s ease-in-out infinite;
  animation-play-state: paused;
}
@keyframes ccpc-breathe {
  0%, 100% { opacity: 0.58; }
  50%      { opacity: 1; }
}

/* The flare. It opens once per pass, at the moment the spark reaches
 * this circle: the script writes that moment into --ccpc-t as a delay,
 * and the turn is as long as the pass, so the two never drift apart.
 *
 * A circle already taking light as the spark arrives reads as the spark
 * igniting it, so the delay is set a breath early rather than late. The
 * same reasoning stands behind the security timeline on the home page.
 */
.ccpc-num .elementor-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  box-shadow:
    0 0 0 2px rgba(255, 178, 110, 0.55),
    0 0 24px 5px rgba(255, 142, 43, 0.38);
  animation: ccpc-flare var(--ccpc-cycle) linear infinite;
  animation-delay: var(--ccpc-t, 0s);
  animation-play-state: paused;
}
@keyframes ccpc-flare {
  0%   { opacity: 0;    transform: scale(1); }
  3%   { opacity: 0.95; transform: scale(1); }
  18%  { opacity: 0;    transform: scale(1.4); }
  100% { opacity: 0;    transform: scale(1.4); }
}


/* --------------------------------------------------------------------
 * THE TWO CARD GROUPS WITH THE FULL TREATMENT
 *
 * Rim glow, soft interior spot and a ring on the round icon, handed out
 * by class name in inc/ccx-papp-cards.php. Only the reach of the aura is
 * set here.
 *
 * The default reach of 36px would put the aura of the outer cards past
 * the edge of the window on a phone, where the card sits 16px from it,
 * and a hidden layer out there still makes the page scrollable sideways.
 * 20px clears the widest row on a desktop and 14px clears the phone.
 * -------------------------------------------------------------------- */
.ccpc-card.mmrb-glowcard {
  --gc-pad: 20px;
}
.ccpc-cardicon.mmrb-glowcard {
  --gc-pad: 9px;
}

/* Round icon on a card: the picture is a circle of 64px and the box that
 * holds it is exactly that size, so the ring needs no correction of its
 * own. Named here all the same, because a later change to the icon size
 * has to stay a circle. */
.ccpc-cardicon.mmrb-glowcard {
  border-radius: 50%;
}


/* --------------------------------------------------------------------
 * THE OPTIONAL CUSTOMISATIONS, IN THE WARM COLOUR
 *
 * The four cards of that step sit inside the numbered setup block, and
 * everything else in there is orange: the four circles, the line between
 * them, the spark on it. The blue rim they used to carry made them read
 * as a separate group that had wandered in, so they take the accent of
 * the section they belong to. The five key feature cards further down
 * the page stand on their own and stay blue.
 *
 * The glow engine builds its ring and its interior spot out of one
 * colour triplet, so the hue is all that changes. The class is named
 * twice, which settles the blue of cc-fx.css whichever of the two
 * stylesheets a browser reads first.
 * -------------------------------------------------------------------- */
.ccpc-glow-orange.ccpc-glow-orange.mmrb-glowcard {
  --gc-h: 29;
  --gc-s: 100%;
  --gc-l: 58%;
}
/* The interior spot follows the pointer across the card. Warm light on a
 * navy card reads brighter than cold light of the same strength, so both
 * values sit a shade under the blue ones and the text on the card does
 * not lift as the pointer passes. */
.ccpc-glow-orange.ccpc-glow-orange.mmrb-glowcard.ccx-spot-soft {
  --gc-spot: hsl(29 100% 58% / 9%);
  --gc-soft: hsl(29 100% 58% / 3%);
}


/* --------------------------------------------------------------------
 * THE HAIRLINE ON THOSE FOUR CARDS
 *
 * Each of them carries a piece of line art as a background picture: a
 * hairline that comes out of a rounded corner on the left, runs right
 * under the icon and stops before the right edge of the card. It was the
 * one part of the card that never answered the pointer.
 *
 * It does now. A light rides along it under the pointer, warm, bright in
 * the middle and fading out to both sides. The pointer position comes
 * from the same shared loop that drives the rim glow: that loop writes
 * it onto the card as --mm-x as soon as the pointer is within reach and
 * marks the card .mmrb-near for as long as it stays there, so this costs
 * no second listener and it opens in step with the rim.
 *
 * --mm-x is measured from the left edge of the card and the strip starts
 * further in, so the offset of the strip comes back off it. Where the
 * strip lies is measured by assets/ccx-papp-cards.js and arrives as the
 * three variables below; the class is only set once those numbers really
 * stand, so a change to the picture in the page data cannot leave a
 * light floating on nothing.
 *
 * z-index: -1 puts the light over the background of the card and under
 * everything on it, which is where the hairline itself is: the light
 * passes behind the round icon exactly as the drawn line does. The card
 * opens a stacking context of its own through the glow class, so the
 * layer cannot slip out behind the card.
 * -------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .ccpc-optline::after {
    content: "";
    position: absolute;
    left: var(--ccpc-lx, 0px);
    top: var(--ccpc-ly, 0px);
    width: var(--ccpc-lw, 0px);
    height: 16px;
    margin-top: -8px;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    --ccpc-px: calc(var(--mm-x, -9999px) - var(--ccpc-lx, 0px));
    /* a tight bright core on the line, and a wider warm bloom around it */
    background:
      radial-gradient(22px 7px at var(--ccpc-px) 50%,
        rgba(255, 226, 197, 0.95), rgba(255, 178, 110, 0.35) 55%, rgba(255, 142, 43, 0) 100%),
      radial-gradient(70px 12px at var(--ccpc-px) 50%,
        rgba(255, 142, 43, 0.34), rgba(255, 142, 43, 0) 72%);
  }
  .ccpc-optline.mmrb-near::after { opacity: 1; }
}


/* --------------------------------------------------------------------
 * ADDITIONAL FEATURES
 *
 * Ten cards standing under each other. A rim glow on every one of them
 * would turn the lower third of the page into a light show, so they get
 * the quiet version: the card lifts a little under the pointer, its
 * frame brightens, and the ring around the icon only appears while the
 * pointer is on the card.
 *
 * The class is repeated to clear the frame colour the page builder
 * writes for each card by id. That rule carries three class names; five
 * settle it without an !important, which would also take the colour away
 * from anyone editing the card later.
 * -------------------------------------------------------------------- */
.ccpc-add {
  transition:
    transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 0.38s ease,
    background-color 0.38s ease;
}

/* The lift is held back while the card is still flying in: the entrance
 * owns the transform for those few hundred milliseconds, and two writers
 * on one property would make the card jump.
 *
 * A finger has no hover. On a touch screen the lift would stick to the
 * last card tapped, so the whole block is left to pointers that can
 * leave again. */
@media (hover: hover) {
  .ccpc-add.ccpc-add.ccpc-add.ccpc-add.ccpc-add:not(.is-pre):hover {
    transform: translateY(-4px);
    border-color: rgba(133, 168, 226, 0.42);
    background-color: rgba(216, 226, 255, 0.065);
  }
  .ccpc-add:hover .ccpc-addicon::after {
    opacity: 1;
  }
}

.ccpc-addicon {
  position: relative;
  isolation: isolate;
}
.ccpc-addicon::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  box-shadow:
    0 0 0 1px hsl(212 92% 64% / 0.42),
    0 0 14px 1px hsl(212 92% 64% / 0.30),
    0 0 28px 4px hsl(212 92% 64% / 0.14);
  transition: opacity 0.34s ease;
}


/* --------------------------------------------------------------------
 * NARROW SCREENS
 *
 * The circles stand under each other below 768px and the line between
 * them shrinks to the clear gap over each circle, which the script
 * measures. The ring loses a little of its reach so it does not run into
 * the paragraph above, and the aura of the cards is pulled in so the
 * page cannot be dragged sideways.
 * -------------------------------------------------------------------- */
@media (max-width: 767px) {
  .ccpc-card.mmrb-glowcard {
    --gc-pad: 14px;
  }
  .ccpc-num .elementor-icon::after {
    box-shadow:
      0 0 0 1px rgba(255, 142, 43, 0.30),
      0 0 12px 1px rgba(255, 142, 43, 0.24),
      0 0 26px 3px rgba(255, 142, 43, 0.10);
  }
  .ccpc-rail__halo { stroke-width: 7; }
}


/* --------------------------------------------------------------------
 * Without scripting there is no line and no ring at all: both arrive as
 * marker classes from the effect layer, so the page falls back to
 * exactly what it looked like before this round.
 *
 * For a visitor who asked the system for less movement the line is drawn
 * in full and the circles keep their ring, standing still. The spark is
 * weakened where it stands, because a pass that cannot travel would
 * otherwise leave a solid orange rule across the block.
 * -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ccpc-rail__halo,
  .ccpc-rail__beam {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
  .ccpc-rail__halo { opacity: 0.5; }
  .ccpc-rail__beam { opacity: 0.55; }
  .ccpc-stage.ccpc-live .ccpc-rail__halo,
  .ccpc-stage.ccpc-live .ccpc-rail__beam,
  .ccpc-stage.ccpc-live .ccpc-num .elementor-icon::before,
  .ccpc-stage.ccpc-live .ccpc-num .elementor-icon::after,
  .ccpc-num .elementor-icon::before,
  .ccpc-num .elementor-icon::after {
    animation: none;
  }
  .ccpc-num .elementor-icon::after { opacity: 0.8; }
  .ccpc-num .elementor-icon::before { opacity: 0; }
  .ccpc-add,
  .ccpc-addicon::after,
  .ccpc-optline::after { transition: none; }
}