/* ---- BUTTONS ----
   Концы кнопки — те же SVG, что у заголовка (banner-end.svg — тёмная, banner-end-gold.svg — золотая), середина — градиент с золотыми линиями.
   --e = ширина конца; середина рисуется между концами с перехлёстом 1px. */
.btn {
  --e: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: all 0.35s var(--ease);
  position: relative;
  white-space: nowrap;
}
.btn--sm { --e: 20px; padding: 10px 20px; font-size: 0.7rem; }
.btn--lg { --e: 32px; padding: 18px 40px; font-size: 0.85rem; }
.btn--full { width: 100%; }

.btn--gold, .btn--outline {
  padding-inline: calc(var(--e) + 18px);
  border: 0; border-radius: 0;
}
.btn--gold {
  --end: url('/design/assets/ornaments/banner-end-gold.svg');
  color: #15100a;
  background:
    linear-gradient(var(--gold-btn-line-light), var(--gold-btn-line-light)) center top / calc(100% - 2 * var(--e) + 2px) 1px no-repeat,
    linear-gradient(var(--gold-btn-line-dark), var(--gold-btn-line-dark)) center bottom / calc(100% - 2 * var(--e) + 2px) 1px no-repeat,
    linear-gradient(180deg, #ecca7e, #b08a45) center / calc(100% - 2 * var(--e) + 2px) 100% no-repeat;
}
.btn--outline {
  --end: url('/design/assets/ornaments/banner-end.svg');
  color: var(--gold-3);
  background:
    linear-gradient(var(--line-light), var(--line-light)) center top / calc(100% - 2 * var(--e) + 2px) 1px no-repeat,
    linear-gradient(var(--line-dark), var(--line-dark)) center bottom / calc(100% - 2 * var(--e) + 2px) 1px no-repeat,
    linear-gradient(180deg, var(--plate-1), var(--plate-2)) center / calc(100% - 2 * var(--e) + 2px) 100% no-repeat;
}
.btn--gold::before, .btn--gold::after,
.btn--outline::before, .btn--outline::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0;
  width: var(--e);
  background: var(--end) center / 100% 100% no-repeat;
  pointer-events: none;
}
.btn--gold::after, .btn--outline::after { left: auto; right: 0; transform: scaleX(-1); }
/* «Дыхание»: мягкая золотая подсветка кнопки; при наведении замирает и становится ярче */
.btn--gold, .btn--outline { animation: btnBreath 3s ease-in-out infinite; }
.btn--gold:hover, .btn--outline:hover {
  animation: none;
  filter: brightness(1.1) drop-shadow(0 0 12px rgb(var(--gold-1-rgb) / 0.7));
}

.btn--ghost { color: var(--text-1); opacity: 0.85; }
.btn--ghost:hover { opacity: 1; color: var(--gold-2); }

.btn.loading { pointer-events: none; opacity: 0.7; }