.demoSuccessContainer {
  padding: 1.3rem;
  background: linear-gradient(
    135deg,
    var(--vscode-editor-background) 0%,
    var(--vscode-sideBar-background) 100%
  );
  border: 1px solid var(--vscode-panel-border);
  border-radius: 12px;
  margin: 16px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  animation: slideInSuccess 0.6s ease-out;
}

.successIcon {
  width: 48px;
  height: 48px;
  background: var(--vscode-button-background);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  animation: bounceIn 0.8s ease-out 0.2s both;
}

.successIconSymbol {
  font-size: 24px;
  color: var(--vscode-button-foreground);
}

.title {
  font-size: 18px;
  font-weight: 600;
  color: var(--vscode-foreground);
  margin: 0 0 8px 0;
  animation: fadeInUp 0.6s ease-out 0.4s both;
}

.subtitle {
  font-size: 14px;
  color: var(--vscode-descriptionForeground);
  margin: 0 0 24px 0;
  line-height: 1.4;
  animation: fadeInUp 0.6s ease-out 0.6s both;
}

.actionButton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--vscode-button-background);
  color: var(--vscode-button-foreground);
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--vscode-font-family);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  animation: fadeInUp 0.6s ease-out 0.8s both;
  min-width: 140px;
}

.actionButton::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s ease;
}

.actionButton:hover {
  background: var(--vscode-button-hoverBackground);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.actionButton:hover::before {
  left: 100%;
}

.actionButton:active {
  transform: translateY(-1px);
}

.actionButton:focus {
  outline: 2px solid var(--vscode-focusBorder);
  outline-offset: 2px;
}

.buttonIcon {
  font-size: 16px;
  transition: transform 0.3s ease;
}

.actionButton:hover .buttonIcon {
  transform: translateX(2px);
}

.features {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
  flex-wrap: wrap;
  animation: fadeInUp 0.6s ease-out 1s both;
}

.featureBadge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--vscode-badge-background);
  color: var(--vscode-badge-foreground);
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
}

.featureBadgeIcon {
  font-size: 12px;
}

/* Animations */
@keyframes slideInSuccess {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    transform: scale(1.1);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shimmer {
  0%,
  100% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(100%);
  }
}

/* Responsive design */
@media (max-width: 320px) {
  .demoSuccessContainer {
    padding: 20px 16px;
  }

  .features {
    flex-direction: column;
    align-items: center;
  }

  .actionButton {
    width: 100%;
    justify-content: center;
  }
}

/* High contrast support */
@media (prefers-contrast: high) {
  .demoSuccessContainer {
    border-width: 2px;
  }

  .actionButton {
    border: 2px solid var(--vscode-button-foreground);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .demoSuccessContainer,
  .successIcon,
  .title,
  .subtitle,
  .actionButton,
  .features {
    animation: none;
  }

  .actionButton:hover {
    transform: none;
  }

  .actionButton::before {
    display: none;
  }
}
