/* Birdwave Studio. A factory with the lights out: only the birds at first, then they bring the light.
   Fonts are self-hosted so no visitor data goes to Google. */
@font-face { font-family: "Inter"; src: url("fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("fonts/instrument-serif-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono-latin.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  --bg: #040506; --ink: #EFECE5; --muted: #98958D; --soft: #66645E; --gold: #E2B35F;
  --serif: "Instrument Serif", ui-serif, Georgia, serif; --sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --pad: clamp(24px, 4.4vw, 72px); --edge: clamp(24px, 4.6vh, 48px); --glide: cubic-bezier(.22,.8,.24,1);
  --r: clamp(300px, 34vw, 620px);
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--bg); color: var(--ink); }
body { font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.stage { position: relative; height: 100svh; min-height: 540px; overflow: hidden; isolation: isolate; background: var(--bg); }

/* the dark factory, and the same image again, shown only where the light falls (flock.js sets --lx and --ly) */
.floor { position: absolute; inset: 0; }
.floor img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 60%; display: block; }
.floor .off { opacity: .075; animation: wake 3.4s ease 1.4s both; }
.floor .on {
  --lx: 60vw; --ly: 55vh;
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--lx) var(--ly), #000 0, rgba(0,0,0,.62) 26%, rgba(0,0,0,.2) 58%, transparent 100%);
  mask-image: radial-gradient(circle var(--r) at var(--lx) var(--ly), #000 0, rgba(0,0,0,.62) 26%, rgba(0,0,0,.2) 58%, transparent 100%);
  animation: fade 3.6s ease 2.6s both;
}
.shade { position: absolute; inset: 0; background:
  linear-gradient(to top, rgba(4,5,6,.92) 0, rgba(4,5,6,0) 30%),
  linear-gradient(to bottom, rgba(4,5,6,.8) 0, rgba(4,5,6,0) 22%); }
#flock { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }

.logo { position: absolute; z-index: 5; left: var(--pad); top: var(--edge); display: inline-flex; align-items: center; gap: .3em; white-space: nowrap; font-size: clamp(22px, 1.9vw, 27px); line-height: 1; }
.logo img { height: .82em; width: auto; display: block; }
.logo span { font-family: var(--serif); transform: translateY(.05em); }
.low { position: absolute; z-index: 4; left: var(--pad); right: var(--pad); bottom: var(--edge); }
.lead { font: 300 clamp(1.75rem, 3.15vw, 3.5rem)/1.08 var(--sans); letter-spacing: -.036em; }
.dot { color: var(--gold); }
.legal { position: absolute; z-index: 5; right: var(--pad); bottom: var(--edge); display: flex; gap: 16px; font: 400 9.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #4A4945; }
.legal a:hover { color: var(--muted); }

/* film grain, so the blacks feel photographic rather than flat */
.grain { position: absolute; inset: 0; z-index: 9; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.in { animation: in 1.8s var(--glide) both; }
.late1 { animation: in 1.8s var(--glide) 4.2s both; }
.late3 { animation: in 1.8s var(--glide) 5.8s both; }
@keyframes in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes wake { from { opacity: 0; } to { opacity: .075; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 760px) {
  :root { --r: 300px; }
  .floor img { object-position: 66% 50%; }
  .low { bottom: calc(var(--edge) + 28px); }
  .lead { text-wrap: balance; } .lead br { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }