/* ---------------------------------------------------------------------------------------------
   Blendable FX: the night vision section

   Its pages (theme: nv) wear the tube's own light over Blendable FX's look: the accent is the
   phosphor, green or white as the reader picks, footage glows the way an eyepiece does in the dark,
   and headings come on like a tube warming up rather than glitching in. Nothing moves for a reader
   who has asked for less motion.
   --------------------------------------------------------------------------------------------- */

.theme--nv {
  /* Green phosphor, held back from the acid green of a cheap filter; white phosphor, grey with a cold blue cast. */
  --nv-green: #93dba8;
  --nv-green-deep: #2f6b45;
  --nv-white: #d6e9f3;
  --nv-white-deep: #4d6a7a;
  --nv: var(--nv-green);
  --nv-deep: var(--nv-green-deep);
  --nv-rgb: 147, 219, 168;
  --accent: var(--nv);
  --accent-soft: var(--nv-deep);
  --accent-glow: rgba(var(--nv-rgb), 0.1);
  --tone: var(--nv);
  --glow: 0 0 0 1px rgba(var(--nv-rgb), 0.45), 0 0 26px -6px rgba(var(--nv-rgb), 0.55), 0 14px 38px -14px rgba(var(--nv-rgb), 0.5);
  --glow-soft: 0 0 0 1px rgba(var(--nv-rgb), 0.3), 0 0 22px -8px rgba(var(--nv-rgb), 0.45);
}
html[data-phosphor="white"] .theme--nv {
  --nv: var(--nv-white);
  --nv-deep: var(--nv-white-deep);
  --nv-rgb: 214, 233, 243;
}

/* A link in the section reads in the phosphor, with no split of colour. */
body.theme--nv .doc a:not(.anchor):not(.card a),
body.theme--nv .lede a {
  color: var(--nv);
  text-shadow: none;
}

/* ---- The nav: the section's label carries a tube's round eyepiece ---------------------------------- */

.nav__group.theme--nv .nav__label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--nv);
}
.nav__group.theme--nv .nav__label::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--nv) 0 38%, transparent 70%);
  box-shadow: 0 0 0 1.5px rgba(var(--nv-rgb), 0.55), 0 0 9px rgba(var(--nv-rgb), 0.6);
}
.nav__group.theme--nv a[aria-current="page"] { color: var(--nv); }

/* ---- The phosphor switch, beside each page's title ------------------------------------------------- */

.nv-phosphor {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-top: 14px;
  border: 1px solid rgba(var(--nv-rgb), 0.35);
  border-radius: 2px;
  font: 600 11px/1 var(--chrome);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.nv-phosphor__label {
  padding: 7px 10px 6px;
  color: var(--ink-faint);
  border-right: 1px solid rgba(var(--nv-rgb), 0.25);
}
.nv-phosphor button {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 7px 11px 6px;
  background: transparent;
  color: var(--ink-faint);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.nv-phosphor button + button { border-left: 1px solid rgba(var(--nv-rgb), 0.25); }
.nv-phosphor button[aria-pressed="true"] {
  color: #06090a;
  background: var(--nv);
  box-shadow: 0 0 16px -2px rgba(var(--nv-rgb), 0.7);
}
.nv-phosphor button:focus-visible { outline: 2px solid var(--nv); outline-offset: 2px; }
.nv-phosphor__swatch {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: 1px;
}
.nv-phosphor__swatch--green { background: var(--nv-green); }
.nv-phosphor__swatch--white { background: var(--nv-white); }

/* ---- Footage: an eyepiece's glow round every frame ------------------------------------------------- */

.theme--nv .fxclip__frame,
.theme--nv .fxcard__frame {
  box-shadow: 0 0 0 1px rgba(var(--nv-rgb), 0.16), 0 0 34px -14px rgba(var(--nv-rgb), 0.55);
}
.theme--nv .fxreel .fxclip__frame {
  box-shadow: 0 0 0 1px rgba(var(--nv-rgb), 0.22), 0 0 70px -20px rgba(var(--nv-rgb), 0.5);
}
.theme--nv .fxhud__kind { background: var(--nv); }
.theme--nv .fxcard:hover .fxcard__t,
.theme--nv .fxcard:focus-visible .fxcard__t {
  color: var(--nv);
  text-shadow: 0 0 12px rgba(var(--nv-rgb), 0.55);
}
.theme--nv .fxcard__kind { color: var(--nv); }

/* A note in the section is a readout: a phosphor rule down its side. */
.theme--nv .callout { border-left-color: var(--nv); }

@media (prefers-reduced-motion: no-preference) {
  /* The title comes up as a tube does when it's switched on: dark, a flicker, then its glow settling. */
  body.theme--nv .page-head h1 { animation: nv-switch-on 0.9s steps(1) both, nv-glow 1.6s ease-out 0.25s both; }

  /* Headings warm up as they come into view, in place of the effects' glitch. */
  body.theme--nv .doc h2.fx-in,
  body.theme--nv .doc h3.fx-in { animation: nv-warm 0.5s steps(1) both; }

  body.theme--nv .fxcard::before { display: none; }
}

@keyframes nv-switch-on {
  0% { opacity: 0; }
  12% { opacity: 0.85; }
  18% { opacity: 0.2; }
  30% { opacity: 1; }
  38% { opacity: 0.55; }
  46%, 100% { opacity: 1; }
}
@keyframes nv-glow {
  from { text-shadow: 0 0 22px rgba(var(--nv-rgb), 0.9); }
  to { text-shadow: 0 0 0 rgba(var(--nv-rgb), 0); }
}
@keyframes nv-warm {
  0% { opacity: 0; }
  25% { opacity: 0.7; text-shadow: 0 0 12px rgba(var(--nv-rgb), 0.8); }
  40% { opacity: 0.25; }
  60% { opacity: 1; text-shadow: 0 0 8px rgba(var(--nv-rgb), 0.5); }
  100% { opacity: 1; text-shadow: none; }
}