/* Agentic Sandbox brand bands. Select with data-palette on an ancestor. */
.supergraphic {
  height: 6px;
  background: linear-gradient(90deg,
    #952231 0%, #d3141b 12%, #88347f 24%, #543d8f 33%, #1f3b7a 43%, #154d98 52%,
    #277db6 62%, #00b0d9 72%, #009c5f 82%, #8fbd65 91%, #208d3e 100%);
}

[data-palette='frontend-kit'] .supergraphic {
  background: linear-gradient(90deg,
    #ed0007 0%, #9e2896 20%, #004975 40%, #007bc0 60%, #18837e 80%, #00884a 100%);
}

[data-palette='vintage'] .supergraphic {
  background: linear-gradient(90deg,
    #9b2335 0%, #c8412b 13%, #e0702a 25%, #eea33a 38%, #c9a64a 50%,
    #6f8a4e 63%, #2f7a72 75%, #245a78 88%, #5b3f6e 100%);
}

[data-palette='hopecore'] .supergraphic {
  background: linear-gradient(90deg,
    #b98cff 0%, #f78fc4 14%, #ff7a9c 28%, #ff9f73 42%, #ffc53d 57%,
    #7fd88f 71%, #5fc3f5 86%, #8f9cff 100%);
}

/* Placeholder work area and landing feature entrance, as in Agentic Sandbox. */
.bg-sandbox-grid {
  background-image: radial-gradient(color-mix(in oklch, var(--fg) 12%, transparent) 1px, transparent 1px);
  background-size: 14px 14px;
}

@keyframes vehops-fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-up {
  animation: vehops-fade-up 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* Acronym reveal: each word's letters after the initial expand in turn. */
.acronym-rest {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  max-width: 0;
  animation: vehops-acronym-expand var(--acronym-duration, 0.6s) cubic-bezier(0.2, 0.7, 0.2, 1) var(--acronym-delay, 0s) forwards;
}

@keyframes vehops-acronym-expand {
  to { max-width: var(--acronym-width); }
}

@media (prefers-reduced-motion: reduce) {
  .acronym-rest { animation: none; max-width: none; }
}