/* Кнопка. Макет: 430×92, Jeko Black 24, заливка #AE00E8, рваная кисть по краю.
   Hover: подложка растёт до 444×104 и получает зерно. Disabled: серая.
   Форма кисти и цвет разведены: форма в assets/brush-button.svg, цвет в CSS,
   поэтому одна и та же маска работает во всех состояниях. */

.btn{
  --btn-bg:var(--purple);
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  min-height:calc(var(--btn-fs) * 1.25 + var(--btn-py) * 2);
  padding:var(--btn-py) var(--btn-px);
  border:0;background:none;
  font-family:var(--font);font-weight:var(--fw-black);font-size:var(--btn-fs);line-height:1.25;
  color:var(--paper);text-decoration:none;text-wrap:balance;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}

/* подложка и зерно: одна маска-кисть, вылет за границы блока как в макете */
.btn::before,
.btn::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  top:-3.9%;left:-.65%;right:-1%;bottom:-6.8%;
  -webkit-mask:url("../assets/brush-button.svg") center/100% 100% no-repeat;
          mask:url("../assets/brush-button.svg") center/100% 100% no-repeat;
  transform-origin:center;
  transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.btn::before{background:var(--btn-bg)}
.btn::after{background:url("../assets/grain-purple.svg") 0 0/256px 256px;opacity:0}

/* hover: 430×92 → 444×104 */
.btn:hover:not([disabled]):not([aria-disabled="true"])::before,
.btn:hover:not([disabled]):not([aria-disabled="true"])::after,
.btn.is-hover::before,
.btn.is-hover::after{transform:scale(1.0326,1.1304)}
.btn:hover:not([disabled]):not([aria-disabled="true"])::after,
.btn.is-hover::after{opacity:1}

.btn:active:not([disabled]):not([aria-disabled="true"])::before,
.btn:active:not([disabled]):not([aria-disabled="true"])::after{transform:scale(.985)}

/* тач-экран: касание даёт то же состояние, что hover (рост и зерно), без сжатия */
@media (hover:none){
  .btn:active:not([disabled]):not([aria-disabled="true"])::before,
  .btn:active:not([disabled]):not([aria-disabled="true"])::after{transform:scale(1.0326,1.1304)}
  .btn:active:not([disabled]):not([aria-disabled="true"])::after{opacity:1}
}

/* disabled */
.btn[disabled],
.btn[aria-disabled="true"]{--btn-bg:var(--gray-fill);color:var(--gray-ink);cursor:not-allowed}

/* обводка фокуса идёт по прямоугольнику кнопки, а не по рваному краю */
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:6px}