/* button-animations.css v1.0
   Mobile-friendly animated buttons for asociatia.NET
   Drop this file anywhere (e.g., /assets/css/) and link it in your layout.
   Uses CSS variables so it adapts to your theme.
*/

:root {
  --btn-bg: #1f2937;          /* slate-800 */
  --btn-fg: #ffffff;
  --btn-accent: #4f46e5;      /* indigo-600 */
  --btn-accent-2: #22c55e;    /* green-500 */
  --btn-shadow: rgba(0,0,0,0.25);
  --btn-radius: 12px;
  --btn-border: rgba(255,255,255,0.12);
}

@media (prefers-color-scheme: light) {
  :root {
    --btn-bg: #111827;        /* slate-900 for contrast on light */
    --btn-fg: #ffffff;
    --btn-border: rgba(0,0,0,0.12);
  }
}

/* If your site toggles a data-theme attribute, we respect it */
:root[data-theme="light"], [data-theme="light"] {
  --btn-bg: #111827;
  --btn-fg: #ffffff;
  --btn-border: rgba(0,0,0,0.12);
}
:root[data-theme="dark"], [data-theme="dark"] {
  --btn-bg: #1f2937;
  --btn-fg: #ffffff;
  --btn-border: rgba(255,255,255,0.12);
}

/* Base button */
.btn {
  --_bg: var(--btn-bg);
  --_fg: var(--btn-fg);
  --_accent: var(--btn-accent);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .9rem 1.15rem;
  border: 1px solid var(--btn-border);
  border-radius: var(--btn-radius);
  background: var(--_bg);
  color: var(--_fg);
  font: 600 0.95rem/1 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px; /* iOS tap target */
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  box-shadow: 0 6px 16px var(--btn-shadow);
  overflow: hidden; /* needed for effects */
}

.btn:where(:hover) { transform: translateY(-1px); }
.btn:where(:active) { transform: translateY(0); }

.btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px color-mix(in oklab, var(--_bg), #fff 40%),
    0 0 0 5px color-mix(in oklab, var(--_accent), #fff 35%);
}

/* Sizes */
.btn--sm { padding: .65rem .9rem; font-size: .9rem; border-radius: 10px; }
.btn--lg { padding: 1.05rem 1.25rem; font-size: 1.05rem; border-radius: 14px; }

/* Icon-only */
.btn--icon { width: 44px; padding: 0; aspect-ratio: 1 / 1; }

/* Variant: Pulse glow (subtle but visible on phone) */
@keyframes btn-pulse {
  0%   { box-shadow: 0 6px 16px var(--btn-shadow), 0 0 0 0 color-mix(in oklab, var(--_accent), transparent 80%); }
  70%  { box-shadow: 0 6px 16px var(--btn-shadow), 0 0 0 10px color-mix(in oklab, var(--_accent), transparent 95%); }
  100% { box-shadow: 0 6px 16px var(--btn-shadow), 0 0 0 0 color-mix(in oklab, var(--_accent), transparent 100%); }
}
.btn--pulse:hover {
  animation: btn-pulse 1.2s ease-out;
}
/* Always-on subtle heartbeat for primary CTAs */
.btn--heartbeat {
  animation: btn-pulse 2.2s ease-out infinite;
}

/* Variant: Slide fill (left->right color wipe) */
.btn--fill {
  --_accent: var(--btn-accent);
  background:
    linear-gradient(90deg, var(--_accent) 0%, var(--_accent) 50%, transparent 50%) left / 0% 100% no-repeat,
    var(--_bg);
  transition: background-size .35s ease, color .25s ease, transform .15s ease;
}
.btn--fill:hover { background-size: 220% 100%; color: #fff; border-color: color-mix(in oklab, var(--_accent), #000 15%); }
.btn--fill:active { transform: translateY(1px); }

/* Variant: Border sweep (animated gradient border) */
.btn--border {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--_bg), var(--_bg)) padding-box,
    conic-gradient(from 180deg, var(--_accent), var(--btn-accent-2), var(--_accent)) border-box;
  transition: filter .3s ease, transform .15s ease;
}
.btn--border:hover { filter: saturate(1.2) brightness(1.05); }
.btn--border:active { transform: translateY(1px); }

/* Variant: 3D Lift + press */
.btn--lift {
  box-shadow: 0 10px 0 color-mix(in oklab, var(--_bg), #000 25%),
              0 16px 20px rgba(0,0,0,.25);
  transform: translateY(-2px);
}
.btn--lift:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 color-mix(in oklab, var(--_bg), #000 25%),
              0 8px 12px rgba(0,0,0,.25);
}

/* Variant: Shine (sheen pass) */
.btn--shine::after {
  content: "";
  position: absolute;
  inset: -150% -30%;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35), transparent 70%);
  transform: translateX(-60%) rotate(12deg);
}
.btn--shine:hover::after {
  transition: transform .6s ease;
  transform: translateX(70%) rotate(12deg);
}

/* Variant: Gradient flow */
@keyframes gradient-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.btn--gradient {
  background: linear-gradient(100deg, #6366f1, #22c55e, #06b6d4, #6366f1);
  background-size: 300% 300%;
  color: #fff;
  border: none;
}
.btn--gradient:hover {
  animation: gradient-flow 3s ease infinite;
}

/* Variant: Ripple (JS adds .ripple element) */
.btn--ripple { overflow: hidden; }
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  background: color-mix(in oklab, var(--_accent), #fff 10%);
  opacity: .3;
  width: 12px; height: 12px;
  animation: ripple .6s ease-out forwards;
}
@keyframes ripple {
  to { opacity: 0; width: 280px; height: 280px; }
}

/* Variant: Magnetic hover (JS) */
.btn--magnetic { will-change: transform; perspective: 1000px; }
.btn--magnetic-wrap { display:inline-block; }

/* Variant: Underline slide (for link-like buttons) */
.btn--linkish {
  background: transparent;
  color: var(--_accent);
  border: 1px solid color-mix(in oklab, var(--_accent), #000 30%);
  box-shadow: none;
}
.btn--linkish::after {
  content:"";
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  height: 2px;
  background: currentColor;
  transform: scaleX(.25);
  transform-origin: left;
  transition: transform .25s ease;
  opacity: .7;
}
.btn--linkish:hover::after { transform: scaleX(1); }

/* Utility: color accents */
.btn--indigo { --_accent: #4f46e5; }
.btn--emerald { --_accent: #10b981; }
.btn--rose { --_accent: #e11d48; }
.btn--amber { --_accent: #f59e0b; }
.btn--sky { --_accent: #0ea5e9; }

/* Disabled */
.btn[disabled], .btn:disabled { opacity: .65; pointer-events: none; }

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn * {
    animation: none !important;
    transition: none !important;
  }
}