/* ==========================================================================
   CC Price App - the opening screen of /price-app/ and the headlines below it.

   Module inc/ccx-papp-hero.php hands out the effect classes; this file holds
   the four shapes those classes need and nothing else. Every rule is scoped by
   the body class .ccph-papp, which the module sets on that page alone, or by
   the class of the shared resource block, .elementor-2932.

   Specificity. The page stylesheet Elementor writes names three classes
   (.elementor-2278 .elementor-element.elementor-element-xxxxxxx), so a rule
   that has to reach past one of its declarations names the body element as
   well and lands one step above it. Rules that only add something new stay at
   two names.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The badge above the opening line, wide screens

   The bar draws its shape as a background picture with transparent corners,
   and the box around it has square corners, so the rim of the glow would have
   traced a rectangle around a rounded bar. The radius costs nothing visually,
   the box has no background and no frame of its own, and it gives the ring the
   shape it should follow. 12px is the radius of the picture, measured on the
   file and scaled to the 64px the bar is rendered at.

   The bar for phones needs nothing: it carries a real frame and a 12px radius
   in the page data, and the ring inherits both.
   -------------------------------------------------------------------------- */
.ccph-papp [data-id="05cf039"] { border-radius: 12px; }

/* --------------------------------------------------------------------------
   2. Start Free Trial

   Two effects sit on this pill, and both read its box: the glint fills it, and
   the travelling light runs along its edge. The pill itself is a background
   picture that keeps its proportions, so the box was larger than the pill in
   both layouts - 13.6px of empty box to the right of it on wide screens, and
   6.3px above and below it on phones. The numbers below give the box the
   proportions of the picture (229 by 70), so box and pill are the same shape.

   Wide screens keep the height they had and lose the empty strip on the right;
   the picture is anchored at the left edge, so neither the label nor the orange
   circle moves by a pixel. Phones keep the width they had and lose the empty
   strips above and below.

   The radius is the one a pill has. The box had none, which would have left
   the glint in a rectangle and the light travelling through the corners.
   -------------------------------------------------------------------------- */
body.ccph-papp .elementor-element[data-id="bf06d30"] {
  border-radius: 999px;
  /* softer than the white of a filled orange pill: this one is dark navy, and
     the factory value washed the surface out */
  --sb-light: rgba(255, 255, 255, 0.22);
  --sb-edge: rgba(255, 255, 255, 0.72);
  --ccx-star-speed: 6s;
}
@media (min-width: 768px) {
  body.ccph-papp .elementor-element[data-id="bf06d30"] {
    --width: calc(64px * 229 / 70);   /* 209.4px, the picture at 64px height */
  }
}
@media (max-width: 767px) {
  body.ccph-papp .elementor-element[data-id="bf06d30"] {
    --min-height: calc(168px * 70 / 229);   /* 51.4px, the picture at 168px width */
  }
}

/* --------------------------------------------------------------------------
   3. Documentation

   A text link with an arrow, which the site wide rule for .elementor-button
   had been treating as a button: the pointer glint filled a 159 by 20 box that
   has neither fill nor frame, and the approach rim drew a bright rectangle
   around the two words. Both pseudo elements are switched off here, and
   assets/ccx-papp-hero.js takes the classes off the element as well, so the
   shared pointer loop stops writing to it. The stylesheet alone would be
   enough to make it look right; the script is what keeps it out of the loop.

   The class .ccph-plainlink is written by the script. Naming it here as well
   as the element id means the rules hold from the first frame, before any
   script has run.
   -------------------------------------------------------------------------- */
.ccph-papp [data-id="37e5b6c"] .elementor-button::before,
.ccph-papp [data-id="37e5b6c"] .elementor-button::after,
.ccph-plainlink::before,
.ccph-plainlink::after { display: none !important; }

/* Both effect classes clip their host and open a stacking context of their
   own. Neither is wanted on a line of text, and the arrow leans out of the box
   on hover. */
.ccph-papp [data-id="37e5b6c"] .elementor-button,
.ccph-plainlink { overflow: visible !important; isolation: auto !important; }

/* Anything either effect may already have injected before the script had its
   turn. Hidden rather than removed, so a repaint cannot show it for a frame. */
.ccph-papp [data-id="37e5b6c"] .elementor-button > .ccx-starborder__b,
.ccph-papp [data-id="37e5b6c"] .elementor-button > .ccx-starborder__t,
.ccph-papp [data-id="37e5b6c"] .elementor-button > .mmrb-glowcard__edge,
.ccph-papp [data-id="37e5b6c"] .elementor-button > .mmrb-glowcard__fill,
.ccph-plainlink > .ccx-starborder__b,
.ccph-plainlink > .ccx-starborder__t,
.ccph-plainlink > .mmrb-glowcard__edge,
.ccph-plainlink > .mmrb-glowcard__fill { display: none !important; }

/* What is left is a plain link. The resting look is the one the page data
   gives it, white at 76 percent with the arrow at 56; the pointer brings the
   brand orange and a full arrow, and the arrow leans two pixels the way it
   points. */
body.ccph-papp .elementor-element[data-id="37e5b6c"] .elementor-button {
  transition: color 0.2s ease-out;
}
body.ccph-papp .elementor-element[data-id="37e5b6c"] .elementor-button .elementor-button-icon svg {
  transition: transform 0.2s ease-out;
}
body.ccph-papp .elementor-element[data-id="37e5b6c"] .elementor-button:hover,
body.ccph-papp .elementor-element[data-id="37e5b6c"] .elementor-button:focus-visible {
  color: #ff8e2b;
}
body.ccph-papp .elementor-element[data-id="37e5b6c"] .elementor-button:hover .elementor-button-icon svg path,
body.ccph-papp .elementor-element[data-id="37e5b6c"] .elementor-button:focus-visible .elementor-button-icon svg path {
  stroke: currentColor;
  stroke-opacity: 1;
}
body.ccph-papp .elementor-element[data-id="37e5b6c"] .elementor-button:hover .elementor-button-icon svg,
body.ccph-papp .elementor-element[data-id="37e5b6c"] .elementor-button:focus-visible .elementor-button-icon svg {
  transform: translateX(2px);
}
@media (prefers-reduced-motion: reduce) {
  body.ccph-papp .elementor-element[data-id="37e5b6c"] .elementor-button,
  body.ccph-papp .elementor-element[data-id="37e5b6c"] .elementor-button .elementor-button-icon svg {
    transition: none;
  }
  body.ccph-papp .elementor-element[data-id="37e5b6c"] .elementor-button:hover .elementor-button-icon svg,
  body.ccph-papp .elementor-element[data-id="37e5b6c"] .elementor-button:focus-visible .elementor-button-icon svg {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   4. Accent words

   Four of the large headlines hold one colour in the page data, so the word
   that is to run orange gets a span in the browser (assets/ccx-papp-hero.js).
   Two of the four already have a colour rule for a span in their page
   stylesheet and arrive orange on their own; the other two are named here.

   The colour is also what a reader sees when the effect layer never runs: the
   shine paints from a variable of its own, and under reduced motion it hands
   the letters back to the colour underneath.
   -------------------------------------------------------------------------- */
.ccph-papp [data-id="82fba20"] .elementor-heading-title span.ccph-accent,
.ccph-papp [data-id="460cdb1"] .elementor-heading-title span.ccph-accent { color: #ff8e2b; }

/* --------------------------------------------------------------------------
   5. Section eyebrows

   The two pills of the problem and solution block take the rim through the
   module and need no shape of their own: they carry a real frame and a 55px
   radius in the page data. What is added here is a slow breath of that frame,
   the reading the badge pills of the reference blocks have, in the warm accent
   of this page rather than the green those use, because green is the status
   colour of the site and these two are section labels.

   The animation names the box itself rather than a wrapper: on these two the
   frame belongs to the container. A CSS animation outranks a normal
   declaration, so the frame colour the page data sets is picked up as the
   resting value of the keyframes and written back at both ends.
   -------------------------------------------------------------------------- */
.ccph-papp [data-id="f228b47"],
.ccph-papp [data-id="39a46d8"] {
  animation: ccph-pill-breath 3.6s ease-in-out infinite;
}
.ccph-papp [data-id="39a46d8"] { animation-delay: 1.2s; }

@keyframes ccph-pill-breath {
  0%, 100% {
    border-color: rgb(51, 51, 51);
    box-shadow: 0 0 0 0 rgba(255, 142, 43, 0);
  }
  50% {
    border-color: rgba(255, 142, 43, 0.42);
    box-shadow: 0 0 14px 0 rgba(255, 142, 43, 0.16);
  }
}

/* The third eyebrow is a plain orange line with no pill around it, so it gets
   the mark the site puts in front of a badge label instead: a small dot that
   breathes. Drawn on the line itself, so the page data stays as it is; the
   line is centred, and the dot moves with it. */
.ccph-papp [data-id="48836cf"] .elementor-heading-title::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff8e2b;
  box-shadow: 0 0 8px rgba(255, 142, 43, 0.75);
  vertical-align: middle;
  position: relative;
  top: -1px;
  margin-right: 8px;
  animation: ccph-dot-pulse 2.4s ease-in-out infinite;
}
@keyframes ccph-dot-pulse {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.82); }
}

@media (prefers-reduced-motion: reduce) {
  .ccph-papp [data-id="f228b47"],
  .ccph-papp [data-id="39a46d8"],
  .ccph-papp [data-id="48836cf"] .elementor-heading-title::before { animation: none; }
}


/* --------------------------------------------------------------------------
   6. The headline shine, louder

   The reading on this page was that the light is there but nobody sees it.
   Two reasons, and both are addressed here for this page only.

   First the light itself. The shared gradient runs from the base colour of
   the line straight up to a brighter one and back, and the ramp is about as
   wide as the whole line - so at any moment the line is a shade brighter on
   one side than on the other, and there is no edge anywhere for the eye to
   catch. The gradient below dips BELOW the base colour on both flanks before
   it peaks. That is what a reflection on metal does, it is the same reasoning
   the client logos on the home page already use, and it gives the light a
   front and a back edge, which is what makes it read as something travelling
   rather than as a slow change of brightness. The band is narrower as well,
   roughly half a line rather than a whole one.

   Second the rhythm. A pass took 3.2 seconds and the pause after it 4.8 to
   6.6, so a reader looking at a section had to wait up to ten seconds for the
   light. The pass is shorter here and the pause is set to 3.4 seconds by
   assets/ccx-papp-hero.js, which means a light run starts every three and a
   half seconds: looking at any section of this page shows one. The longest
   pass is the coloured half at 0.55 + 2.4 = 2.95 seconds and stays clear of
   the pause, so a run is never cut off in the middle.

   Specificity. The base gradient in mm-rb.css names its class six times with
   !important, the two timing rules in cc-fx.css three and four times, also
   with !important. Every rule below names one class more than the one it has
   to settle. The contour words are excluded by name: they carry the same
   classes by the time the second round of assignment is done, and a gradient
   on them would fill the letters that are meant to stay hollow.
   -------------------------------------------------------------------------- */

/* Brighter peak, and a flank that dips under the base colour. */
.ccph-papp .mmrb-gradtext.ccx-gt-silver {
  --gt-shine: #ffffff;
  --gt-dim: #8b95ad;
}
.ccph-papp .mmrb-gradtext.ccx-gt-orange {
  --gt-shine: #ffd9ac;
  --gt-dim: #b0601a;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ccph-papp .mmrb-gradtext.mmrb-gradtext.mmrb-gradtext.mmrb-gradtext.mmrb-gradtext.mmrb-gradtext.ccx-gt-head:not(.ccx-outline) {
    background-image: linear-gradient(100deg,
      var(--gt-base, currentColor) 0%,
      var(--gt-base, currentColor) 30%,
      var(--gt-dim, var(--gt-base, currentColor)) 41%,
      var(--gt-shine, #ffffff) 50%,
      var(--gt-dim, var(--gt-base, currentColor)) 59%,
      var(--gt-base, currentColor) 70%,
      var(--gt-base, currentColor) 100%) !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .ccph-papp .mmrb-gradtext.ccx-gt-head.ccx-gt-run {
    animation-duration: 2.4s !important;
    animation-delay: 0.12s !important;
  }
  .ccph-papp .elementor-heading-title span.mmrb-gradtext.ccx-gt-head.ccx-gt-run {
    animation-delay: 0.55s !important;
  }
}

/* --------------------------------------------------------------------------
   7. Marked phrases in the problem and solution block

   One phrase per paragraph, wrapped in the browser by
   assets/ccx-papp-hero.js. The paragraphs are grey at 16px, so the mark is
   the brand orange on a faint warm ground, the way a marker leaves a phrase
   standing in a page of text.

   Deliberately not a line under the words: these paragraphs hold no links,
   and an underlined phrase in the brand colour reads as one, which invites a
   click that leads nowhere.

   The ground is a background on an inline box, so it costs no height: the
   small padding widens the painted area without moving the line, the negative
   margin takes the extra width back off the flow, and the clone keeps the
   ground whole on every line a phrase is broken across.
   -------------------------------------------------------------------------- */
.ccph-papp .ccph-mark {
  color: #ff8e2b;
  background-color: rgba(255, 142, 43, 0.13);
  border-radius: 3px;
  padding: 0.06em 0.22em;
  margin: 0 -0.1em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}


/* --------------------------------------------------------------------------
   8. The wire between the two eyebrow pills

   Geometry and reasoning are in assets/ccx-papp-hero.js. Here: the look of
   the line, the spark on it, and the flare of the two pills as it passes.

   The block keeps a fixed piece of line art in its left margin as a
   background picture. It is switched off only while the drawn wire really
   stands, which the script signals with .ccph-rail-on. The rule needs five
   class names to settle the one Elementor writes for the block, which has
   four.
   -------------------------------------------------------------------------- */
.ccph-papp .ccph-rail-on.ccph-rail-on.ccph-rail-on.ccph-rail-on {
  background-image: none;
}

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

/* The resting wire: silver, faint enough to read as a distance rather than
   as a rule down the block. Same weight as the line between the setup
   steps. */
.ccph-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, with the halo drawn as
   a second, wider and weaker stroke underneath rather than as a blur filter,
   which would have to be recomputed on every frame. */
.ccph-rail__halo,
.ccph-rail__beam {
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--ccph-dash, 0) var(--ccph-gap, 99999);
  stroke-dashoffset: var(--ccph-from, 0);
  animation: ccph-rail-run var(--ccph-cycle, 4s) linear infinite;
  animation-play-state: paused;
}
.ccph-rail__halo {
  stroke: rgba(255, 142, 43, 0.20);
  stroke-width: 9;
}
.ccph-rail__beam {
  stroke: #ffcf9e;
  stroke-width: 2.4;
}
@keyframes ccph-rail-run {
  from { stroke-dashoffset: var(--ccph-from, 0); }
  to   { stroke-dashoffset: var(--ccph-to, 0); }
}

.ccph-rail-live .ccph-rail__halo,
.ccph-rail-live .ccph-rail__beam,
.ccph-rail-live [data-id="f228b47"]::after,
.ccph-rail-live [data-id="39a46d8"]::after {
  animation-play-state: running;
}

/* The two pills flare as the spark reaches them: the problem pill as it
   leaves, the solution pill as it arrives. The script writes the moment into
   --ccph-t as a delay and the turn is as long as the pass, so the two never
   drift apart. The pills keep their slow breath underneath (section 5); this
   layer only adds the short bloom. */
.ccph-papp .ccph-rail-on [data-id="f228b47"],
.ccph-papp .ccph-rail-on [data-id="39a46d8"] { position: relative; }

.ccph-papp .ccph-rail-on [data-id="f228b47"]::after,
.ccph-papp .ccph-rail-on [data-id="39a46d8"]::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  box-shadow:
    0 0 0 1.4px rgba(255, 178, 110, 0.65),
    0 0 22px 3px rgba(255, 142, 43, 0.34);
  animation: ccph-pill-flare var(--ccph-cycle, 4s) linear infinite;
  animation-delay: var(--ccph-t, 0s);
  animation-play-state: paused;
}
@keyframes ccph-pill-flare {
  0%   { opacity: 0;    transform: scale(1); }
  4%   { opacity: 0.95; transform: scale(1); }
  22%  { opacity: 0;    transform: scale(1.06); }
  100% { opacity: 0;    transform: scale(1.06); }
}

/* For a reader who asked the system for less movement the wire is drawn in
   full and stands still, and the pills keep their frame without the bloom. A
   pass that cannot travel would otherwise leave a solid orange rule down the
   margin. */
@media (prefers-reduced-motion: reduce) {
  .ccph-rail__halo,
  .ccph-rail__beam {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    animation: none;
  }
  .ccph-rail__halo { opacity: 0.5; }
  .ccph-rail__beam { opacity: 0.55; }
  .ccph-papp .ccph-rail-on [data-id="f228b47"]::after,
  .ccph-papp .ccph-rail-on [data-id="39a46d8"]::after { animation: none; opacity: 0; }
}