/* glass.css — frosted-glass surfaces for the hero.
 *
 * Everything here sits on top of a moving plasma background, which is the whole
 * reason it works: frosted glass only reads as glass when there is something
 * behind it worth blurring.
 *
 *   .glass        the surface itself — use on any panel
 *   .btn-solid    the primary action (white, high contrast)
 *   .btn-glass    the secondary action
 *   .nav-glass    the floating pill nav
 *   .badge        the small "NEW · ..." pill
 */

:root{
  --glass-bg:        rgba(12,12,20,.40);
  --glass-bg-hover:  rgba(24,24,38,.56);
  --glass-border:    rgba(255,255,255,.11);
  --glass-border-hi: rgba(255,255,255,.20);
  --glass-blur:      blur(22px) saturate(150%);
  --glass-radius:    16px;
  --ease:            cubic-bezier(.22,1,.36,1);
}

.glass{
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  /* Outer depth + a faint inner top edge. The inset highlight is what sells the
     "pane of glass" read — without it the surface looks like flat grey fill. */
  box-shadow:
    0 8px 32px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.10);
}

/* A one-pixel specular line along the top edge, brightest in the middle —
   the way light actually catches a curved glass lip. */
.glass::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  padding:1px;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 42%);
  -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;
  pointer-events:none;
}

/* ---------------------------------------------------------------- buttons */
.btn-solid,
.btn-glass{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px;
  border-radius:14px;
  font: 600 15px/1 inherit;
  letter-spacing:-.01em;
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
  border:1px solid transparent;
  transition: transform .18s var(--ease), background .18s ease,
              border-color .18s ease, box-shadow .18s ease;
}

.btn-solid{
  background:#fff;
  color:#0A0A10;
  box-shadow: 0 6px 22px rgba(0,0,0,.35);
}
.btn-solid:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(124,58,237,.34);
}

.btn-glass{
  background: var(--glass-bg);
  border-color: var(--glass-border);
  color:#fff;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
.btn-glass:hover{
  transform: translateY(-2px);
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hi);
}

.btn-solid:active,
.btn-glass:active{ transform: translateY(0); }

.btn-solid:focus-visible,
.btn-glass:focus-visible{
  outline:2px solid #A78BFA;
  outline-offset:3px;
}

/* Small brand dot, as on the old demo's primary button. */
.btn-dot{
  width:7px; height:7px; border-radius:50%;
  background:linear-gradient(120deg,#7C3AED,#3B82F6);
  flex:none;
}

/* ------------------------------------------------------------------- nav */
.nav-glass{
  display:inline-flex; align-items:center; gap:28px;
  padding:10px 10px 10px 22px;
  border-radius:999px;
}
.nav-glass a{
  color:rgba(255,255,255,.62);
  text-decoration:none;
  font-size:14.5px; font-weight:500;
  transition:color .15s ease;
}
.nav-glass a:hover{ color:#fff; }
/* Specificity: `.nav-glass a` above is (0,1,1) and would otherwise beat
   `.btn-solid` (0,1,0), turning this button's label white on white. */
.nav-glass a.btn-solid{ color:#0A0A10; padding:10px 20px; border-radius:999px; font-size:14px; }
.nav-glass a.btn-solid:hover{ color:#0A0A10; }

/* ----------------------------------------------------------------- badge */
.badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:6px 16px 6px 6px;
  border-radius:999px;
  font-size:13.5px;
  color:rgba(255,255,255,.66);
}
.badge b{
  background:#fff; color:#0A0A10;
  padding:4px 11px; border-radius:999px;
  font-size:11.5px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase;
}

/* ------------------------------------------------------- graceful degrade */

/* Safari/Firefox without backdrop-filter would render these almost invisible,
   so fall back to an opaque-enough tint instead of a see-through box. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .glass, .btn-glass{ background: rgba(18,18,26,.72); }
}

/* Some users switch transparency off at the OS level. Honour it. */
@media (prefers-reduced-transparency: reduce){
  .glass, .btn-glass{
    -webkit-backdrop-filter:none; backdrop-filter:none;
    background: rgba(16,16,24,.88);
  }
}

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