/* Animated Button Styles - Vanilla CSS Version */
.ui-anim-btn {
  --padding: 4px;
  --radius: 24px;
  --transition: 0.4s;
  --highlight-hue: 210deg;
  --highlight: hsl(var(--highlight-hue), 100%, 70%);
  --highlight-50: hsla(var(--highlight-hue), 100%, 70%, 0.5);
  --highlight-30: hsla(var(--highlight-hue), 100%, 70%, 0.3);
  --highlight-20: hsla(var(--highlight-hue), 100%, 70%, 0.2);
  --highlight-80: hsla(var(--highlight-hue), 100%, 70%, 0.8);
  --ui-anim-svg-fill: #e8e8e8;
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --border: 214.3 31.8% 91.4%;
  
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  user-select: none !important;
  border-radius: 24px !important;
  padding: 12px 20px !important;
  background-color: hsl(var(--background)) !important;
  color: hsl(var(--foreground)) !important;
  border: 1px solid hsla(var(--border), 0.2) !important;
  box-shadow: 
    inset 0px 1px 1px rgba(255,255,255,0.2),
    inset 0px 2px 2px rgba(255,255,255,0.15),
    inset 0px 4px 4px rgba(255,255,255,0.1),
    inset 0px 8px 8px rgba(255,255,255,0.05),
    inset 0px 16px 16px rgba(255,255,255,0.05),
    0 -1px 1px rgba(0,0,0,0.02),
    0 -2px 2px rgba(0,0,0,0.03),
    0 -4px 4px rgba(0,0,0,0.05),
    0 -8px 8px rgba(0,0,0,0.06),
    0 -16px 16px rgba(0,0,0,0.08) !important;
  transition: box-shadow var(--transition), border var(--transition), background-color var(--transition) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  min-width: 120px !important;
  margin: 10px !important;
}

.ui-anim-btn::before {
  content: "";
  position: absolute;
  top: calc(0px - var(--padding));
  left: calc(0px - var(--padding));
  width: calc(100% + var(--padding) * 2);
  height: calc(100% + var(--padding) * 2);
  border-radius: calc(var(--radius) + var(--padding));
  pointer-events: none;
  background-image: linear-gradient(0deg, #0004, #000a);
  z-index: -1;
  transition: box-shadow var(--transition), filter var(--transition);
  box-shadow:
    0 -8px 8px -6px #0000 inset,
    0 -16px 16px -8px #00000000 inset,
    1px 1px 1px #fff2,
    2px 2px 2px #fff1,
    -1px -1px 1px #0002,
    -2px -2px 2px #0001;
}

.ui-anim-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: linear-gradient(0deg, #fff, var(--highlight), var(--highlight-50), 8%, transparent);
  background-position: 0 0;
  opacity: 0;
  transition: opacity var(--transition), filter var(--transition);
}

/* Icon inside button */
.ui-anim-btn-icon {
  margin-right: 8px;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: var(--ui-anim-svg-fill);
  filter: drop-shadow(0 0 2px #fff9);
  animation: ui-flicker 2s linear infinite;
  animation-delay: 0.5s;
  transition: fill var(--transition), filter var(--transition), opacity var(--transition);
}

@keyframes ui-flicker {
  50% {
    opacity: 0.3;
  }
}

/* Button text */
.ui-anim-btn-text {
  position: relative;
  display: inline-block;
}

.ui-anim-letter {
  display: inline-block;
  color: #ffffff88;
  animation: ui-letter-anim 2s ease-in-out infinite;
  transition: color var(--transition), text-shadow var(--transition), opacity var(--transition);
}

@keyframes ui-letter-anim {
  50% {
    text-shadow: 0 0 3px #fff8;
    color: #fff;
  }
}

/* Letter stagger delays */
.ui-anim-letter:nth-child(1) { animation-delay: 0s; }
.ui-anim-letter:nth-child(2) { animation-delay: 0.08s; }
.ui-anim-letter:nth-child(3) { animation-delay: 0.16s; }
.ui-anim-letter:nth-child(4) { animation-delay: 0.24s; }
.ui-anim-letter:nth-child(5) { animation-delay: 0.32s; }
.ui-anim-letter:nth-child(6) { animation-delay: 0.4s; }
.ui-anim-letter:nth-child(7) { animation-delay: 0.48s; }
.ui-anim-letter:nth-child(8) { animation-delay: 0.56s; }
.ui-anim-letter:nth-child(9) { animation-delay: 0.64s; }
.ui-anim-letter:nth-child(10) { animation-delay: 0.72s; }
.ui-anim-letter:nth-child(11) { animation-delay: 0.8s; }
.ui-anim-letter:nth-child(12) { animation-delay: 0.88s; }
.ui-anim-letter:nth-child(13) { animation-delay: 0.96s; }
.ui-anim-letter:nth-child(14) { animation-delay: 1.04s; }
.ui-anim-letter:nth-child(15) { animation-delay: 1.12s; }

/* Hover state */
.ui-anim-btn:hover {
  border-color: hsla(var(--highlight-hue), 100%, 80%, 0.4);
}

.ui-anim-btn:hover::before {
  box-shadow:
    0 -8px 8px -6px #fffa inset,
    0 -16px 16px -8px var(--highlight-30) inset,
    1px 1px 1px #fff2,
    2px 2px 2px #fff1,
    -1px -1px 1px #0002,
    -2px -2px 2px #0001;
}

.ui-anim-btn:hover::after {
  opacity: 1;
  -webkit-mask-image: linear-gradient(0deg, #fff, transparent);
  mask-image: linear-gradient(0deg, #fff, transparent);
}

.ui-anim-btn:hover .ui-anim-btn-icon {
  fill: #fff;
  filter: 
    drop-shadow(0 0 3px var(--highlight))
    drop-shadow(0 -4px 6px #0009);
  animation: none;
}

/* Active/Click state */
.ui-anim-btn:active {
  border-color: hsla(var(--highlight-hue), 100%, 80%, 0.7);
  background-color: hsla(var(--highlight-hue), 50%, 20%, 0.5);
}

.ui-anim-btn:active::before {
  box-shadow:
    0 -8px 12px -6px #fffa inset,
    0 -16px 16px -8px var(--highlight-80) inset,
    1px 1px 1px #fff4,
    2px 2px 2px #fff2,
    -1px -1px 1px #0002,
    -2px -2px 2px #0001;
}

.ui-anim-btn:active::after {
  opacity: 1;
  -webkit-mask-image: linear-gradient(0deg, #fff, transparent);
  mask-image: linear-gradient(0deg, #fff, transparent);
  filter: brightness(200%);
}

.ui-anim-btn:active .ui-anim-letter {
  text-shadow: 0 0 1px hsla(var(--highlight-hue), 100%, 90%, 0.9);
  animation: none;
}

/* Focus state */
.ui-anim-btn:focus {
  outline: none;
}

.ui-anim-btn:focus::before {
  box-shadow:
    0 -8px 12px -6px #fff3 inset,
    0 -16px 16px -8px var(--highlight-20) inset,
    1px 1px 1px #fff3,
    2px 2px 2px #fff1,
    -1px -1px 1px #0002,
    -2px -2px 2px #0001;
}

.ui-anim-btn:focus::after {
  opacity: 0.6;
  -webkit-mask-image: linear-gradient(0deg, #fff, transparent);
  mask-image: linear-gradient(0deg, #fff, transparent);
  filter: brightness(100%);
}

/* Disabled state */
.ui-anim-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Dark mode support */
body.dark-mode .ui-anim-btn,
html.dark-mode .ui-anim-btn {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --border: 217.2 32.6% 17.5%;
}

/* Color variations */
.ui-anim-btn[data-color="blue"] {
  --highlight-hue: 210deg;
}

.ui-anim-btn[data-color="green"] {
  --highlight-hue: 142deg;
}

.ui-anim-btn[data-color="red"] {
  --highlight-hue: 0deg;
}

.ui-anim-btn[data-color="purple"] {
  --highlight-hue: 280deg;
}

.ui-anim-btn[data-color="orange"] {
  --highlight-hue: 25deg;
}