/* ── Gradient Button Effect — RED Theme ── */

@property --pos-x {
  syntax: '<percentage>';
  initial-value: 11.14%;
  inherits: false;
}
@property --pos-y {
  syntax: '<percentage>';
  initial-value: 140%;
  inherits: false;
}
@property --spread-x {
  syntax: '<percentage>';
  initial-value: 150%;
  inherits: false;
}
@property --spread-y {
  syntax: '<percentage>';
  initial-value: 180.06%;
  inherits: false;
}
@property --color-1 {
  syntax: '<color>';
  initial-value: #000;
  inherits: false;
}
@property --color-2 {
  syntax: '<color>';
  initial-value: #1e1e21;
  inherits: false;
}
@property --color-3 {
  syntax: '<color>';
  initial-value: #27272a;
  inherits: false;
}
@property --color-4 {
  syntax: '<color>';
  initial-value: #e4e4e7;
  inherits: false;
}
@property --color-5 {
  syntax: '<color>';
  initial-value: #9f9fa9;
  inherits: false;
}
@property --border-angle {
  syntax: '<angle>';
  initial-value: 20deg;
  inherits: true;
}
@property --border-color-1 {
  syntax: '<color>';
  initial-value: hsla(0, 75%, 60%, 0.2);
  inherits: true;
}
@property --border-color-2 {
  syntax: '<color>';
  initial-value: hsla(0, 75%, 40%, 0.75);
  inherits: true;
}
@property --stop-1 {
  syntax: '<percentage>';
  initial-value: 37.35%;
  inherits: false;
}
@property --stop-2 {
  syntax: '<percentage>';
  initial-value: 61.36%;
  inherits: false;
}
@property --stop-3 {
  syntax: '<percentage>';
  initial-value: 78.42%;
  inherits: false;
}
@property --stop-4 {
  syntax: '<percentage>';
  initial-value: 89.52%;
  inherits: false;
}
@property --stop-5 {
  syntax: '<percentage>';
  initial-value: 100%;
  inherits: false;
}

.gradient-btn {
  position: relative;
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  color: #fff;
  font-weight: 700;
  font-family: 'Lenia Mono', monospace;
  background: radial-gradient(
    var(--spread-x) var(--spread-y) at var(--pos-x) var(--pos-y),
    var(--color-1) var(--stop-1),
    var(--color-2) var(--stop-2),
    var(--color-3) var(--stop-3),
    var(--color-4) var(--stop-4),
    var(--color-5) var(--stop-5)
  ) !important;
  transition:
    --pos-x 0.5s, --pos-y 0.5s, --spread-x 0.5s, --spread-y 0.5s,
    --color-1 0.5s, --color-2 0.5s, --color-3 0.5s, --color-4 0.5s, --color-5 0.5s,
    --border-angle 0.5s, --border-color-1 0.5s, --border-color-2 0.5s,
    --stop-1 0.5s, --stop-2 0.5s, --stop-3 0.5s, --stop-4 0.5s, --stop-5 0.5s,
    transform 0.3s;
}

.gradient-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(var(--border-angle), var(--border-color-1), var(--border-color-2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.gradient-btn:hover {
  --pos-x: 0%;
  --pos-y: 91.51%;
  --spread-x: 120.24%;
  --spread-y: 103.18%;
  --color-1: #9f9fa9;
  --color-2: #e4e4e7;
  --color-3: #3f3f46;
  --color-4: #18181b;
  --color-5: #000;
  --border-angle: 190deg;
  --border-color-1: hsla(0, 78%, 90%, 0.1);
  --border-color-2: hsla(0, 75%, 90%, 0.6);
  --stop-1: 0%;
  --stop-2: 8.8%;
  --stop-3: 21.44%;
  --stop-4: 71.34%;
  --stop-5: 85.76%;
  transform: translateY(-2px);
}

/* Outline variant */
.gradient-btn-outline {
  position: relative;
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: 'Lenia Mono', monospace;
  background: transparent !important;
  border: none;
  color: #fff;
  --border-angle: 200deg;
  --border-color-1: hsla(0, 75%, 90%, 0.6);
  --border-color-2: hsla(0, 50%, 90%, 0.15);
  transition: --border-angle 0.5s, --border-color-1 0.5s, --border-color-2 0.5s, transform 0.3s;
}

.gradient-btn-outline::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(var(--border-angle), var(--border-color-1), var(--border-color-2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.gradient-btn-outline:hover {
  --border-angle: 210deg;
  --border-color-1: hsla(0, 75%, 90%, 0.2);
  --border-color-2: hsla(0, 50%, 90%, 0.75);
  transform: translateY(-2px);
  color: #fff;
}