/* Custom styles for Zoe API - loaded outside Tailwind */

/* Home page: aurora gradient text */
.home-aurora-text {
  background: linear-gradient(
    135deg,
    var(--chart-1) 0%,
    var(--chart-3) 50%,
    var(--chart-2) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Home page: stat gradient number */
.home-stat-gradient {
  background: linear-gradient(
    180deg,
    var(--foreground) 0%,
    var(--chart-1) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Home page: typewriter cursor */
.home-typewriter-cursor {
  display: inline-block;
  border-right: 2px solid var(--chart-1);
  animation: home-typewriter-blink 0.8s step-end infinite;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
}

@keyframes home-typewriter-blink {
  0%,
  50% {
    border-color: var(--chart-1);
  }
  51%,
  100% {
    border-color: transparent;
  }
}

/* Brand name: artistic gradient serif */
.brand-name-art {
  font-family: var(--font-serif), 'Lora Variable', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: linear-gradient(
    120deg,
    #7c3aed 0%,
    #6366f1 25%,
    #0ea5e9 50%,
    #6366f1 75%,
    #7c3aed 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 30px rgba(124, 58, 237, 0.15);
  animation: brand-gradient-shift 6s ease-in-out infinite;
}

.dark .brand-name-art {
  background: linear-gradient(
    120deg,
    #a78bfa 0%,
    #818cf8 25%,
    #38bdf8 50%,
    #818cf8 75%,
    #a78bfa 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 30px rgba(167, 139, 250, 0.25);
}

@keyframes brand-gradient-shift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}