/* Главная кнопка «Записаться на приём» — одна на весь сайт (Hero, #implant, футер).
   ::before — фон: пилюля (content-box) + пятно того же цвета у курсора в поле 24 px вокруг (border-box).
   filter: blur + url(#cta-goo) сливает пилюлю и пятно — край вытягивается к курсору (пен simeydotme).
   --ga (0% → 100%) «вытекает» через @property.
   Покой (выбор заказчика 25.09, вариант B + магнит C):
   • стрелка в круге 36 px (белый .12), раз в 5 с два шага вправо по 4 px;
   • мышь: на подлёте ≤140 px кнопка тянется к курсору до 6 px (transform), тень опускается до 4 px —
     кнопка «приподнимается». JS пишет --mx/--my/--near и --x/--y. Тач — только стрелка.
   • reduced motion — всё статично. */
@property --ga{syntax:"<percentage>";inherits:true;initial-value:0%}
.cta{--x:50;--y:50;--ga:0%;
  --spring:linear(0,0.002,0.01 0.9%,0.038 1.8%,0.156,0.312 5.8%,0.789 11.1%,1.015 14.2%,1.096,1.157,1.199,1.224 20.3%,1.231,1.231,1.226,1.214 24.6%,1.176 26.9%,1.057 32.6%,1.007 35.5%,0.984,0.968,0.956,0.949 42%,0.946 44.1%,0.95 46.5%,0.998 57.2%,1.007,1.011 63.3%,1.012 68.3%,0.998 84%,1);
  --ease-out-cta:cubic-bezier(.23,1,.32,1);
  position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:14px;padding-right:10px!important;
  background:transparent!important;color:#fff;border:0!important;border-radius:9999px;overflow:visible;
  scale:1;transform:translate(calc(var(--mx,0) * 1px),calc(var(--my,0) * 1px));
  transition:scale .6s var(--spring),--ga .35s ease,transform .35s var(--ease-out-cta)}
.cta::before{content:"";position:absolute;inset:0;padding:24px;margin:-24px;z-index:-1;border-radius:9999px;pointer-events:none;
  background:
    radial-gradient(30% 55% at calc(var(--x) * 1%) calc(var(--y) * 1% - 18%),color-mix(in srgb,rgba(255,255,255,.14) var(--ga),transparent) 0%,transparent 100%) content-box,
    linear-gradient(#2a2a2a,#161616) content-box,
    radial-gradient(45% 80% at calc(var(--x) * 1%) calc(var(--y) * 1%),color-mix(in srgb,#1d1d1d var(--ga),transparent) 0%,transparent 90%) border-box;
  filter:blur(15px) url(#cta-goo)}
/* тень ПОД goo: без scale (scale давал светлое кольцо). Верх слоя на 14 px ниже кромки — над кнопкой
   тени нет вовсе; дышит opacity .7→1; на подлёте мыши опускается на 4 px */
.cta>.cta-shadow{position:absolute;inset:14px 12px 0;z-index:-2;border-radius:9999px;pointer-events:none;
  box-shadow:0 12px 24px -6px rgba(20,24,30,.32);animation:cta-breathe 3.5s ease-in-out infinite alternate;
  transform:translateY(calc(var(--near,0) * 4px));transition:opacity .4s ease,transform .35s var(--ease-out-cta)}
@keyframes cta-breathe{from{opacity:.7}to{opacity:1}}
/* отсвет верхней кромки — 1 px белый .16 СТРОГО внутри пилюли. Только там, где нет goo-фильтра
   (тач): с фильтром видимый край пилюли на 2 px выше бокса, и линия по боксу читалась вторым контуром */
.cta::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.cta>*{position:relative;z-index:1}
/* стрелка в круге: 16 + 2×10 = 36 px, по центру высоты 54 → поля 9 px */
.cta>svg{box-sizing:content-box;flex:none;width:16px;height:16px;padding:0;
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  transition:background-color .2s ease;animation:cta-nudge 5s var(--ease-out-cta) 1.2s infinite}
@keyframes cta-nudge{0%,26%,100%{transform:translateX(0)}6%,18%{transform:translateX(4px)}12%{transform:translateX(0)}}
@media (hover:hover) and (pointer:fine){
  .cta::after{box-shadow:none}
  .cta:hover{--ga:100%}
  .cta:hover .cta-shadow{animation-play-state:paused}
  .cta:hover>svg{animation-play-state:paused}
}
.cta:active{scale:.97;transition-duration:.12s}
/* goo съедает ~2 px края пилюли по бокам: offset 1 → видимый зазор до обводки 3 px; на таче — 3 px */
.cta:focus-visible{outline:2px solid #212121;outline-offset:1px}
.cta[data-press]{scale:1.03;transition:scale .25s cubic-bezier(.16,1,.3,1)}
/* тач: капли нет (--ga 0) — фильтр снят, отсвет кромки виден */
@media (hover:none),(pointer:coarse){.cta::before{filter:none}.cta:focus-visible{outline-offset:3px}}
@media (prefers-reduced-motion:reduce){
  .cta{scale:1!important;transition:none!important;transform:none!important}
  .cta>svg{animation:none!important}
  .cta-shadow{animation:none!important;opacity:1;transform:none!important}
  .cta::before{filter:drop-shadow(0 .35em .6em rgba(33,33,33,.22))}
}