/* BlueHarbor Freight — glass.css
   The Liquid Glass material: surfaces, rim light, pointer-follow specular,
   buttons (hover glow + press squish), inputs, and the frosted shimmer. */

/* ---------- Surface ---------- */
.glass {
  --g-tint: rgba(240, 236, 230, .06);
  --g-edge: rgba(255, 255, 255, .5);
  --g-edge-2: rgba(255, 255, 255, .12);
  --g-blur: 22px;
  --g-sat: 165%;
  --g-shadow: 0 22px 44px -26px rgba(1, 5, 10, .9);
  --g-spot: 200px;
  --g-spot-color: rgba(255, 255, 255, .2);
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 50%, rgba(169, 188, 208, .05)),
    var(--g-tint);
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 -10px 24px -18px rgba(169, 188, 208, .35),
    var(--g-shadow);
  transition: --g-tint .6s var(--ease-out), box-shadow .5s var(--ease-out), color .5s var(--ease-out), transform .7s var(--ease-spring);
}

/* Rim light — a 1px refractive edge, bright top-left, soft bottom-right */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(var(--g-angle, 150deg), var(--g-edge), var(--g-edge-2) 24%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .04) 72%, var(--g-edge-2));
  -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;
}

/* Specular highlight that follows the pointer / touch (js/glass.js sets --px/--py) */
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(var(--g-spot) circle at var(--px, 50%) var(--py, 0%), var(--g-spot-color), rgba(255, 255, 255, 0) 70%);
  opacity: 0;
  transition: opacity .7s var(--ease-out);
}
.glass.is-lit::after { opacity: 1; transition-duration: .25s; }

/* Variants */
.glass--light {
  --g-tint: rgba(255, 255, 255, .44);
  --g-edge: #fff;
  --g-edge-2: rgba(255, 255, 255, .55);
  --g-sat: 140%;
  --g-shadow: 0 34px 64px -36px rgba(27, 47, 69, .5), 0 3px 10px -6px rgba(27, 47, 69, .2);
  --g-spot-color: rgba(255, 255, 255, .7);
  color: var(--ink);
}
.glass--dense { --g-tint: rgba(9, 19, 31, .5); }

/* ---------- Buttons ---------- */
.btn {
  --g-spot: 90px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7em;
  min-height: 50px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  font-family: var(--f-sans);
  font-size: 15px;
  line-height: 1;
  font-weight: 600;
  font-stretch: 110%;
  letter-spacing: .015em;
  text-decoration: none;
  white-space: nowrap;
  color: var(--cream);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition-property: transform, box-shadow, color, --g-tint;
  transition-duration: .7s, .5s, .3s, .5s;
  transition-timing-function: var(--ease-spring), var(--ease-out), var(--ease-out), var(--ease-out);
}
.btn:not(.glass) { background: transparent; }
.btn:hover {
  color: var(--cream);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 0 1px rgba(169, 188, 208, .16), 0 16px 36px -14px rgba(90, 132, 181, .7);
}
.btn:active, .btn.is-pressed { transform: scale(.965, .9); transition-duration: .12s, .5s, .3s, .5s; }
.btn .i { transition: transform .6s var(--ease-spring); }
.btn:hover .i { transform: translateX(3px); }
.btn[disabled] { opacity: .5; pointer-events: none; }

.btn--primary { --g-tint: rgba(240, 236, 230, .94); --g-edge: #fff; --g-spot-color: rgba(255, 255, 255, .95); color: var(--ink); }
.btn.btn--primary:hover { color: var(--ink); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(240, 236, 230, .35), 0 18px 44px -12px rgba(90, 132, 181, .85); }

.btn--ink { --g-tint: rgba(27, 47, 69, .94); --g-edge: rgba(255, 255, 255, .5); --g-spot-color: rgba(169, 188, 208, .45); color: var(--cream); }
.btn.btn--ink:hover { color: var(--cream); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 18px 40px -16px rgba(27, 47, 69, .8); }

.btn--light { --g-tint: rgba(255, 255, 255, .5); --g-edge: #fff; --g-spot-color: rgba(255, 255, 255, .9); color: var(--ink); }
.btn.btn--light:hover { color: var(--ink); box-shadow: inset 0 1px 0 #fff, 0 14px 32px -16px rgba(27, 47, 69, .45); }

.btn--sm { min-height: 42px; padding: 0 18px; font-size: 13px; }
.btn--icon { width: 52px; height: 52px; min-height: 52px; padding: 0; border-radius: 50%; }

/* ---------- Inputs (light glass, used on cream surfaces) ---------- */
.g-input {
  display: block;
  width: 100%;
  min-height: 60px;
  padding: 25px 16px 9px;
  border: 1px solid rgba(31, 53, 80, .13);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .56);
  box-shadow: inset 0 1px 2px rgba(31, 53, 80, .07), inset 0 -1px 0 rgba(255, 255, 255, .9);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .35s var(--ease-out), box-shadow .45s var(--ease-out), background-color .35s var(--ease-out), transform .6s var(--ease-spring);
}
.g-input:hover { background-color: rgba(255, 255, 255, .72); }
.g-input:focus {
  outline: none;
  border-color: rgba(63, 109, 154, .75);
  background-color: rgba(255, 255, 255, .88);
  box-shadow: 0 0 0 4px rgba(63, 109, 154, .16), 0 10px 26px -14px rgba(63, 109, 154, .55), inset 0 1px 2px rgba(31, 53, 80, .05);
}

/* ---------- Frosted shimmer (loading / empty placeholders) ---------- */
.frost {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 80% at 10% 0%, rgba(204, 218, 233, .14), transparent 60%),
    linear-gradient(135deg, rgba(169, 188, 208, .12), rgba(90, 132, 181, .07) 50%, rgba(169, 188, 208, .1));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.frost::after {
  content: "";
  position: absolute;
  inset: 0 -40%;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .06) 42%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .06) 58%, transparent 68%);
  transform: translate3d(-45%, 0, 0);
  animation: frost-sweep 2.8s var(--ease-io) infinite;
  pointer-events: none;
}
.frost--light {
  background:
    radial-gradient(120% 80% at 10% 0%, rgba(255, 255, 255, .7), transparent 60%),
    linear-gradient(135deg, rgba(169, 188, 208, .28), rgba(90, 132, 181, .14) 50%, rgba(169, 188, 208, .22));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(255, 255, 255, .4);
}
.frost--light::after { background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .25) 42%, rgba(255, 255, 255, .6) 50%, rgba(255, 255, 255, .25) 58%, transparent 68%); }

@keyframes frost-sweep { to { transform: translate3d(45%, 0, 0); } }

@media (prefers-reduced-motion: reduce) {
  .frost::after { animation-duration: 8s; }
  .btn, .glass { transition-duration: .2s; }
}