/* Pearlescent pills inspired by Martin Mroc's Upload Button / Shader Exploration.
   CSS reflections keep the effect lightweight, with no canvas or graphics dependency. */
@property --rim-turn { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.shader-button:is(a, button, span) {
  --button-face: linear-gradient(155deg, #e9e9eb 0%, #f5f5f6 34%, #fff 68%, #eeeef1 100%);
  --button-edge: conic-gradient(from calc(var(--rim-turn) + var(--pointer-angle, 125deg)),
    #f8f8ff 0deg, #b9bacb 48deg, #393946 77deg, #ededfa 96deg,
    #fff 102deg, #ffb18d 104deg, #eaff8c 106deg, #8fe3ff 108deg,
    #bfa5ff 110deg, #fff 113deg, #e8e9f1 150deg, #fff 195deg,
    #a4a6b7 238deg, #393948 266deg, #fff 282deg,
    #ffbd9d 284deg, #efffa1 286deg, #94dcff 288deg, #c9acff 290deg,
    #eeeef8 294deg, #fff 325deg, #f8f8ff 360deg);
  position: relative;
  isolation: isolate;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: var(--button-face) padding-box, var(--button-edge) border-box;
  color: #303034;
  box-shadow: inset 0 1px 1px #fff, inset 0 -2px 3px #b4b4c01f,
    0 2px 2px #17172320, 0 6px 14px #17172316;
  text-shadow: 0 1px 0 #ffffffb3;
  transition: transform .22s ease, box-shadow .22s ease;
  animation: reflective-rim 5s linear infinite paused;
  touch-action: manipulation;
}
.shader-button:is(a, button, span)::before {
  content: '';
  position: absolute;
  inset: -5px;
  border: 1px solid #ffffff9c;
  border-bottom-color: #ceced438;
  border-radius: inherit;
  box-shadow: 0 1px 0 #4646500d;
  pointer-events: none;
  opacity: .65;
  transition: opacity .22s;
}
.shader-button:is(a, button, span)::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: radial-gradient(ellipse at var(--light-x, 35%) var(--light-y, 0%), #fff9, transparent 65%);
  opacity: 0;
  mix-blend-mode: soft-light;
  pointer-events: none;
  transition: opacity .22s;
}
@media (hover: hover) and (pointer: fine) {
  .shader-button:is(a, button, span):hover {
    background: var(--button-face) padding-box, var(--button-edge) border-box;
    transform: translateY(-2px);
    box-shadow: inset 0 1px 2px #fff, inset 0 -2px 4px #b4b4c02b,
      0 3px 3px #17172320, 0 10px 22px #17172324;
    animation-play-state: running;
  }
  .shader-button:is(a, button, span):hover::before { opacity: 1; }
  .shader-button:is(a, button, span):hover::after { opacity: .65; }
}
.shader-button:is(a, button, span):focus-visible {
  outline: 2px solid #b7a47d;
  outline-offset: 7px;
  animation-play-state: running;
}
.shader-button:is(a, button, span):active {
  transform: translateY(1px) scale(.98);
  box-shadow: inset 0 2px 5px #31314230, inset 0 -1px 0 #fff, 0 1px 2px #17172312;
}
.shader-button:is(a, button, span)[aria-pressed='true'] {
  --button-face: linear-gradient(150deg, #35443a, #243329 70%, #324437);
  color: #fff;
  text-shadow: 0 1px 1px #0005;
  box-shadow: inset 0 1px 1px #ffffff38, inset 0 -1px 2px #0005, 0 2px 4px #17172320;
}
.shader-button:is(.dialog-close, .project-open) { position: absolute; }
.ui-arrow { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; flex: 0 0 auto; line-height: 1; }
.ui-arrow svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.service-enquire .ui-arrow { width: .9em; height: .9em; margin-left: .3em; vertical-align: -.05em; }
.dialog-copy .note-button.shader-button { background: var(--button-face) padding-box, var(--button-edge) border-box; color: #303034; }
.service-row .shader-button { padding: 11px 17px; margin-top: 3px; }
.header-cta.shader-button { min-height: 44px; }
.hero-tags { gap: 14px; }
.hero-tags a.shader-button { min-height: 43px; }
.project-filters { gap: 12px; }
.enquiry-submit.shader-button { min-height: 54px; }
.gallery-controls button.shader-button { width: 40px; height: 40px; }
.dialog-close.shader-button { width: 40px; height: 40px; }
.project-open.shader-button { width: 40px; height: 40px; }
.shader-button:is(a, button, span):disabled {
  opacity: .5;
  animation: none;
  transform: none;
  cursor: not-allowed;
}
@keyframes reflective-rim { to { --rim-turn: 360deg; } }
@media(max-width: 640px) {
  .header-cta.shader-button { min-height: 40px; padding-inline: 12px; }
  .hero-tags a.shader-button { min-height: 40px; }
  .hero-tags { gap: 12px; }
  .nav-enquire.shader-button { min-height: 38px; display: inline-flex; align-items: center; }
  .project-filters { gap: 12px 10px; }
}
@media(prefers-reduced-motion: reduce) {
  .shader-button:is(a, button, span),
  .shader-button:is(a, button, span)::before,
  .shader-button:is(a, button, span)::after { animation: none; transition: none; }
  .shader-button:is(a, button, span):hover,
  .shader-button:is(a, button, span):active { transform: none; }
}
@media(forced-colors: active) {
  .shader-button:is(a, button, span) { border: 2px solid ButtonText; background: ButtonFace; color: ButtonText; box-shadow: none; text-shadow: none; }
  .shader-button:is(a, button, span)[aria-pressed='true'] { background: Highlight; color: HighlightText; }
  .shader-button:is(a, button, span)::before,
  .shader-button:is(a, button, span)::after { display: none; }
}