/* Design kit for homotopic.tech / openfp.net / horizon-haskell.net /
 * search.horizon-haskell.net / nixlab.systems. See DESIGN.md for the full
 * vocabulary and docs/prerender-hydrate.md for how a page uses it.
 *
 * The accent is parameterised over CSS custom properties. A page sets it
 * with an accent class (.accent-blue, .accent-teal, .accent-orange,
 * .accent-emerald) on any element, or overrides the properties in its own
 * stylesheet; the defaults below are the homotopic emerald.
 *
 * 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: Montserrat (SIL OFL 1.1) for titles and labels, Open Sans
 * (Apache-2.0) for prose, both self-hosted. Montserrat Bold 700 covers
 * semibold/bold UI labels, Black 900 covers display headings and
 * wordmarks; titles are always Black. */
@font-face { font-family: 'Montserrat'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('fonts/Montserrat-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 800; font-style: normal; font-display: swap;
  src: url('fonts/Montserrat-ExtraBold.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 900; font-style: normal; font-display: swap;
  src: url('fonts/Montserrat-Black.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('fonts/OpenSans-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-weight: 400; font-style: italic; font-display: swap;
  src: url('fonts/OpenSans-Italic.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-weight: 600; font-style: normal; font-display: swap;
  src: url('fonts/OpenSans-Semibold.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('fonts/OpenSans-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-weight: 800; font-style: normal; font-display: swap;
  src: url('fonts/OpenSans-ExtraBold.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;
}

/* The brand accents (BRAND.md). */
.accent-emerald { --dk-300: #6ee7b7; --dk-400: #34d399; --dk-500: #10b981; --dk-600: #059669;
  --dk-500-rgb: 16, 185, 129; --dk-pop: #22d3ee; }
.accent-blue { --dk-300: #93c5fd; --dk-400: #60a5fa; --dk-500: #3b82f6; --dk-600: #2563eb;
  --dk-500-rgb: 59, 130, 246; --dk-pop: #22d3ee; }
.accent-orange { --dk-300: #fdba74; --dk-400: #fb923c; --dk-500: #f97316; --dk-600: #ea580c;
  --dk-500-rgb: 249, 115, 22; --dk-pop: #fbbf24; }
.accent-teal { --dk-300: #5eead4; --dk-400: #2dd4bf; --dk-500: #14b8a6; --dk-600: #0d9488;
  --dk-500-rgb: 20, 184, 166; --dk-pop: #22d3ee; }

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

/* Inline icons (DesignKit.Icon): 1em square in the current colour. */
.dk-icon { width: 1em; height: 1em; flex: none; vertical-align: -0.125em; }

/* 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 (DesignKit.Effects). Hidden only once the page's script
 * has said it will reveal it (.dk-motion on <html>), so the page reads in
 * full with JavaScript off and with reduced motion. */
.reveal { transition: opacity .7s ease, transform .7s ease; }
.dk-motion .reveal:not(.reveal-visible) { opacity: 0; transform: translateY(28px); }

/* 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 (DesignKit.Effects): one animation frame
 * writes --dk-scroll and --dk-glow-x/y, the CSS does the rest. */
#scroll-progress { position: fixed; top: 0; left: 0; height: 3px; z-index: 60;
  width: 100%; transform-origin: 0 50%; transform: scaleX(var(--dk-scroll, 0));
  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%);
  transform: translate(var(--dk-glow-x, -9999px), var(--dk-glow-y, -9999px));
  opacity: 0; transition: transform .12s ease-out, opacity .3s ease; }
.dk-glow-on #cursor-glow { opacity: 1; }

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