/**
 * Glass: inc/class-tal-glass.php
 *
 * Applied by the Glass switch on any element's Advanced tab, which stamps
 * .tal-glass-yes on the wrapper via Elementor's prefix_class.
 *
 * Layer order, bottom to top:
 *   backdrop-filter   frost and saturation on whatever sits behind
 *   background        the tint, which must be semi-transparent
 *   box-shadow inset  depth, shaded away from the light
 *   ::before          the rim: lensed edge plus a chromatic hint
 *   ::after           the broad specular sheen across the face
 *
 * REFRACTION IS NOT REAL HERE. backdrop-filter can blur, saturate and tint a
 * backdrop; it cannot displace it. There is no CSS displacement map and SVG
 * filters cannot sample the page behind an element. The Refraction, Dispersion
 * and Splay controls drive the rim, which is what sells the illusion.
 */

.tal-glass-yes {
  --tal-g-frost: 17px;
  --tal-g-sat: 135%;
  --tal-g-tint: rgba(255, 255, 255, .14);
  --tal-g-ang: 135deg;
  --tal-g-light: .8;
  --tal-g-refr: .8;
  --tal-g-depth: 20px;
  --tal-g-disp: .5;
  --tal-g-splay: 0%;
  --tal-g-radius: 24px;
  --tal-g-rim: 1px;

  position: relative;
  border-radius: var(--tal-g-radius);
  background-color: var(--tal-g-tint);

  /* Saturation matters as much as the blur. Blur alone reads as grey fog;
     lifting saturation behind the pane is what makes it look like glass. */
  -webkit-backdrop-filter: blur(var(--tal-g-frost)) saturate(var(--tal-g-sat));
  backdrop-filter: blur(var(--tal-g-frost)) saturate(var(--tal-g-sat));

  /* Depth. Two inner shadows, one shading away from the light and one bright
     just inside the lit edge, which is what gives a pane apparent thickness.

     --tal-g-cast is how a glass element gets an OUTER drop shadow as well.
     box-shadow is one property, so a widget cannot add a drop shadow in a rule
     of its own: the later declaration replaces this one rather than adding to
     it, and the pane loses its thickness. Setting the variable puts the cast
     shadow in this same declaration instead. Unset, it is a transparent no-op. */
  box-shadow:
    var(--tal-g-cast, 0 0 0 0 transparent),
    inset 0 calc(var(--tal-g-depth) * -0.35) calc(var(--tal-g-depth) * 0.9)
      rgba(0, 0, 0, calc(var(--tal-g-depth) / 1px * 0.006)),
    inset 0 calc(var(--tal-g-depth) * 0.12) calc(var(--tal-g-depth) * 0.5)
      rgba(255, 255, 255, calc(var(--tal-g-light) * 0.18));

  /* backdrop-filter creates a containing block, so a position:fixed child of a
     glass element will anchor here rather than the viewport. Worth knowing
     before blaming the fixed element. */
  isolation: isolate;
}

/* ── Rim: the lensed edge, plus the chromatic hint ─────────────────────
   Gradient border via the two-mask composite trick, because a plain border
   cannot carry an angled gradient. */
.tal-glass-yes::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: var(--tal-g-rim);
  pointer-events: none;

  background:
    /* chromatic suggestion, deliberately weak */
    linear-gradient(
      calc(var(--tal-g-ang) + 90deg),
      rgba(120, 200, 255, calc(var(--tal-g-disp) * 0.55)) 0%,
      rgba(255, 255, 255, 0) 35%,
      rgba(255, 160, 220, calc(var(--tal-g-disp) * 0.45)) 100%
    ),
    /* the lensed edge itself */
    linear-gradient(
      var(--tal-g-ang),
      rgba(255, 255, 255, calc(var(--tal-g-refr) * 0.9)) 0%,
      rgba(255, 255, 255, calc(var(--tal-g-refr) * 0.10)) calc(38% + var(--tal-g-splay)),
      rgba(255, 255, 255, 0) 62%,
      rgba(255, 255, 255, calc(var(--tal-g-refr) * 0.35)) 100%
    );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* ── Face sheen ─────────────────────────────────────────────────────── */
.tal-glass-yes::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    var(--tal-g-ang),
    rgba(255, 255, 255, calc(var(--tal-g-light) * 0.16)) 0%,
    rgba(255, 255, 255, 0) calc(45% + var(--tal-g-splay))
  );
}

/* Elementor widgets keep their own content above both decorative layers. */
.tal-glass-yes > .elementor-widget-container,
.tal-glass-yes > .e-con-inner {
  position: relative;
  z-index: 2;
}

/* No backdrop-filter support: fall back to a heavier tint so the panel is
   still legible rather than nearly invisible. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tal-glass-yes {
    background-color: color-mix(in srgb, var(--tal-g-tint) 100%, rgba(20, 30, 45, .55));
  }
}