/* VINrichment - Custom Styles */
/* Matches DataDyne teal-on-black palette */

:root {
  --vr-primary: #000000;
  --vr-accent: #00b7c8;
  --vr-accent-hover: #009dab;
  --vr-green: #10b981;
  --vr-dark: #000000;
  --vr-card: #0f0f0f;
  --vr-card-border: #212121;
  --vr-gray: #757575;
  --vr-dark-teal: #112a2c;
  --vr-dark-teal-alt: #0c4247;
}

html { scroll-behavior: smooth; }

/* Hero gradient */
.hero-gradient {
  background: linear-gradient(135deg, #000000 0%, #112a2c 30%, #0c4247 60%, #0a2e30 100%);
  background-size: 300% 300%;
  animation: gradientShift 12s ease infinite;
  position: relative;
  overflow: hidden;
}
.hero-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(0, 183, 200, 0.07) 1px, transparent 0);
  background-size: 40px 40px;
  pointer-events: none;
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Buttons */
.btn-primary {
  background: linear-gradient(135deg, var(--vr-accent) 0%, #0c4247 100%);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 183, 200, 0.35), 0 0 60px rgba(0, 183, 200, 0.1);
}
.btn-primary:hover::before { opacity: 1; }

.btn-outline {
  border: 2px solid var(--vr-accent);
  color: var(--vr-accent);
  transition: all 0.3s ease;
}
.btn-outline:hover {
  background: var(--vr-accent);
  color: white;
  transform: translateY(-2px);
}

/* Card hover */
.card-hover {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}
.card-hover::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, transparent 40%, rgba(0, 183, 200, 0.4) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
  pointer-events: none;
}
.card-hover:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 183, 200, 0.3);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 183, 200, 0.08);
}
.card-hover:hover::after { opacity: 1; }

/* Dot grid background */
.dot-grid { position: relative; }
.dot-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.03) 1px, transparent 0);
  background-size: 32px 32px;
  pointer-events: none;
}

/* Typewriter */
.typewriter-line { display: block; min-height: 4.5em; }
@media (min-width: 768px) { .typewriter-line { min-height: auto; } }
.typewriter-cursor {
  display: inline-block;
  width: 3px;
  height: 1em;
  background: var(--vr-accent);
  margin-left: 4px;
  animation: blink 0.8s step-end infinite;
  vertical-align: text-bottom;
}
@keyframes blink { 50% { opacity: 0; } }

/* Nav blur */
.nav-blur {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: background 0.3s ease;
}

/* Fade in */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.fade-in-up { animation: fadeInUp 0.6s ease-out forwards; }

/* Scroll reveal */
.scroll-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.scroll-reveal.from-left { transform: translateX(-60px); }
.scroll-reveal.from-right { transform: translateX(60px); }
.scroll-reveal.from-scale { transform: scale(0.92); }
.scroll-reveal.visible { opacity: 1; transform: translateY(0) translateX(0) scale(1); }

/* Stagger children */
.stagger-children .scroll-reveal:nth-child(1) { transition-delay: 0s; }
.stagger-children .scroll-reveal:nth-child(2) { transition-delay: 0.1s; }
.stagger-children .scroll-reveal:nth-child(3) { transition-delay: 0.2s; }
.stagger-children .scroll-reveal:nth-child(4) { transition-delay: 0.3s; }
.stagger-children .scroll-reveal:nth-child(5) { transition-delay: 0.4s; }
.stagger-children .scroll-reveal:nth-child(6) { transition-delay: 0.5s; }

/* FAQ */
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-answer.open { max-height: 500px; }

/* Code block styling */
.code-block {
  background: #0a0a0a;
  border: 1px solid #212121;
  border-radius: 12px;
  overflow: hidden;
}
.code-block pre {
  margin: 0;
  padding: 1.25rem;
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.6;
}
.code-block code {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
}
.code-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.75rem 1.25rem;
  background: #111;
  border-bottom: 1px solid #212121;
  font-size: 0.75rem;
  color: #757575;
}

/* JSON syntax highlighting */
.json-key { color: #7dd3fc; }
.json-string { color: #86efac; }
.json-number { color: #fbbf24; }
.json-bool { color: #c084fc; }
.json-null { color: #757575; }
.json-comment { color: #525252; font-style: italic; }

/* Endpoint badge */
.method-badge {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}
.method-post { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.method-get { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.method-put { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.method-delete { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

/* Pricing card highlight */
.pricing-popular {
  border-color: var(--vr-accent) !important;
  box-shadow: 0 0 40px rgba(0, 183, 200, 0.12);
}

/* Response segment tabs */
.segment-tab {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #757575;
  border: 1px solid transparent;
}
.segment-tab:hover { color: #fff; background: #1a1a1a; }
.segment-tab.active {
  color: var(--vr-accent);
  background: rgba(0, 183, 200, 0.1);
  border-color: rgba(0, 183, 200, 0.3);
}