/* Futuristic, dynamic buttons — site-wide.
   Two tiers:
   1) Every button gets smooth motion, hover lift, neon focus ring, press feedback.
   2) Primary/CTA buttons get a gradient skin, animated sheen sweep, and glow.
   Badge spans (.x-check etc.), toggles, and pure layout controls are left alone. */

:root {
  --yal-fx-accent: var(--blue, #1d9bf0);
  --yal-fx-accent-2: #7c5cff;
  --yal-fx-glow: rgba(29, 155, 240, 0.55);
  --yal-fx-ring: rgba(124, 92, 255, 0.6);
  --yal-fx-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Tier 1: every interactive button ---- */
.x-shell button,
.x-auth-wrap button,
.yal-modal button,
button.x-btn,
.x-modal-backdrop button,
.x-share-modal button,
.x-space-modal button,
.x-space-live-modal button {
  position: relative;
  isolation: isolate;
  transition: transform 0.18s var(--yal-fx-ease),
    box-shadow 0.22s var(--yal-fx-ease), filter 0.22s var(--yal-fx-ease),
    background-color 0.22s var(--yal-fx-ease), border-color 0.22s var(--yal-fx-ease);
  will-change: transform;
}

.x-shell button:hover,
.x-auth-wrap button:hover,
.x-space-modal button:hover,
.x-space-live-modal button:hover {
  transform: translateY(-1px);
  filter: brightness(1.08) saturate(1.05);
}

.x-shell button:active,
.x-auth-wrap button:active,
.x-space-modal button:active,
.x-space-live-modal button:active {
  transform: translateY(0) scale(0.965);
  filter: brightness(0.98);
}

/* Neon focus ring (keyboard + click) */
.x-shell button:focus-visible,
.x-auth-wrap button:focus-visible,
.x-space-modal button:focus-visible,
.x-space-live-modal button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6), 0 0 0 4px var(--yal-fx-ring),
    0 0 16px var(--yal-fx-glow);
}

/* Soft glow halo on hover for transparent/secondary buttons */
.x-icon-btn:hover,
.x-tool-btn:hover,
.x-post-more:hover,
.x-stat-btn:hover,
.x-nav-btn:hover {
  box-shadow: 0 0 14px var(--yal-fx-glow);
}

/* ---- Tier 2: primary / CTA buttons ---- */
.x-post-btn,
.x-post-btn:disabled,
.x-compose-actions-icons > button[type="submit"],
.x-share-foot > button[type="submit"],
.x-space-start-btn,
.x-space-listen-btn,
.x-space-talk-btn,
.x-auth-card button[type="submit"],
.x-segment .active,
.yal-cta-btn,
.x-follow > button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid transparent;
  background-image: linear-gradient(
    135deg,
    var(--yal-fx-accent) 0%,
    var(--yal-fx-accent-2) 100%
  );
  background-size: 180% 180%;
  color: #fff !important;
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 10px rgba(29, 155, 240, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  animation: yal-fx-flow 7s ease infinite;
  transition: transform 0.18s var(--yal-fx-ease),
    box-shadow 0.25s var(--yal-fx-ease), filter 0.22s var(--yal-fx-ease);
}

/* Animated sheen sweep */
.x-post-btn::before,
.x-compose-actions-icons > button[type="submit"]::before,
.x-share-foot > button[type="submit"]::before,
.x-space-start-btn::before,
.x-space-listen-btn::before,
.x-space-talk-btn::before,
.x-auth-card button[type="submit"]::before,
.yal-cta-btn::before,
.x-follow > button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, 0.45) 48%,
    transparent 60%
  );
  transform: translateX(-130%);
  transition: transform 0.6s var(--yal-fx-ease);
  pointer-events: none;
}

.x-post-btn:hover,
.x-compose-actions-icons > button[type="submit"]:hover,
.x-share-foot > button[type="submit"]:not(:disabled):hover,
.x-space-start-btn:hover,
.x-space-listen-btn:hover,
.x-space-talk-btn:hover,
.x-auth-card button[type="submit"]:hover,
.yal-cta-btn:hover,
.x-follow > button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px var(--yal-fx-glow),
    0 0 26px rgba(124, 92, 255, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  filter: brightness(1.06);
}

.x-post-btn:hover::before,
.x-compose-actions-icons > button[type="submit"]:hover::before,
.x-share-foot > button[type="submit"]:not(:disabled):hover::before,
.x-space-start-btn:hover::before,
.x-space-listen-btn:hover::before,
.x-space-talk-btn:hover::before,
.x-auth-card button[type="submit"]:hover::before,
.yal-cta-btn:hover::before,
.x-follow > button:hover::before {
  transform: translateX(130%);
}

/* Keep the disabled submit visually muted (not glowing) */
.x-share-foot > button[type="submit"]:disabled,
.x-post-btn:disabled {
  background-image: none;
  background-color: #2f3336;
  color: #c5c7c9 !important;
  box-shadow: none;
  animation: none;
  filter: none;
  transform: none;
}

@keyframes yal-fx-flow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .x-shell button,
  .x-auth-wrap button,
  .x-space-modal button,
  .x-space-live-modal button,
  .x-post-btn,
  .x-space-start-btn,
  .x-space-listen-btn,
  .x-space-talk-btn,
  .yal-cta-btn,
  .x-follow > button {
    animation: none !important;
    transition: box-shadow 0.2s ease, background-color 0.2s ease;
  }

  .x-shell button:hover,
  .x-auth-wrap button:hover,
  .x-post-btn:hover,
  .x-space-start-btn:hover {
    transform: none;
  }

  .x-post-btn::before,
  .x-space-start-btn::before,
  .x-space-listen-btn::before,
  .x-space-talk-btn::before,
  .yal-cta-btn::before,
  .x-follow > button::before,
  .x-auth-card button[type="submit"]::before {
    display: none;
  }
}