/* ============ BUTTON SYSTEM: satin, glass, pearl ============
   Primary (.btn-cta): a satin pill. Woven texture (/ui/satin.webp, overlay so it takes any palette colour), a soft top
   sheen, a warm inner rim, a pressed inset, and a slow light sweep across the fabric on hover. A small arrow chip slides.
   Secondary (.btn-ghost, nav, chips, tabs, pills): frosted glass with a hairline gradient edge that warms toward the
   accent on hover, grain texture, and an inner top highlight.
   Play buttons: a pearl. Radial nacre, a moving glint, a soft halo when playing. */
:root{--warm:#ffb37a;--sat-tex:url(/ui/satin.webp);--grain-tex:url(/ui/grain.webp)}
.btn{position:relative;isolation:isolate;overflow:hidden;gap:12px;padding:16px 30px;letter-spacing:.01em;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,background-color .35s,color .35s;-webkit-tap-highlight-color:transparent}
.btn:active{transform:translateY(1px) scale(.985)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

.btn-cta{
  color:var(--cta-ink);
  background-color:var(--cta);
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.48) 0%,rgba(255,255,255,.08) 46%,rgba(0,0,0,0) 54%,rgba(0,0,0,.14) 100%),
    var(--sat-tex);
  background-size:100% 100%,180px 180px;
  background-blend-mode:normal,overlay;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -2px 3px rgba(0,0,0,.16),
    inset 0 0 0 1px color-mix(in srgb,var(--cta) 70%,#000 30%),
    0 1px 1px rgba(0,0,0,.25),
    0 10px 26px -12px color-mix(in srgb,var(--cta) 75%,transparent),
    0 18px 40px -22px color-mix(in srgb,var(--warm) 55%,transparent);
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.btn-cta::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 45%,color-mix(in srgb,var(--warm) 40%,rgba(255,255,255,.35)) 50%,transparent 64%);
  transform:translateX(-130%);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.btn-cta::after{content:"";position:absolute;left:10%;right:10%;top:1px;height:42%;z-index:-1;border-radius:99px;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 0%,rgba(255,255,255,.55),transparent 70%);opacity:.65}
.btn-cta:hover{transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 3px rgba(0,0,0,.14),inset 0 0 0 1px color-mix(in srgb,var(--cta) 70%,#000 30%),
    0 2px 2px rgba(0,0,0,.2),0 16px 36px -12px color-mix(in srgb,var(--cta) 85%,transparent),0 24px 56px -24px color-mix(in srgb,var(--warm) 70%,transparent)}
.btn-cta:hover::before{transform:translateX(130%)}
.btn-cta:active{box-shadow:inset 0 2px 6px rgba(0,0,0,.22),inset 0 0 0 1px color-mix(in srgb,var(--cta) 70%,#000 30%),0 4px 12px -8px var(--cta)}
.btn .ar{display:inline-grid;place-items:center;width:26px;height:26px;margin:-4px -14px -4px 2px;border-radius:50%;font-size:13px;
  background:color-mix(in srgb,var(--cta-ink) 12%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.35);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.btn:hover .ar{transform:translateX(3px)}

.btn-ghost,nav .btn-cta.small-ghost{
  color:var(--ink);
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--ink) 8%,transparent),color-mix(in srgb,var(--bg) 30%,transparent)) padding-box,
    linear-gradient(135deg,color-mix(in srgb,var(--ink) 42%,transparent),color-mix(in srgb,var(--ink) 6%,transparent) 45%,color-mix(in srgb,var(--warm) 38%,transparent)) border-box;
  border:1px solid transparent;
  backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ink) 18%,transparent),0 8px 24px -16px rgba(0,0,0,.6);
}
.btn-ghost::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--grain-tex);background-size:160px;opacity:.35;mix-blend-mode:overlay;pointer-events:none}
.btn-ghost:hover{transform:translateY(-2px);color:var(--ink);
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--ink) 14%,transparent),color-mix(in srgb,var(--accent) 6%,transparent)) padding-box,
    linear-gradient(135deg,color-mix(in srgb,var(--warm) 70%,transparent),color-mix(in srgb,var(--accent) 40%,transparent) 55%,color-mix(in srgb,var(--ink) 20%,transparent)) border-box;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ink) 24%,transparent),0 12px 30px -16px color-mix(in srgb,var(--accent) 50%,transparent)}

/* glass chips, tabs, quote arrows, player pills */
.chip,.qbtn,.tabs{
  background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 7%,transparent),color-mix(in srgb,var(--ink) 1%,transparent)) padding-box,
    linear-gradient(135deg,color-mix(in srgb,var(--ink) 30%,transparent),color-mix(in srgb,var(--ink) 5%,transparent) 50%,color-mix(in srgb,var(--accent) 22%,transparent)) border-box;
  border:1px solid transparent;box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ink) 14%,transparent)}
.chip{transition:background .3s,color .3s,box-shadow .3s,transform .25s}
.chip:hover{transform:translateY(-1px);
  background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 11%,transparent),color-mix(in srgb,var(--accent) 5%,transparent)) padding-box,
    linear-gradient(135deg,color-mix(in srgb,var(--warm) 60%,transparent),color-mix(in srgb,var(--accent) 35%,transparent)) border-box}
.chip.on{color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.25);
  background-color:var(--accent);
  background-image:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0) 55%,rgba(0,0,0,.12)),var(--sat-tex);
  background-size:100% 100%,160px 160px;background-blend-mode:normal,overlay;background-origin:border-box;background-clip:border-box;
  border-color:color-mix(in srgb,var(--accent) 70%,#000);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.12),0 6px 18px -10px var(--accent)}
.tabs button.on{color:var(--bg);
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 60%),var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 4px 12px -6px rgba(0,0,0,.5)}
.qbtn{transition:transform .25s,box-shadow .3s}
.qbtn:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ink) 20%,transparent),0 8px 20px -12px var(--accent)}
.pill{background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 7%,transparent),color-mix(in srgb,var(--bg) 40%,transparent)) padding-box,
    linear-gradient(135deg,color-mix(in srgb,var(--ink) 26%,transparent),color-mix(in srgb,var(--ink) 4%,transparent) 50%,color-mix(in srgb,var(--accent) 22%,transparent)) border-box;
  border:1px solid transparent;box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ink) 12%,transparent),0 10px 30px -20px rgba(0,0,0,.7)}
.pill:hover,.pill.playing{background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 10%,transparent),color-mix(in srgb,var(--accent) 5%,transparent)) padding-box,
    linear-gradient(135deg,color-mix(in srgb,var(--warm) 55%,transparent),color-mix(in srgb,var(--accent) 40%,transparent) 50%,color-mix(in srgb,var(--ink) 14%,transparent)) border-box}

/* pearl play buttons */
.play{
  background:
    radial-gradient(60% 50% at 34% 26%,rgba(255,255,255,.75),rgba(255,255,255,0) 60%),
    radial-gradient(90% 90% at 70% 80%,color-mix(in srgb,var(--warm) 45%,transparent),transparent 60%),
    radial-gradient(circle at 40% 35%,color-mix(in srgb,var(--accent) 85%,#fff 15%),color-mix(in srgb,var(--accent) 55%,var(--deep)) 60%,var(--deep) 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.6),inset 0 -3px 6px rgba(0,0,0,.28),0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent),0 8px 18px -8px color-mix(in srgb,var(--accent) 70%,transparent);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.play svg{filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.pill:hover .play,.card .ctrl .play:hover,.play:hover{transform:scale(1.06)}
.playing .play,.play.playing{box-shadow:inset 0 1px 1px rgba(255,255,255,.6),inset 0 -3px 6px rgba(0,0,0,.28),0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent),
  0 0 0 6px color-mix(in srgb,var(--accent) 12%,transparent),0 0 24px 2px color-mix(in srgb,var(--warm) 35%,transparent)}
@media (prefers-reduced-motion:reduce){.btn-cta::before{transition:none}.btn,.chip,.play{transition:none}}