/* LLMRouter landing — custom layer on top of Tailwind CDN.
   Design system mirrors zeus.rocks: Fraunces display + DM Sans body,
   sky->cyan accent, hero-mesh, grain, float/shimmer/reveal motion. */

.font-display { font-family: 'Fraunces', Georgia, serif; }
.font-body { font-family: 'DM Sans', system-ui, sans-serif; }

html { scroll-behavior: smooth; }

/* Hero mesh background */
.hero-mesh {
  background-color: #fafafa;
  background-image:
    radial-gradient(ellipse 80% 60% at 70% 10%, rgba(14, 165, 233, 0.12), transparent 55%),
    radial-gradient(ellipse 60% 50% at 15% 80%, rgba(6, 182, 212, 0.1), transparent 50%),
    linear-gradient(180deg, #fafafa 0%, #ffffff 45%, #f8fafc 100%);
}

/* Faint film-grain overlay */
.grain { position: relative; }
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.5;
}

/* Gentle float on the hero showcase card */
@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.float-demo { animation: float-soft 5s ease-in-out infinite; }

/* Soft pulse on a focal node */
@keyframes node-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.35); }
  50% { box-shadow: 0 0 0 14px rgba(14, 165, 233, 0); }
}
.node-pulse { animation: node-pulse 2.8s ease-in-out infinite; }

/* Spinner used inside the live routing demo */
@keyframes route-spin { to { transform: rotate(360deg); } }

/* Shimmer accent line */
@keyframes shimmer-line {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
.accent-line {
  height: 3px;
  width: min(12rem, 40vw);
  border-radius: 9999px;
  background: linear-gradient(90deg, #0ea5e9, #06b6d4, #22d3ee, #0ea5e9);
  background-size: 200% 100%;
  animation: shimmer-line 8s ease infinite;
}

/* Entrance animation — pure CSS, auto-plays on load. Content is ALWAYS visible:
   the animation fills to opacity:1, and even with animation disabled the base
   state is fully visible. So sections can never get stuck hidden the way a
   JS/IntersectionObserver-gated reveal can. */
@keyframes reveal-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal { animation: reveal-in 0.7s ease both; }

/* Code window syntax accents (single dark accent card) */
.code-window code { color: #e2e8f0; }
.code-window .c { color: #64748b; font-style: italic; }
.code-window .k { color: #38bdf8; }
.code-window .s { color: #22d3ee; }
.code-window .n { color: #fbbf24; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .float-demo,
  .node-pulse,
  .accent-line,
  .reveal { animation: none; }
}