/*!
 * Glass Cards v1.0 - frosted glass cards with a spotlight that follows the pointer
 * by Rehmat (Animated Creativity) - https://animatedcreativity.com - MIT License
 *
 * Glass needs something colourful behind it. On a plain background it looks like a grey box.
 */

.glass {
  /* change these on any card, or on a parent to change all cards inside */
  --glass-blur: 16px;                         /* how strongly the background is blurred */
  --glass-bg: rgba(255, 255, 255, .08);       /* the glass itself */
  --glass-border: rgba(255, 255, 255, .18);   /* the thin edge */
  --glass-radius: 20px;
  --glass-spot: rgba(255, 255, 255, .20);     /* colour of the spotlight */
  --glass-spot-size: 340px;

  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  min-width: 0;
  padding: 24px;
  border-radius: var(--glass-radius);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
          backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .16);
  color: #fff;
}

/* Browsers without backdrop-filter get a more solid card, so text stays readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(40, 44, 66, .88); }
  .glass.glass-light { background: rgba(255, 255, 255, .92); }
}

/* ---------- variants ---------- */
.glass-frost { --glass-blur: 30px; --glass-bg: rgba(255, 255, 255, .16); --glass-border: rgba(255, 255, 255, .28); }
.glass-clear { --glass-blur: 6px;  --glass-bg: rgba(255, 255, 255, .04); --glass-border: rgba(255, 255, 255, .14); }
.glass-dark  { --glass-bg: rgba(8, 10, 20, .46); --glass-border: rgba(255, 255, 255, .10); }
.glass-light { --glass-bg: rgba(255, 255, 255, .58); --glass-border: rgba(255, 255, 255, .75); --glass-spot: rgba(255, 255, 255, .7); color: #14162a;
               box-shadow: 0 12px 40px rgba(30, 30, 80, .16), inset 0 1px 0 rgba(255, 255, 255, .7); }

/* Coloured glass: <div class="glass glass-tint" style="--glass-color:#7c5cff"> */
.glass-tint { --glass-color: #7c5cff; --glass-bg: rgba(124, 92, 255, .22); }
@supports (background: color-mix(in srgb, red 10%, transparent)) {
  .glass-tint {
    --glass-bg: color-mix(in srgb, var(--glass-color) 24%, transparent);
    --glass-border: color-mix(in srgb, var(--glass-color) 45%, rgba(255, 255, 255, .25));
    --glass-spot: color-mix(in srgb, var(--glass-color) 45%, transparent);
  }
}

/* ---------- spotlight (switched on by glass.js) ---------- */
.glass-spot::before,
.glass-spot::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--glass-on, 0);
  transition: opacity .35s;
}
/* soft light inside the card */
.glass-spot::before {
  inset: 0;
  z-index: -1;
  background: radial-gradient(var(--glass-spot-size) circle at var(--glass-x, 50%) var(--glass-y, 50%), var(--glass-spot), transparent 65%);
}
/* bright line on the edge, only near the pointer */
.glass-spot::after {
  inset: -1px;
  padding: 1px;
  background: radial-gradient(calc(var(--glass-spot-size) * .75) circle at var(--glass-x, 50%) var(--glass-y, 50%), rgba(255, 255, 255, .85), transparent 65%);
  -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 exclude, linear-gradient(#000 0 0);
}

/* ---------- small parts ---------- */
.glass-pill { padding: 8px 16px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; }
.glass-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; cursor: pointer;
  font: inherit; font-weight: 600; text-decoration: none; color: inherit;
  transition: transform .2s, background-color .2s;
}
.glass-btn:hover { --glass-bg: rgba(255, 255, 255, .2); transform: translateY(-2px); }
.glass-btn:active { transform: translateY(0); }
.glass-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .glass-btn { transition: none; }
  .glass-btn:hover { transform: none; }
}