/* ═══════════════════════════════════════════════════════════════
   rg-button.css — RadialGlowButton port vanilla
   Usa @property para animar custom properties (Chrome 85+, FF 128+)
═══════════════════════════════════════════════════════════════ */

/* ─── @property declarations (deben estar en top-level) ─────── */
@property --rg-pos-x        { syntax: '<percentage>'; initial-value: 40%;               inherits: false; }
@property --rg-pos-y        { syntax: '<percentage>'; initial-value: 140%;              inherits: false; }
@property --rg-spread-x     { syntax: '<percentage>'; initial-value: 130%;              inherits: false; }
@property --rg-spread-y     { syntax: '<percentage>'; initial-value: 170%;              inherits: false; }
@property --rg-color-1      { syntax: '<color>';      initial-value: #030212;           inherits: false; }
@property --rg-color-2      { syntax: '<color>';      initial-value: #1d4ed8;           inherits: false; }
@property --rg-color-3      { syntax: '<color>';      initial-value: #7c3aed;           inherits: false; }
@property --rg-color-4      { syntax: '<color>';      initial-value: #c084fc;           inherits: false; }
@property --rg-color-5      { syntax: '<color>';      initial-value: hsl(260 80% 2.5%); inherits: false; }
@property --rg-border-angle { syntax: '<angle>';      initial-value: 180deg;            inherits: true;  }
@property --rg-border-c1    { syntax: '<color>';      initial-value: hsla(260,75%,90%,0.7);  inherits: true; }
@property --rg-border-c2    { syntax: '<color>';      initial-value: hsla(260,50%,90%,0.25); inherits: true; }
@property --rg-stop-1       { syntax: '<percentage>'; initial-value: 37.35%;  inherits: false; }
@property --rg-stop-2       { syntax: '<percentage>'; initial-value: 61.36%;  inherits: false; }
@property --rg-stop-3       { syntax: '<percentage>'; initial-value: 78.42%;  inherits: false; }
@property --rg-stop-4       { syntax: '<percentage>'; initial-value: 93.52%;  inherits: false; }
@property --rg-stop-5       { syntax: '<percentage>'; initial-value: 100%;    inherits: false; }

/* ─── BOTON ──────────────────────────────────────────────────── */
.rg-button {
  --rg-bg: radial-gradient(
    var(--rg-spread-x) var(--rg-spread-y) at var(--rg-pos-x) var(--rg-pos-y),
    var(--rg-color-1) var(--rg-stop-1),
    var(--rg-color-2) var(--rg-stop-2),
    var(--rg-color-3) var(--rg-stop-3),
    var(--rg-color-4) var(--rg-stop-4),
    var(--rg-color-5) var(--rg-stop-5)
  );

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  min-height: 51px;
  padding: 14px 28px;
  border: none;
  border-radius: 11px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  color: rgba(255 255 255 / 0.95);
  background: var(--rg-bg);
  cursor: pointer;
  text-decoration: none;
  text-shadow: 0 0 2px rgba(0 0 0 / 0.95);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;

  /* Transiciones de todas las custom props — lo que hace la magia */
  transition:
    --rg-pos-x .75s, --rg-pos-y .75s,
    --rg-spread-x .75s, --rg-spread-y .75s,
    --rg-color-1 .75s, --rg-color-2 .75s,
    --rg-color-3 .75s, --rg-color-4 .75s, --rg-color-5 .75s,
    --rg-border-angle .75s, --rg-border-c1 .75s, --rg-border-c2 .75s,
    --rg-stop-1 .75s, --rg-stop-2 .75s,
    --rg-stop-3 .75s, --rg-stop-4 .75s, --rg-stop-5 .75s,
    transform 0.18s cubic-bezier(0.34,1.56,0.64,1);
}

/* ── Border shine — mask-composite: exclude igual que el original ── */
.rg-button::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background-image: linear-gradient(
    var(--rg-border-angle),
    var(--rg-border-c1),
    var(--rg-border-c2)
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* ── Hover state — gradiente se mueve dramaticamente ── */
.rg-button:hover {
  --rg-pos-x: 0%;
  --rg-pos-y: 120%;
  --rg-spread-x: 110%;
  --rg-spread-y: 110%;
  --rg-color-1: #020210;
  --rg-color-2: #c084fc;
  --rg-color-3: #7c3aed;
  --rg-color-4: #4338ca;
  --rg-stop-1: 0%;
  --rg-stop-2: 10%;
  --rg-stop-3: 35%;
  --rg-stop-4: 71%;
  --rg-stop-5: 150%;
  --rg-border-angle: 190deg;
  --rg-border-c1: hsla(280,75%,90%,0.1);
  --rg-border-c2: hsla(280,50%,90%,0.4);
  --rg-shine-opacity: 1;
  transform: translateY(-2px);
}
.rg-button:active { transform: translateY(0) scale(0.97); }
.rg-button:focus-visible {
  outline: 2px solid var(--hue-magenta);
  outline-offset: 3px;
}

/* ── Inner bg layer (copia el gradiente con cut de 1px) ── */
.rg-bg {
  position: absolute;
  inset: 1px;
  background: var(--rg-bg);
  border-radius: inherit;
  transition: background 0.25s, opacity 0.25s;
  pointer-events: none;
}

/* ── Shine spinner — soft-light blend sobre el boton ── */
.rg-shine {
  position: absolute;
  inset: 0;
  container-type: size;
  border-radius: inherit;
  mix-blend-mode: soft-light;
  opacity: var(--rg-shine-opacity, 0);
  transition: opacity 0.3s;
  overflow: hidden;
  pointer-events: none;
}
.rg-shine > span {
  position: absolute;
  inset: 0;
  height: 100cqh;
  aspect-ratio: 1;
  animation: rgSlide 1.2s ease-in-out infinite alternate;
  overflow: visible;
}
.rg-shine > span::before {
  content: '';
  position: absolute;
  inset: -100%;
  background: conic-gradient(
    from calc(270deg - (90deg * 0.5)),
    transparent 0,
    #fff 90deg,
    transparent 90deg
  );
  animation: rgSpin 2.4s linear infinite;
}

/* ── Label — encima de todo ── */
.rg-label {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

/* ─── KEYFRAMES ──────────────────────────────────────────────── */
@keyframes rgSpin {
  0%        { rotate: 0deg;   }
  15%, 35%  { rotate: 90deg;  }
  65%, 85%  { rotate: 270deg; }
  100%      { rotate: 360deg; }
}
@keyframes rgSlide {
  to { transform: translate(calc(100cqw - 100%), 0); }
}

/* ─── HERO ACTIONS WRAPPER ───────────────────────────────────── */
.hero__actions {
  position: absolute;
  bottom: clamp(2rem, 5vw, 3.5rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .hero__actions { flex-direction: column; align-items: stretch; }
  .rg-button     { width: 100%; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .rg-button          { transition: transform 0.2s; }
  .rg-shine > span,
  .rg-shine > span::before { animation: none; }
}