/* Shared relief and press motion, matching the connection-card Copy IP button. */
.button-primary,
.button-shop,
.mode-carousel-controls > button {
  --button-face: linear-gradient(120deg, #f9d787, #dca940);
  --button-ink: #241a07;
  --button-edge: #ffe8b16b;
  --button-base: #926523;
  --button-shine: #fff2c5;
  --button-glow: #d5a33b1f;
  --button-hover-glow: #d5a33b32;
  --button-press-glow: #d5a33b20;
}

.button-discord,
.button-outline {
  --button-face: linear-gradient(120deg, #156386, #0e4563);
  --button-ink: #e8f5fa;
  --button-edge: #58c8ee50;
  --button-base: #082f45;
  --button-shine: #b5efff;
  --button-glow: #39baf61f;
  --button-hover-glow: #39baf632;
  --button-press-glow: #39baf620;
}

.button.copy-success {
  --button-face: #103026;
  --button-ink: #6ee7a5;
  --button-edge: #6ee7a566;
  --button-base: #0a211b;
  --button-shine: #6ee7a5;
  --button-glow: #56d79418;
  --button-hover-glow: #56d79422;
  --button-press-glow: #56d79418;
}

.button:is(.button-primary, .button-shop, .button-discord, .button-outline),
.mode-carousel-controls > button:not(:disabled) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--button-face);
  color: var(--button-ink);
  border-color: var(--button-edge);
  box-shadow: 0 4px 0 var(--button-base), 0 8px 26px var(--button-glow);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.button:is(.button-primary, .button-shop, .button-discord, .button-outline) {
  border-radius: 10px;
}

.button:is(.button-primary, .button-shop, .button-discord, .button-outline)::before,
.mode-carousel-controls > button:not(:disabled)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--button-shine);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.button:is(.button-primary, .button-shop, .button-discord, .button-outline):not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible),
.mode-carousel-controls > button:not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible) {
  background: var(--button-face);
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--button-base), 0 12px 32px var(--button-hover-glow);
}

.button:is(.button-primary, .button-shop, .button-discord, .button-outline):not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible)::before,
.mode-carousel-controls > button:not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible)::before {
  opacity: .16;
}

.button:is(.button-primary, .button-shop, .button-discord, .button-outline):not(:disabled):not([aria-disabled="true"]):active,
.mode-carousel-controls > button:not(:disabled):not([aria-disabled="true"]):active {
  background: var(--button-face);
  transform: translateY(1px);
  box-shadow: 0 3px 0 var(--button-base), 0 6px 20px var(--button-press-glow);
}

.button:is(.button-primary, .button-shop, .button-discord, .button-outline):is(:disabled, [aria-disabled="true"]) {
  transform: none;
}

.button:is(.button-primary, .button-shop, .button-discord, .button-outline):is(:disabled, [aria-disabled="true"])::before {
  opacity: 0;
}

/* Carousel arrows use a flat face in every interaction state. */
#mode-prev,
#mode-next {
  box-shadow: none;
}

/* Hero Discord: the surrounding glow grows together with the existing lift. */
#inicio .button[data-external="discord"] {
  --button-face: #818cf8;
  --button-ink: #fff;
  --button-edge: #c7d2fe99;
  --button-base: #4139c1;
  --button-shine: #eef2ff;
  --button-glow: #818cf826;
  --button-hover-glow: #818cf84d;
  --button-press-glow: #818cf833;
  box-shadow: 0 4px 0 var(--button-base), 0 8px 26px var(--button-glow), 0 0 0 0 #818cf800;
  transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}

#inicio .button[data-external="discord"]::before {
  transition: opacity 260ms ease;
}

#inicio .button[data-external="discord"]:not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible) {
  box-shadow: 0 6px 0 var(--button-base), 0 12px 32px var(--button-hover-glow), 0 0 28px 3px #818cf859;
}

#inicio .button[data-external="discord"]:not(:disabled):not([aria-disabled="true"]):active {
  box-shadow: 0 3px 0 var(--button-base), 0 6px 20px var(--button-press-glow), 0 0 15px 1px #818cf82e;
}

/* Match the neighbouring Discord halo while retaining green copy feedback. */
#inicio .button[data-copy] {
  --hero-copy-halo-rgb: 233, 188, 98;
  box-shadow: 0 4px 0 var(--button-base), 0 8px 26px var(--button-glow), 0 0 0 0 rgba(var(--hero-copy-halo-rgb), 0);
  transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}

#inicio .button[data-copy]:not(.copy-success) {
  --button-glow: #e9bc6226;
  --button-hover-glow: #e9bc624d;
  --button-press-glow: #e9bc6233;
}

#inicio .button[data-copy].copy-success {
  --hero-copy-halo-rgb: 86, 215, 148;
}

#inicio .button[data-copy]::before {
  transition: opacity 260ms ease;
}

#inicio .button[data-copy]:not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible) {
  box-shadow: 0 6px 0 var(--button-base), 0 12px 32px var(--button-hover-glow), 0 0 28px 3px rgba(var(--hero-copy-halo-rgb), .35);
}

#inicio .button[data-copy]:not(:disabled):not([aria-disabled="true"]):active {
  box-shadow: 0 3px 0 var(--button-base), 0 6px 20px var(--button-press-glow), 0 0 15px 1px rgba(var(--hero-copy-halo-rgb), .18);
}

@media (prefers-reduced-motion: reduce) {
  .button:is(.button-primary, .button-shop, .button-discord, .button-outline),
  .mode-carousel-controls > button,
  .button:is(.button-primary, .button-shop, .button-discord, .button-outline):is(:hover, :active, :focus-visible),
  .mode-carousel-controls > button:is(:hover, :active, :focus-visible) {
    transform: none !important;
    transition: none !important;
  }

  .button:is(.button-primary, .button-shop, .button-discord, .button-outline)::before,
  .mode-carousel-controls > button::before {
    transition: none !important;
  }
}