.btn-fx {
  position: relative !important;
  overflow: hidden !important;
  animation: btn-pulse-glow 3.2s ease-in-out infinite !important;
}

.btn-fx::after {
  content: '';
  position: absolute;
  top: -60%;
  left: -80%;
  width: 55%;
  height: 220%;
  background: linear-gradient(
    105deg,
    transparent 15%,
    rgba(0, 212, 255, 0.22) 50%,
    transparent 85%
  );
  transform: skewX(-18deg);
  pointer-events: none;
  animation: btn-shimmer 3.2s ease-in-out infinite !important;
}

.btn-fx:hover {
  animation: none !important;
  transform: translateY(-4px) !important;
}

.btn-fx:hover::after {
  animation: none !important;
  opacity: 0 !important;
}

/* Overlay loader */
.overlay-loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 38%, rgba(0, 212, 255, 0.13), transparent 45%),
    #050505;
  animation: overlayLoaderFadeIn 0.25s ease-out;
}

@keyframes overlayLoaderFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.overlay-loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.overlay-loader-dots {
  display: flex;
  gap: 10px;
}

.overlay-loader-dots span {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #00d4ff;
  animation: loaderDot 1.1s ease-in-out infinite;
}

.overlay-loader-dots span:nth-child(2) { animation-delay: 0.16s; }
.overlay-loader-dots span:nth-child(3) { animation-delay: 0.32s; }

@keyframes loaderDot {
  0%, 70%, 100% { transform: scale(0.55); opacity: 0.35; }
  35%           { transform: scale(1);    opacity: 1; }
}

.overlay-loader-label {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
}

.overlay-loader-bar-wrap {
  position: absolute;
  bottom: 56px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.overlay-loader-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #00d4ff, rgba(0, 212, 255, 0.5));
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.7);
  transition: width 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Timeline card glow */
.card-fx {
  animation: card-pulse-glow 3.2s ease-in-out infinite !important;
}

@keyframes card-pulse-glow {
  0%, 100% {
    box-shadow: 0 0 0px rgba(0, 212, 255, 0), 0 4px 24px rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 212, 255, 0.15) !important;
  }
  40% {
    box-shadow: 0 0 40px rgba(0, 212, 255, 0.35), 0 4px 32px rgba(0, 212, 255, 0.15);
    border-color: rgba(0, 212, 255, 0.7) !important;
  }
  55% {
    box-shadow: 0 0 0px rgba(0, 212, 255, 0), 0 4px 24px rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 212, 255, 0.15) !important;
  }
}

@keyframes btn-shimmer {
  0%   { left: -80%; opacity: 0; }
  8%   { opacity: 1; }
  38%  { left: 130%; opacity: 1; }
  45%  { opacity: 0; }
  100% { left: 130%; opacity: 0; }
}

@keyframes btn-pulse-glow {
  0%, 100% {
    box-shadow: 0 8px 20px rgba(0, 212, 255, 0.18), 0 0 0px rgba(0, 212, 255, 0) !important;
    transform: scale(1);
  }
  40% {
    box-shadow: 0 8px 36px rgba(0, 212, 255, 0.5), 0 0 28px rgba(0, 212, 255, 0.25) !important;
    transform: scale(1.04);
  }
  55% {
    box-shadow: 0 8px 20px rgba(0, 212, 255, 0.18), 0 0 0px rgba(0, 212, 255, 0) !important;
    transform: scale(1);
  }
}