/* ------------------------------------------------------------------------
 * ccx-appglass.css
 *
 * The CSS half of the glass on the app product pages. The script decides which
 * tier the browser gets and writes it on the root element; everything below
 * hangs off that:
 *
 *   html.ccag-disp   bend, blur, saturation - the full pane
 *   html.ccag-blur   blur and saturation, no bend
 *   neither          the page exactly as it stands today
 *
 * Nothing here uses ::before or ::after on a target. Both pseudo elements are
 * already taken on the call to action by the pointer glint of the effect
 * engine, and the badge carries the approach rim of a glow card, which builds
 * its own child spans. The pane is therefore made of two things only: a
 * backdrop-filter and an inset shadow.
 * --------------------------------------------------------------------- */

/* --------------------------------------------------------------------
 * The filters themselves.
 *
 * A hidden container on the body holds one SVG filter per pane. It has to
 * stay in the layout tree - display: none would take the filters with it in
 * some engines - so it is given no size instead.
 * -------------------------------------------------------------------- */
.ccag-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}
.ccag-defs .ccag-defs-svg {
  width: 0;
  height: 0;
  position: absolute;
}

/* --------------------------------------------------------------------
 * The rounding of the two sister badges.
 *
 * The pane is clipped to the border box of its element, rounded corners
 * included. Both badge bars are drawn as background pictures with rounded,
 * transparent corners, while the box around them has square ones - so
 * without a radius the glass would stand as a rectangle behind a rounded
 * bar and its corners would be plainly visible against the navy.
 *
 * The price app page already has this from inc/ccx-papp-hero.php, where the
 * approach rim needed the same shape. The two sister pages have no module of
 * their own, so the radius is given here. 12px is the radius of the picture:
 * the file is 830 by 96 with an 18px corner and is rendered at 64 high, and
 * the two smaller files are already drawn at 64 with a 12px corner.
 *
 * This is written without a page scope because these element ids exist only
 * on their own page and the stylesheet is only queued on the three of them.
 * -------------------------------------------------------------------- */
[data-id="c0c096e"],
[data-id="9785260"] { border-radius: 12px; }

/* --------------------------------------------------------------------
 * THE PANE
 *
 * Wide windows only, from the same 1025 pixels the dot field uses. Below
 * that there is no field behind the badge, so a backdrop filter would blur a
 * flat navy ground: a compositing pass on every scrolled frame for a picture
 * nobody can tell from the one before it. The media query also means a wide
 * window dragged narrow drops the glass by itself, without the script having
 * to watch the width.
 *
 * The chain is read left to right, and the order is the whole point:
 *
 *   var(--ccag-filter)   bend the sharp backdrop along the rim first. The
 *                        script writes this property per element; where it
 *                        is missing the fallback is a no-op filter, so a
 *                        pane whose map failed to build still gets the blur
 *                        instead of losing the declaration.
 *   blur()               then soften. One pixel, and that number was found by
 *                        measurement rather than taste: at three the dots
 *                        behind the pane are gone - a Gaussian of three
 *                        pixels flattens a dot three quarters of a pixel
 *                        across at fifteen hundredths into the ground - and
 *                        with them goes everything the bend had to work on,
 *                        so the pane turns into a plain dark bar. At one the
 *                        dots stay dots, softened, and the compression along
 *                        the rim is plainly readable.
 *   saturate()/brightness()  a dark navy ground goes grey under a blur.
 *                        These two put the colour back.
 * -------------------------------------------------------------------- */
@media (min-width: 1025px) {

  html.ccag-on .ccag-glass {
    /* the CSS half of the numbers; the map half sits in inc/ccx-appglass.php */
    --ccag-blur: 1px;
    --ccag-sat: 1.45;
    --ccag-bright: 1.06;
    /* a pane whose map could not be built still gets a clean frosted look */
    --ccag-filter: opacity(1);
  }

  html.ccag-on .ccag-glass.ccag-cta {
    --ccag-blur: 1.2px;
    --ccag-sat: 1.5;
    --ccag-bright: 1.08;
  }

  /* Blur only. Everything that is not Chromium lands here, and so does a
     Chromium build whose map failed. */
  html.ccag-blur .ccag-glass,
  html.ccag-disp .ccag-glass {
    -webkit-backdrop-filter:
      blur(var(--ccag-blur))
      saturate(var(--ccag-sat))
      brightness(var(--ccag-bright));
    backdrop-filter:
      blur(var(--ccag-blur))
      saturate(var(--ccag-sat))
      brightness(var(--ccag-bright));
  }

  /* Bend first, then the same blur. Written as its own rule rather than as a
     variable inside the one above, because a browser that cannot do the url()
     must never see this declaration at all - it would drop the whole line and
     the blur with it. */
  html.ccag-disp .ccag-glass {
    backdrop-filter:
      var(--ccag-filter)
      blur(var(--ccag-blur))
      saturate(var(--ccag-sat))
      brightness(var(--ccag-bright));
  }

  /* --------------------------------------------------------------------
   * THE EDGE
   *
   * A pane needs a lit top edge and a shaded bottom one, or it reads as a
   * hole rather than as something lying on the page. Both are inset shadows
   * on the element itself, so they follow its radius and cost nothing.
   *
   * The values are deliberately below what a glass panel usually gets: both
   * elements already carry a drawn frame inside their background picture,
   * and a second bright line next to it would read as a double border. This
   * is a highlight along the existing frame, not a frame of its own.
   * -------------------------------------------------------------------- */
  html.ccag-on .ccag-glass.ccag-badge {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.09),
      inset 0 -1px 0 rgba(0, 0, 0, 0.16);
  }

  html.ccag-on .ccag-glass.ccag-cta {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      inset 0 -1px 0 rgba(0, 0, 0, 0.22),
      0 10px 26px rgba(3, 7, 18, 0.28);
  }

  /* The pointer lifts the pane a little: a touch more light through it and a
     brighter top edge. No transform, because the travelling light of the star
     border runs along this box and a moving box would drag it with it. */
  html.ccag-on .ccag-glass.ccag-cta:hover {
    --ccag-bright: 1.14;
    --ccag-sat: 1.62;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      inset 0 -1px 0 rgba(0, 0, 0, 0.22),
      0 12px 30px rgba(3, 7, 18, 0.34);
  }
  html.ccag-on .ccag-glass.ccag-cta {
    transition: box-shadow 0.28s ease-out;
  }
  @media (prefers-reduced-motion: reduce) {
    html.ccag-on .ccag-glass.ccag-cta { transition: none; }
  }
}

/* --------------------------------------------------------------------
 * THE PHONE VARIANT OF THE BADGE
 *
 * A second badge exists in the page data for phones, hidden above 767
 * pixels. It carries a real 1.2px frame and a white gradient from eight
 * percent to nothing, which is already the drawing of a glass chip - it just
 * has no lit edge.
 *
 * It gets that one line and nothing else. No backdrop filter: there is no
 * dot field behind it on a phone, so the filter would blur a flat ground for
 * no visible gain, and a phone pays for every compositing layer it carries
 * through a scroll.
 * -------------------------------------------------------------------- */
@media (max-width: 767px) {
  [data-id="2cf0ff5"],
  [data-id="fc6b446"],
  [data-id="f23ef3e"] {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  }
}

/* A pane prints as a grey box. The artwork underneath prints correctly on
 * its own, so the pane is simply taken out. */
@media print {
  .ccag-glass {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }
  .ccag-defs { display: none; }
}