Shimmer Button

@property --shb-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes shb-spin { to { --shb-angle: 360deg; } }
@keyframes shb-sweep { 0% { transform: translateX(-140%) skewX(-18deg); } 55%, 100% { transform: translateX(240%) skewX(-18deg); } }

.shb {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 13px 26px; border: none; border-radius: 999px; cursor: pointer;
  font: 600 0.95rem/1 var(--ds-font, system-ui, sans-serif); letter-spacing: -0.01em;
  /* плашка и текст — ПАРА токенов, а не два независимых цвета. Раньше здесь стоял
     тёмный фон и var(--ds-fg): в тёмной теме читалось, в светлой --ds-fg темнеет,
     и надпись пропадала на тёмной плашке. Акцентная пара контрастна в обеих. */
  color: var(--ds-accent-fg, oklch(0.14 0.02 275));
  background: var(--ds-accent, oklch(0.72 0.16 300));
  transition: transform 0.18s var(--ds-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)), box-shadow 0.25s;
  box-shadow: 0 6px 22px var(--ds-accent-ring, oklch(0.5 0.2 295 / 0.25));
}
.shb:hover { transform: translateY(-1px); background: var(--ds-accent-hover, oklch(0.78 0.16 300));
  box-shadow: 0 10px 30px var(--ds-accent-ring, oklch(0.5 0.2 295 / 0.4)); }
.shb:active { transform: translateY(0) scale(0.985); }
.shb:focus-visible { outline: 2px solid var(--ds-accent, oklch(0.75 0.16 300)); outline-offset: 3px; }

/* вращающаяся кайма: конический градиент под маской-рамкой */
.shb::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--shb-angle),
    transparent 0deg, var(--shb-shine) 40deg, transparent 90deg,
    transparent 180deg, var(--shb-shine) 220deg, transparent 270deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: shb-spin var(--shb-dur) linear infinite;
  z-index: -1;
}
/* диагональный зайчик по плашке */
.shb::after {
  content: ""; position: absolute; top: -20%; left: 0; width: 45%; height: 140%;
  background: linear-gradient(90deg, transparent, var(--shb-shine), transparent);
  opacity: 0.32; filter: blur(6px); pointer-events: none;
  animation: shb-sweep var(--shb-dur) cubic-bezier(0.5, 0, 0.2, 1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .shb::before, .shb::after { animation: none; }
  .shb::after { opacity: 0; }
}
html[data-shot] .shb::before, html[data-shot] .shb::after { animation: none; }

"use client";

const css = `@property --shb-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes shb-spin { to { --shb-angle: 360deg; } }
@keyframes shb-sweep { 0% { transform: translateX(-140%) skewX(-18deg); } 55%, 100% { transform: translateX(240%) skewX(-18deg); } }

.shb {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 13px 26px; border: none; border-radius: 999px; cursor: pointer;
  font: 600 0.95rem/1 var(--ds-font, system-ui, sans-serif); letter-spacing: -0.01em;
  /* плашка и текст — ПАРА токенов, а не два независимых цвета. Раньше здесь стоял
     тёмный фон и var(--ds-fg): в тёмной теме читалось, в светлой --ds-fg темнеет,
     и надпись пропадала на тёмной плашке. Акцентная пара контрастна в обеих. */
  color: var(--ds-accent-fg, oklch(0.14 0.02 275));
  background: var(--ds-accent, oklch(0.72 0.16 300));
  transition: transform 0.18s var(--ds-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)), box-shadow 0.25s;
  box-shadow: 0 6px 22px var(--ds-accent-ring, oklch(0.5 0.2 295 / 0.25));
}
.shb:hover { transform: translateY(-1px); background: var(--ds-accent-hover, oklch(0.78 0.16 300));
  box-shadow: 0 10px 30px var(--ds-accent-ring, oklch(0.5 0.2 295 / 0.4)); }
.shb:active { transform: translateY(0) scale(0.985); }
.shb:focus-visible { outline: 2px solid var(--ds-accent, oklch(0.75 0.16 300)); outline-offset: 3px; }

/* вращающаяся кайма: конический градиент под маской-рамкой */
.shb::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--shb-angle),
    transparent 0deg, var(--shb-shine) 40deg, transparent 90deg,
    transparent 180deg, var(--shb-shine) 220deg, transparent 270deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: shb-spin var(--shb-dur) linear infinite;
  z-index: -1;
}
/* диагональный зайчик по плашке */
.shb::after {
  content: ""; position: absolute; top: -20%; left: 0; width: 45%; height: 140%;
  background: linear-gradient(90deg, transparent, var(--shb-shine), transparent);
  opacity: 0.32; filter: blur(6px); pointer-events: none;
  animation: shb-sweep var(--shb-dur) cubic-bezier(0.5, 0, 0.2, 1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .shb::before, .shb::after { animation: none; }
  .shb::after { opacity: 0; }
}
html[data-shot] .shb::before, html[data-shot] .shb::after { animation: none; }
`;
import type { CSSProperties, ReactNode } from "react";

export interface ShimmerButtonProps {
  children?: ReactNode;
  /** Цвет блика. */
  shine?: string;
  /** Длительность пробега блика, сек. */
  duration?: number;
  onClick?: () => void;
}

/**
 * Кнопка с бегущим бликом: по границе крутится коническая подсветка (@property + анимируемый
 * угол), а по самой плашке раз в цикл пробегает диагональный «солнечный зайчик».
 * Оба слоя — псевдоэлементы, поэтому кнопка остаётся обычной кнопкой: контент не обёрнут,
 * фокус и семантика на месте. Уважает prefers-reduced-motion.
 */
export function ShimmerButton({
  children = "Начать бесплатно",
  shine = "#ffffff",
  duration = 2.6,
  onClick,
}: ShimmerButtonProps) {
  return (
    <>
      <style href="motiva-shimmer-button" precedence="medium">{css}</style>
      <button
        className="shb"
        onClick={onClick}
        style={{ "--shb-shine": shine, "--shb-dur": `${duration}s` } as CSSProperties}
      >
        {children}
      </button>
    </>
  );
}