/* ==========================================================================
   CC GLASS - a glass surface for the small interface parts

   A pill, a badge, a chip and the outlined button are all the same thing seen
   from the side: a small translucent plate lying on top of the page. Until now
   each of them drew that plate with a flat white gradient, which reads as a
   sticker rather than as glass, and which shows nothing at all of what lies
   behind it. This file gives them a real surface: the page behind the plate is
   blurred, its colour is deepened, and along the rim it is bent the way light
   bends when it leaves a thick edge.

   That last part is what makes it worth the trouble here. The opening screen
   of this page carries a field of points that moves under the pointer, and two
   further bands carry it as well. A plate lying on a moving field and bending
   it at the rim is alive in a way a printed gradient never is.

   HOW THE SURFACE IS BUILT

   Three layers, from the back forwards:

     1. the backdrop treatment, set on the host itself as backdrop-filter. In a
        browser that can refract it is a reference to an SVG filter, which
        assets/ccx-glass.js writes into the document; everywhere else it is a
        plain blur with a little saturation and lift, which is the frosted
        variant of the same idea.
     2. the fill, a faint sheen from the upper left to the lower right, drawn
        as a background image on the host. It is an image and not a colour on
        purpose: the badges pulse their background COLOUR in green, and a fill
        written as an image lets that pulse carry on underneath.
     3. the rim, an injected child element. A bright hair line along the top
        edge, a fainter ring all the way round, and a cool tint on the left
        against a warm one on the right, which is the cheapest honest way to
        show that a thick edge splits light into colours.

   WHY THE RIM IS A CHILD AND NOT A PSEUDO ELEMENT

   Every one of the five hosts has already spent its pseudo elements. The pill
   is an Elementor container, whose ::before draws the container background and
   has caught this project out twice before; the chip of the production path
   draws its chevron with ::after; the outlined button hands both of its own to
   the specular effect. A child element belongs to nobody else, and it takes
   the same z-index of minus one the travelling light uses, so it lies over the
   surface of the host and under its text.

   WHAT THIS FILE DOES NOT DO

   It does not lay anything out. Every host keeps the size, the padding, the
   radius and the position it had; this file only changes what the plate is
   made of. Nothing here names a page id or a data id either, so the same five
   classes can be handed to any element on any page that wants a glass plate.
   ========================================================================== */


/* --------------------------------------------------------------------------
   THE BASE

   .ccg-glass is the whole system. The variants below only move the knobs.

   isolation makes the host a stacking layer of its own, which is what lets the
   rim sit at minus one without slipping behind the host altogether. The
   outlined button already isolates itself for the travelling light; saying it
   twice costs nothing and keeps the base honest for hosts that do not.
   -------------------------------------------------------------------------- */
.ccg-glass {
  --ccg-blur: 1.6px;
  --ccg-sat: 1.4;
  --ccg-brt: 1.06;

  /* the sheen, top left to bottom right */
  --ccg-fill-a: rgba(255, 255, 255, 0.085);
  --ccg-fill-b: rgba(255, 255, 255, 0.015);

  /* the rim */
  --ccg-rim-top: rgba(255, 255, 255, 0.30);
  --ccg-rim-ring: rgba(255, 255, 255, 0.09);
  --ccg-prism-cool: rgba(150, 196, 255, 0.14);
  --ccg-prism-warm: rgba(255, 193, 140, 0.13);

  position: relative;
  isolation: isolate;
}

/* The fill. Four class names because the fill of the eyebrow pills is written
   in the page settings of this landing page, which reaches them with four of
   its own and which this module deliberately does not open. Written as an
   image so a host that animates its background colour keeps that animation. */
.ccg-glass.ccg-glass.ccg-glass.ccg-glass.ccg-glass {
  background-image: linear-gradient(112deg, var(--ccg-fill-a) 0%, var(--ccg-fill-b) 74%);
}

/* --------------------------------------------------------------------------
   THE BACKDROP, FROSTED

   Every browser that can treat a backdrop at all gets this. It is the floor of
   the system and it is also the whole of it in Firefox and in Safari, neither
   of which refracts a backdrop through an SVG filter even though both accept
   the declaration without complaint. That is why the refracting variant below
   hangs off a class the script sets after testing rather than off @supports.
   -------------------------------------------------------------------------- */
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .ccg-glass.ccg-glass.ccg-glass.ccg-glass {
    -webkit-backdrop-filter: blur(var(--ccg-blur)) saturate(var(--ccg-sat)) brightness(var(--ccg-brt));
    backdrop-filter: blur(var(--ccg-blur)) saturate(var(--ccg-sat)) brightness(var(--ccg-brt));
  }
}

/* --------------------------------------------------------------------------
   THE BACKDROP, REFRACTING

   --ccg-lens is written onto the element by assets/ccx-glass.js and holds a
   reference to a filter built for that element's size. The fallback in the
   var() call is a blur of nothing, so an element that was left without a lens,
   because the window is narrow or because the ceiling on the number of lenses
   was reached, still gets the frosted treatment from the same declaration.

   The small blur after the lens is not decoration. The lens displaces each of
   the three colour channels by a slightly different amount, and on a field of
   hard little points that separation would otherwise read as confetti rather
   than as glass. Under a blur of a pixel and a half it becomes what it is
   meant to be: a coloured fringe on the things the rim bends.
   -------------------------------------------------------------------------- */
html.ccg-lens .ccg-glass.ccg-glass.ccg-glass.ccg-glass {
  backdrop-filter: var(--ccg-lens, blur(0px))
                   blur(var(--ccg-blur)) saturate(var(--ccg-sat)) brightness(var(--ccg-brt));
}

/* --------------------------------------------------------------------------
   THE LAYERS

   Both are injected by the script and both are inert: no pointer, no reading
   order, no size of their own. They inherit the radius of the host, so a pill
   gets a pill and a card would get a card without a line being changed here.
   -------------------------------------------------------------------------- */
.ccg-layer {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}

/* The rim. Four shadows: the hair line along the top, which is what makes the
   plate read as raised rather than as a hole; the ring, which draws the whole
   edge at a weight one can see without it competing with the frame the host
   already has; and the two prism tints, cool on the left against warm on the
   right. A thick glass edge does split light, and two one pixel insets in
   opposite temperatures say so for the price of nothing. */
.ccg-rim {
  box-shadow:
    inset 0 1px 0 var(--ccg-rim-top),
    inset 0 0 0 1px var(--ccg-rim-ring),
    inset 1px 0 0 var(--ccg-prism-cool),
    inset -1px 0 0 var(--ccg-prism-warm);
  transition: box-shadow 0.28s ease;
}

/* The travelling sheen. Only where .ccg-shimmer is handed out, which today is
   the caption under the control loop and nothing else. It runs, then it waits:
   the band crosses in the first half of the cycle and stands off the right
   edge for the second, so the eye is caught once and then left alone. */
.ccg-sweep {
  overflow: hidden;
}

.ccg-sweep::before {
  content: "";
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: 0;
  width: 42%;
  background-image: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.20) 42%,
    rgba(255, 214, 170, 0.26) 56%,
    rgba(255, 255, 255, 0) 100%);
  transform: translateX(-170%) skewX(-14deg);
  animation: ccg-sweep 7.2s cubic-bezier(0.4, 0, 0.25, 1) infinite;
}

@keyframes ccg-sweep {
  0%        { transform: translateX(-170%) skewX(-14deg); }
  46%, 100% { transform: translateX(430%) skewX(-14deg); }
}


/* --------------------------------------------------------------------------
   VARIANT: THE EYEBROW PILLS (.ccg-pill)

   Three of them on this page: over the opening headline, over the band of
   tools in production, and over the list of what a client gets. They are read
   at a glance and never touched, so they stay still and only carry the plate.
   -------------------------------------------------------------------------- */
.ccg-pill {
  --ccg-blur: 1.8px;
  --ccg-fill-a: rgba(255, 255, 255, 0.10);
  --ccg-fill-b: rgba(255, 255, 255, 0.012);
}

/* The frame the page settings draw around a pill is a solid line at sixteen
   percent white. Against a blurred backdrop that line now has a surface behind
   it and can afford to step back a little, which is what lets the rim above be
   the edge one actually sees. Five class names, one more than the page. */
.ccg-pill.ccg-pill.ccg-pill.ccg-pill.ccg-pill {
  border-color: rgba(255, 255, 255, 0.11);
}


/* --------------------------------------------------------------------------
   VARIANT: THE OUTLINED BUTTON (.ccg-btn)

   The second call to action, twice on the page. Everything it already has
   stays: the cool travelling light of inc/ccx-lpget.php runs on the same
   element, the label and the frame are untouched, and the fill it carries is
   only deepened rather than replaced. What changes is that the button now has
   a backdrop instead of being a window onto flat navy.

   Its host clips itself, because the travelling light has to run off the edge
   somewhere. The rim inherits that clip and loses half a pixel at the rounding
   for it, which is not visible and is the correct trade.
   -------------------------------------------------------------------------- */
.ccg-btn {
  --ccg-blur: 2px;
  --ccg-sat: 1.45;
  --ccg-fill-a: rgba(255, 255, 255, 0.10);
  --ccg-fill-b: rgba(255, 255, 255, 0.018);
  --ccg-rim-top: rgba(255, 255, 255, 0.24);
}

.ccg-btn:hover,
.ccg-btn:focus-visible {
  --ccg-fill-a: rgba(255, 255, 255, 0.17);
  --ccg-fill-b: rgba(255, 255, 255, 0.05);
  --ccg-brt: 1.1;
  --ccg-rim-top: rgba(255, 255, 255, 0.4);
}


/* --------------------------------------------------------------------------
   VARIANT: THE REFERENCE BADGES (.ccg-badge)

   The three little status pills on the cards of the tools in production. They
   breathe in the green of the dot inside them, on a rhythm assets/ccfx-v3.css
   sets, and that breath is the point of them: it says the thing is running.

   Nothing here interferes with it, and that is by construction rather than by
   care. The pulse animates background COLOUR, border colour and box shadow; a
   running animation beats any declaration in this file, so those three stay
   the pulse's own. What this file adds sits beside them: an image over the
   colour, a backdrop under it, and a rim on a child the pulse never touches.

   Under reduced motion ccfx-v3.css stops the pulse, and the border colour
   below then becomes the one that shows. It is the resting value of the pulse,
   so the badge looks the same standing still as it does at the quiet end of
   its breath.
   -------------------------------------------------------------------------- */
.ccg-badge {
  --ccg-blur: 1.4px;
  --ccg-sat: 1.3;
  --ccg-brt: 1.05;
  --ccg-fill-a: rgba(255, 255, 255, 0.075);
  --ccg-fill-b: rgba(255, 255, 255, 0.01);
  --ccg-rim-top: rgba(255, 255, 255, 0.22);
  --ccg-rim-ring: rgba(255, 255, 255, 0.06);
}

.ccg-badge.ccg-badge.ccg-badge.ccg-badge.ccg-badge {
  border-color: rgba(255, 255, 255, 0.16);
}


/* --------------------------------------------------------------------------
   VARIANT: THE CHIPS (.ccg-chip)

   Two of them, and they are not the same kind of thing.

   The caption under the control loop names what the drawing is. It is not a
   link and it does not get a hand cursor, but it was the one element on the
   page that did nothing at all when the pointer arrived, which on a page where
   everything else answers reads as an oversight rather than as restraint. It
   gets .ccg-shimmer for the travelling sheen and a lift under the pointer.

   The note at the sixth station of the production path is a link in all but
   name: the script of that section makes it scroll to the board below. It
   already brightens and already nods its chevron. It gets the plate and a
   firmer rim, and its own hover rules carry on doing the rest.
   -------------------------------------------------------------------------- */
.ccg-chip {
  --ccg-blur: 1.5px;
  --ccg-fill-a: rgba(255, 255, 255, 0.10);
  --ccg-fill-b: rgba(255, 255, 255, 0.012);
  transition: transform 0.28s cubic-bezier(0.2, 0.85, 0.3, 1),
              border-color 0.28s ease;
}

.ccg-chip.ccg-chip.ccg-chip.ccg-chip.ccg-chip {
  border-color: rgba(255, 255, 255, 0.13);
}

/* The caption. A pointer over it warms the plate, lifts it by a pixel and
   sharpens the hair line along its top edge. No cursor change: it still says
   nothing about being clickable, because it is not. */
.ccg-shimmer:hover {
  --ccg-fill-a: rgba(255, 255, 255, 0.16);
  --ccg-fill-b: rgba(255, 214, 170, 0.05);
  --ccg-brt: 1.11;
  --ccg-rim-top: rgba(255, 255, 255, 0.42);
  --ccg-prism-warm: rgba(255, 193, 140, 0.24);
  transform: translateY(-1px);
}

.ccg-shimmer.ccg-shimmer.ccg-shimmer.ccg-shimmer.ccg-shimmer:hover {
  border-color: rgba(255, 255, 255, 0.24);
}

/* The note of the sixth station. Its colours on hover come from
   assets/ccx-lpflow.css and stay there; only the plate answers here. */
.ccg-chiplink:hover,
.cclpf-chip-live:hover .ccg-chiplink,
.cclpf-chip-live:focus-visible .ccg-chiplink {
  --ccg-brt: 1.12;
  --ccg-sat: 1.5;
  --ccg-rim-top: rgba(255, 255, 255, 0.4);
  --ccg-prism-warm: rgba(255, 193, 140, 0.26);
}


/* --------------------------------------------------------------------------
   NARROW

   Below the width at which the field of points is built, there is no moving
   backdrop left to refract, and a phone pays for a treated backdrop in frames
   rather than in pixels. The plate stays, because the fill and the rim are
   what carry the look at that size anyway; the treatment is thinned to a blur
   that a mobile compositor does not notice.

   The script stops handing out lenses at the same width, so the rule above
   falls back to its own blur of nothing there without being told to.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .ccg-glass {
    --ccg-blur: 1.1px;
    --ccg-sat: 1.25;
    --ccg-brt: 1.04;
  }
}


/* --------------------------------------------------------------------------
   LESS MOVEMENT

   The plate is not motion, so it stays. The travelling sheen is, so it goes,
   and it goes by being removed rather than paused: a band of light standing
   still halfway across a chip is a smear, not a highlight.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ccg-sweep::before {
    animation: none;
    opacity: 0;
  }
  .ccg-rim,
  .ccg-chip {
    transition: none;
  }
  .ccg-shimmer:hover {
    transform: none;
  }
}