/* Custom styles for scrolling preview animation */
.scrolling-preview {
  max-height: 500px;
  overflow-y: auto;
}

.preview-container {
  display: flex;
  flex-grow: 1;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.preview-wrapper {
  position: absolute;
  inset: 0;
}

.preview-panels {
  display: flex;
  width: 100%;
  height: 100%;
}

.preview-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  flex: 1;
}

.iframe-buffer {
  position: absolute;
  inset: 0;
  transition: opacity 0.3s ease-in-out;
}

.active-buffer {
  opacity: 1;
  z-index: 5;
}

.inactive-buffer {
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}

/* Animation */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease-out;
}

.fade-in-up.show {
  opacity: 1;
  transform: translateY(0);
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.voltup-gradient-animated {
  background: linear-gradient(90deg, black, gray, white);
  background-size: 300% 300%;

  background-clip: text;
  -webkit-background-clip: text;

  color: transparent;
  -webkit-text-fill-color: transparent;

  animation: gradientShift 5s ease infinite;
}
    .grid-bg {
      background-image: linear-gradient(#000 1px, transparent 1px), linear-gradient(90deg, #000 1px, transparent 1px);
      background-size: 60px 60px;
      opacity: 0.035;
    }
    .voltup-gradient {
      background: linear-gradient(to bottom, #000000 0%, #333333 50%, #666666 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    html {
      scroll-behavior: smooth;
    }
    @keyframes slideInUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .animate-slideInUp {
      animation: slideInUp 0.6s ease-out;
    }