/* ============================================================
   Structural glass buttons — frosted/translucent.
   Use for: hamburger menu button, pill filters, structural CTAs.
   Source: liquid-glass-buttons.html + reveal-and-glass-system.html
   Requires the shared #liquidGlassFilter SVG (includes/_glass-filter.php)
   to be present once per page.
   ============================================================ */

.glass-btn{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:16px 34px; border-radius:999px; cursor:pointer; overflow:hidden;
  color:var(--ink); font-family:inherit; font-size:14px; font-weight:600;
  border:1px solid rgba(255,255,255,.5); background:none;
}
.glass-btn.small{ padding:6px 14px; font-size:11px; }
.glass-btn.circle{ padding:0; width:40px; height:40px; justify-content:center; }

.glass-layer{ position:absolute; inset:0; border-radius:inherit; pointer-events:none; }

.glass-tint{ background:rgba(255,255,255,.25); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }

.glass-refract{
  backdrop-filter:url(#liquidGlassFilter) blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  opacity:.85;
}

.glass-gloss{
  top:0; left:0; right:0; height:46%;
  background:linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.3) 35%, rgba(255,255,255,0) 100%);
  border-radius:999px 999px 40% 40%;
}

.glass-dispersion{
  mix-blend-mode:screen; opacity:.35; filter:blur(5px);
  background:
    radial-gradient(120% 100% at 0% 50%, rgba(255,60,60,.4), rgba(255,60,60,0) 45%),
    radial-gradient(120% 100% at 100% 50%, rgba(80,120,255,.4), rgba(80,120,255,0) 45%);
  -webkit-mask-image:radial-gradient(circle at center, transparent 35%, black 100%);
  mask-image:radial-gradient(circle at center, transparent 35%, black 100%);
}

.glass-stroke{
  padding:2px;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.glass-stroke-spin{
  position:absolute; left:50%; top:50%; width:220%; height:220%;
  transform:translate(-50%,-50%) rotate(0deg); border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,.95) 54deg, rgba(224,190,190,.85) 98deg, transparent 145deg, rgba(255,255,255,.7) 210deg, transparent 280deg, transparent 360deg);
  animation:glassSpin 8s linear infinite;
}
@keyframes glassSpin{ from{ transform:translate(-50%,-50%) rotate(0deg); } to{ transform:translate(-50%,-50%) rotate(360deg); } }

.glass-btn span, .glass-btn .tri{ position:relative; z-index:2; }
.glass-btn .tri{ width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:10px solid var(--ink); }

@media (prefers-reduced-motion: reduce){
  .glass-stroke-spin{ animation:none; }
}

/* ============================================================
   Transport glossy chrome buttons — opaque, physical.
   Use for: play/pause, skip, speed controls (iPod, DJ mixes).
   Source: glossy-chrome-button.html
   ============================================================ */

.glossy-btn{
  position:relative; width:90px; height:90px; border-radius:50%;
  background:linear-gradient(180deg, #ffffff 0%, #c9c9c9 9%, #a1a1a1 32%, #757575 73%, #ffffff 100%);
  box-shadow:
    0.3px 4.4px 2.2px rgba(0,0,0,0.01),
    0.5px 7.2px 3.6px rgba(0,0,0,0.01),
    0.8px 11.7px 5.9px rgba(0,0,0,0.02),
    1.3px 19.1px 9.6px rgba(0,0,0,0.03),
    2.2px 33px 16.5px rgba(0,0,0,0.05),
    4px 60px 30px rgba(0,0,0,0.10);
  padding:2px; cursor:pointer; border:none;
  display:flex; align-items:center; justify-content:center;
  transition:box-shadow 200ms ease;
}
.glossy-btn:hover{
  box-shadow:
    0.3px 4.4px 2.2px rgba(0,0,0,0.01),
    0.5px 7.2px 3.6px rgba(0,0,0,0.01),
    0.8px 11.7px 5.9px rgba(0,0,0,0.01),
    1.3px 19.1px 9.6px rgba(0,0,0,0.02),
    2.2px 33px 16.5px rgba(0,0,0,0.04),
    4px 60px 30px rgba(0,0,0,0.07);
}
.glossy-btn.pressed{
  box-shadow:
    0.3px 4.4px 0.4px -0.4px rgba(0,0,0,0.03),
    0.5px 7.2px 1px -0.75px rgba(0,0,0,0.03),
    0.8px 11.7px 1.7px -1.1px rgba(0,0,0,0.03),
    1.3px 19.1px 2.9px -1.5px rgba(0,0,0,0.03),
    2.2px 33px 13px -2.6px rgba(0,0,0,0.02),
    4px 60px 24px -3px rgba(0,0,0,0.02);
}
.glossy-inner{
  position:relative; width:100%; height:100%; border-radius:50%;
  background:linear-gradient(150deg, #d0d0d0 0%, #cccccc 50%, #c8c8c8 100%);
  display:flex; align-items:center; justify-content:center;
  transition:background 200ms ease;
}
.glossy-btn:hover .glossy-inner{
  background:linear-gradient(150deg, #d0d0d0 0%, #e8e8e8 50%, #c8c8c8 100%);
}
.icon-wrap{ position:relative; width:34px; height:34px; }
.icon-wrap svg{ position:absolute; inset:0; width:100%; height:100%; }
.icon-shadow{ transform:translate(-49%, -46%); position:absolute; left:50%; top:50%; opacity:.4; }
.icon-main{ position:relative; z-index:1; color:var(--ink); }
.glossy-btn.pressed .icon-main{ opacity:.8; }