/* ==========================================================================
   SNR Animation — noise → custom solution (lens) → signal
   Self-contained: every rule is scoped under .snr. Pair with snr-animation.js.
   Fonts are optional; the variables below fall back to system fonts.
   ========================================================================== */

.snr {
  /* palette */
  --snr-bg: #0d1117;
  --snr-ink: #e9eef4;
  --snr-ink-soft: rgba(233, 238, 244, .62);
  --snr-teal: #3ae0c8;
  --snr-blue: #4f7cff;
  --snr-amber: #d9a45b;
  /* type */
  --snr-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --snr-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  /* layout */
  --snr-gutter: clamp(18px, 4vw, 56px);
  --snr-height: 100vh;
  --snr-cy: 52%;       /* vertical centre of the lens; keep in step with centerY in the JS */
  --snr-lens-h: 58%;   /* height of the lens */
  --snr-word-top: 25%; /* top of the NOISE / SIGNAL headings */

  position: relative;
  height: var(--snr-height);
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
  background: var(--snr-bg);
  color: var(--snr-ink);
  font-family: var(--snr-mono);
  -webkit-font-smoothing: antialiased;
}
.snr *, .snr *::before, .snr *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- background: drifting haze + film grain ---------- */
.snr__mist { position: absolute; inset: -20%; z-index: 0; pointer-events: none; filter: blur(90px); opacity: .55; }
.snr__mist i { position: absolute; border-radius: 50%; animation: snr-drift 38s ease-in-out infinite alternate; }
.snr__mist i:nth-child(1) { width: 55vw; height: 55vw; left: 5%;  top: 8%;  background: #123a52; }
.snr__mist i:nth-child(2) { width: 48vw; height: 48vw; left: 52%; top: 0%;  background: #1c2a5c; animation-duration: 46s; }
.snr__mist i:nth-child(3) { width: 50vw; height: 50vw; left: 30%; top: 48%; background: #0f4a4e; animation-duration: 52s; }
.snr__mist i:nth-child(4) { width: 36vw; height: 36vw; left: 70%; top: 55%; background: #3a2e1a; animation-duration: 42s; }
@keyframes snr-drift { to { transform: translate(8vw, -6vh) scale(1.15); } }

.snr__grain {
  position: absolute; inset: -100px; z-index: 5; pointer-events: none; opacity: .09; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .8  0 0 0 0 .85  0 0 0 0 .9  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: snr-grain .9s steps(5) infinite;
}
@keyframes snr-grain { 20% { transform: translate(-30px, 20px); } 40% { transform: translate(25px, -35px); } 60% { transform: translate(-15px, -10px); } 80% { transform: translate(35px, 30px); } }

/* ---------- the wave field (drawn by snr-animation.js) ---------- */
.snr__field { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; }

/* ---------- small caps labels ---------- */
.snr__tiny {
  font-family: var(--snr-mono); font-weight: 400; font-size: 10.5px; line-height: 1.5;
  letter-spacing: .12em; text-transform: uppercase; color: var(--snr-ink-soft);
}
.snr__bracket::before { content: "[ "; }
.snr__bracket::after { content: " ]"; }

/* ---------- NOISE / SIGNAL headings ---------- */
.snr__word {
  position: absolute; z-index: 2; top: var(--snr-word-top);
  font-family: var(--snr-display); font-weight: 500; font-size: clamp(30px, 4.6vw, 76px);
  line-height: 1; letter-spacing: -.03em; text-transform: lowercase;
}
.snr__word--noise {
  left: var(--snr-gutter); color: rgba(233, 238, 244, .45);
  text-shadow: 3px 0 0 rgba(217, 164, 91, .55), -3px 0 0 rgba(79, 124, 255, .6);
  filter: blur(1.4px);
  animation: snr-jitter .18s steps(2) infinite;
}
@keyframes snr-jitter { 0% { transform: translate(0, 0); } 25% { transform: translate(-2px, 1px) skewX(-4deg); } 50% { transform: translate(2px, -1px); } 75% { transform: translate(-1px, -2px) skewX(3deg); } }
.snr__word--signal { right: var(--snr-gutter); color: #fff; text-shadow: 0 0 20px rgba(58, 224, 200, .6), 0 0 50px rgba(58, 224, 200, .3); }
.snr__word small {
  display: block; margin-top: 12px;
  font-family: var(--snr-mono); font-style: normal; font-weight: 400; font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--snr-ink-soft);
  filter: none; text-shadow: none;
}
.snr__word--signal small { text-align: right; }

/* ---------- the lens ("custom solution") ---------- */
.snr__lens {
  position: absolute; z-index: 2; left: 50%; top: var(--snr-cy);
  width: clamp(66px, 8vw, 118px); height: var(--snr-lens-h); transform: translate(-50%, -50%);
  border-radius: 999px; overflow: hidden;
  background: linear-gradient(180deg, rgba(150, 235, 222, .16), rgba(150, 235, 222, .03) 50%, rgba(150, 235, 222, .12));
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(58, 224, 200, .55);
  box-shadow: 0 0 60px 4px rgba(58, 224, 200, .22), inset 0 0 30px rgba(58, 224, 200, .18), 0 30px 80px -30px rgba(0, 0, 0, .6);
}
.snr__lens::before {
  content: ""; position: absolute; inset: -40%;
  background: conic-gradient(from 0deg, #3ae0c8, #4f7cff, #0d1117, #d9a45b, #3ae0c8);
  opacity: .22; mix-blend-mode: screen; filter: blur(14px);
  animation: snr-spin 14s linear infinite;
}
@keyframes snr-spin { to { transform: rotate(1turn); } }
.snr__lens-cap { position: absolute; z-index: 3; left: 50%; top: calc(var(--snr-cy) - var(--snr-lens-h) / 2 - 34px); transform: translateX(-50%); text-align: center; white-space: nowrap; }

/* ---------- small screens / reduced motion ---------- */
@media (max-width: 700px) {
  .snr { --snr-word-top: 18%; }
  .snr__lens-cap { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .snr__mist i, .snr__grain, .snr__word--noise, .snr__lens::before { animation: none; }
}