/* Design kit for homotopic.tech / openfp.net / horizon-haskell.net /
 * search.horizon-haskell.net. See DESIGN.md for the full vocabulary.
 *
 * The accent is parameterised over CSS custom properties; each site overrides
 * them in a small :root block (defaults below are the homotopic emerald):
 *
 *   :root {
 *     --dk-300: #93c5fd; --dk-400: #60a5fa; --dk-500: #3b82f6;
 *     --dk-600: #2563eb; --dk-500-rgb: 59,130,246;
 *   }
 *
 * Font URLs are relative, so serve this file next to its fonts/ directory
 * (e.g. /design-kit/design-kit.css with /design-kit/fonts/...).
 */

/* Typography: Nexa, self-hosted. Bold 700 covers semibold/bold UI labels,
 * Heavy 900 covers display headings and wordmarks; titles are always Heavy.
 * Body prose is Open Sans, which each site loads from Google Fonts. */
@font-face { font-family: 'Nexa'; font-weight: 300; font-style: normal; font-display: swap;
  src: url('fonts/NexaLight.woff') format('woff'); }
@font-face { font-family: 'Nexa'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('fonts/NexaBold.woff') format('woff'); }
@font-face { font-family: 'Nexa'; font-weight: 900; font-style: normal; font-display: swap;
  src: url('fonts/NexaHeavy.woff2') format('woff2'); }

:root {
  --dk-300: #6ee7b7;
  --dk-400: #34d399;
  --dk-500: #10b981;
  --dk-600: #059669;
  --dk-500-rgb: 16, 185, 129;
  /* Fifth gradient-text stop; a contrasting "pop" colour. */
  --dk-pop: #22d3ee;
}

html { scroll-behavior: smooth; }
body { font-family: 'Open Sans', sans-serif; }
.font-display { font-family: 'Nexa', sans-serif; letter-spacing: .04em; font-weight: 900; }
.font-brand { font-family: 'Nexa', sans-serif; }

/* Animated hero background: dark dotted grid with a slow accent aurora. */
.hero-grid { position: relative; overflow: hidden; background-color: #020617;
  background-image: radial-gradient(rgba(var(--dk-500-rgb), .12) 1px, transparent 1px);
  background-size: 28px 28px; }
.hero-aurora { position: absolute; inset: -40%; z-index: 0; filter: blur(90px);
  background: conic-gradient(from 0deg,
    rgba(var(--dk-500-rgb), .13), rgba(var(--dk-500-rgb), .20),
    rgba(var(--dk-500-rgb), .13), rgba(var(--dk-500-rgb), .13),
    rgba(var(--dk-500-rgb), .13));
  animation: dk-spin 26s linear infinite; }
@keyframes dk-spin { to { transform: rotate(360deg); } }
.hero-content { position: relative; z-index: 1; }

/* Shimmering gradient text for the emphasised hero word. */
.gradient-text { background: linear-gradient(90deg,
    var(--dk-400), var(--dk-500), var(--dk-300), var(--dk-pop), var(--dk-400));
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent; animation: dk-shimmer 9s linear infinite; }
@keyframes dk-shimmer { to { background-position: 300% 0; } }

/* Gentle float. */
.float { animation: dk-float 6s ease-in-out infinite; }
@keyframes dk-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Reveal on scroll (driven by effects.js). */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.reveal-visible { opacity: 1; transform: none; }

/* Interactive cards + buttons. */
.card { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.card:hover { transform: translateY(-6px);
  box-shadow: 0 22px 44px -20px rgba(var(--dk-500-rgb), .55); }
.btn-glow { transition: box-shadow .3s ease, transform .2s ease; }
.btn-glow:hover { box-shadow: 0 10px 32px -6px rgba(var(--dk-500-rgb), .7);
  transform: translateY(-2px); }

/* Scroll progress + cursor glow (driven by effects.js). */
#scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 60;
  background: linear-gradient(90deg, var(--dk-500), var(--dk-300));
  box-shadow: 0 0 12px var(--dk-500); }
#cursor-glow { position: fixed; top: 0; left: 0; width: 420px; height: 420px;
  margin: -210px 0 0 -210px; border-radius: 9999px; pointer-events: none; z-index: 5;
  background: radial-gradient(circle, rgba(var(--dk-500-rgb), .14), transparent 60%);
  opacity: 0; transition: transform .12s ease-out, opacity .3s ease; }

@media (prefers-reduced-motion: reduce) {
  .hero-aurora, .gradient-text, .float { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}