/* =====================================================================
   Bespoke Glass Kit add-on: Polish
   Small-detail motion: press feel, trailing light, progressive edge blur,
   rim thickness, shape morph, concentric corners.
   Pairs with glass-polish.js. Everything is gated on html[data-gl-polish-live],
   which the script sets, so with no script the page looks exactly like 2.2.1.
   ===================================================================== */

:root {
  /* one spring for the whole system; the curve is only used where CSS must animate */
  --gl-pol-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --gl-pol-lag: 340ms;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --gl-pol-spring: linear(0, 0.09, 0.289, 0.517, 0.723, 0.884, 0.993, 1.055, 1.081, 1.082, 1.069, 1.051, 1.032, 1.016, 1.005, 0.998, 0.994, 0.993, 0.994, 0.995, 0.997, 0.998, 0.999, 1, 1, 1.001, 1.001, 1, 1);
  }
}

/* 1. press feel ------------------------------------------------------
   The script writes --gl-pol-s (scale) and --gl-pol-p (0..1 press depth) while a
   finger is down and while the spring settles. Uses the individual `scale`
   property so it never fights the kit's own `transform` hover lift. */
html[data-gl-polish-live] .gl-pol-press { scale: var(--gl-pol-s, 1); will-change: auto; }
.gl-pol-lit {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  opacity: var(--gl-pol-p, 0);
  background: radial-gradient(circle at var(--gl-pol-x, 50%) var(--gl-pol-y, 50%), rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.08) 46%, transparent 72%);
  mix-blend-mode: soft-light;
}

/* 2. light that trails the finger ------------------------------------
   The kit already moves --gl-lx/--gl-ly (registered @property). Its own transitions
   are 160ms ease-out; here the same lists are restated with a longer spring so the
   highlight lags a touch and settles, like light on real glass. */
html[data-gl-polish-live] :where(.gl, .gl-atmos, :is(.gl-galaxy, .gl-feature), .gl-feature) {
  transition: --gl-lx var(--gl-pol-lag) var(--gl-pol-spring), --gl-ly var(--gl-pol-lag) var(--gl-pol-spring);
}
html[data-gl-polish-live] .gl-atmos,
html[data-gl-polish-live] [data-gl-press] {
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), --gl-lx var(--gl-pol-lag) var(--gl-pol-spring), --gl-ly var(--gl-pol-lag) var(--gl-pol-spring);
}
html[data-gl-polish-live] .gl-hover {
  transition: transform 0.3s var(--gl-ease-spring), box-shadow 0.4s ease, background 0.4s ease, --gl-lx var(--gl-pol-lag) var(--gl-pol-spring), --gl-ly var(--gl-pol-lag) var(--gl-pol-spring);
}

/* 3. progressive blur under the header / above the tab bar -------------
   Three thin strips, each blurred a little more and masked so the blur
   ramps in instead of stopping at an edge. Created by the script only on
   the full tier. */
.gl-pol-edge {
  position: fixed; left: 0; right: 0; pointer-events: none; z-index: calc(var(--gl-z-header, 50) - 1);
}
.gl-pol-edge--top    { top: var(--gl-pol-top, 0px); height: var(--gl-pol-edge-h, 34px); }
.gl-pol-edge--bottom { bottom: 0; height: var(--gl-pol-edge-b, 110px); }
.gl-pol-edge > i { position: absolute; inset: 0; display: block; }
.gl-pol-edge--top > i:nth-child(1)    { -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);  mask-image: linear-gradient(to bottom, #000 0%, transparent 100%); }
.gl-pol-edge--top > i:nth-child(2)    { -webkit-backdrop-filter: blur(5px);   backdrop-filter: blur(5px);   -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 62%); mask-image: linear-gradient(to bottom, #000 0%, transparent 62%); }
.gl-pol-edge--top > i:nth-child(3)    { -webkit-backdrop-filter: blur(12px);  backdrop-filter: blur(12px);  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 32%); mask-image: linear-gradient(to bottom, #000 0%, transparent 32%); }
.gl-pol-edge--bottom > i:nth-child(1) { -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 100%);  mask-image: linear-gradient(to top, #000 0%, transparent 100%); }
.gl-pol-edge--bottom > i:nth-child(2) { -webkit-backdrop-filter: blur(5px);   backdrop-filter: blur(5px);   -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 62%); mask-image: linear-gradient(to top, #000 0%, transparent 62%); }
.gl-pol-edge--bottom > i:nth-child(3) { -webkit-backdrop-filter: blur(12px);  backdrop-filter: blur(12px);  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 32%); mask-image: linear-gradient(to top, #000 0%, transparent 32%); }
/* phones: one layer per strip */
.gl-pol-edge--lean > i:not(:nth-child(2)) { display: none; }
html:not([data-gl-polish-edges]) .gl-pol-edge { display: none; }

/* 4. edge thickness ---------------------------------------------------
   A hairline rim that is brighter where the light hits (top-left, following
   --gl-lx/--gl-ly) and a second, fainter line just inside it, so the pane reads
   as a slab of glass with a cut edge rather than a flat card. */
.gl-pol-rim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; padding: 1px;
  background:
    radial-gradient(120% 90% at var(--gl-lx, 30%) var(--gl-ly, 0%), rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.10) 46%, rgba(255, 255, 255, 0.04) 70%, rgba(255, 255, 255, 0.16));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  opacity: 0.8;
}
.gl-pol-rim::after {
  content: ""; position: absolute; inset: 1px; border-radius: inherit; padding: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, 0.18));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}

/* 5. shape morph (View Transitions) ----------------------------------
   Only groups named gl-pol-morph* are styled; the kit's own page transition and
   header name are left alone. */
::view-transition-group(gl-pol-morph) { animation-duration: 460ms; animation-timing-function: var(--gl-pol-spring); }
::view-transition-old(gl-pol-morph), ::view-transition-new(gl-pol-morph) { height: 100%; object-fit: cover; }

/* 6. concentric corners ----------------------------------------------
   The script measures the parent's radius and padding and writes --gl-pol-inner-r. */
[data-gl-concentric] > .gl-pol-inner { border-radius: var(--gl-pol-inner-r, 12px); }

/* Reduce Motion: no spring, no trailing light. The press still shows (instant, small). */
@media (prefers-reduced-motion: reduce) {
  html[data-gl-polish-live] :where(.gl, .gl-atmos, .gl-feature, .gl-hover, [data-gl-press]) { transition-duration: 0.01ms !important; }
  ::view-transition-group(gl-pol-morph) { animation-duration: 0.01ms; }
}
/* Flat tier / Reduce Transparency: plain surfaces, so no blur strips, no glow */
html[data-gl-tier="flat"] .gl-pol-edge, html[data-gl-tier="flat"] .gl-pol-lit { display: none; }
html[data-gl-tier="flat"] .gl-pol-rim { opacity: 0.45; }
html[data-gl-tier="lite"] .gl-pol-edge { display: none; }

/* 7. Gel press: squash on touch-down, a short wobble on release (the press from the BBB site).
   data-gl-press="gel" on a button, or <html data-gl-press-style="gel"> for every button.
   !important so a button's own animation can't block the press; it lasts under a second. */
@keyframes gl-pol-gel-down { to { scale: 1.06 0.86; } }
@keyframes gl-pol-gel-up { 0% { scale: 1.06 0.86; } 30% { scale: 0.94 1.1; } 55% { scale: 1.03 0.97; } 78% { scale: 0.99 1.01; } 100% { scale: 1 1; } }
.gl-pol-gel-down { animation: gl-pol-gel-down 90ms ease-out forwards !important; transform-origin: 50% 60%; }
.gl-pol-gel-up { animation: gl-pol-gel-up 550ms cubic-bezier(0.2, 0.8, 0.3, 1) both !important; transform-origin: 50% 60%; }
/* bounce: the one-shot version. One squash on touch, spring back, done (data-gl-press="bounce"). */
@keyframes gl-pol-bounce { 0% { scale: 1 1; } 22% { scale: 1.09 0.86; } 48% { scale: 0.96 1.07; } 72% { scale: 1.025 0.985; } 100% { scale: 1 1; } }
.gl-pol-bounce { animation: gl-pol-bounce 520ms cubic-bezier(0.3, 0.7, 0.3, 1) both !important; transform-origin: 50% 60%; }
@media (prefers-reduced-motion: reduce) { .gl-pol-gel-down, .gl-pol-gel-up, .gl-pol-bounce { animation: none !important; } }