/* Logo neon v2 (2026-09-28). James picked idea 01 of the logo study: "lets use the new neon glows then settles logo".
   "neon" in the wordmark is lit in the chosen colour. In the header it strikes with the page's other signs (the --lit
   flicker, 300 ms in) wearing a glow, holds, then the glow fades and the four letters settle into solid colour: the deep
   CTA shade, legible on the light glass. In the footer it strikes the first time the signature scrolls into view, glowing
   white-hot, then settles into the tube colour itself beside the signature's light grey. "studio" never changes.
   The letters are inline SVG laid over the untouched logo images (same paths, same box); they follow the dial through
   --lit (off = the plain logo) and the colour variables, and the header glows again when the dial turns.
   Replaces logo-neon-v1 (letter by letter, back to ink). */
.nav>a{position:relative}
.footer-signature>.ns-sig{position:relative;display:block;width:65%;max-width:700px}   /* was .footer-signature>img */
.footer-signature>.ns-sig>img{display:block;width:100%}
@media(max-width:800px){.footer-signature>.ns-sig{width:100%}}
.logo-neon{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;opacity:var(--lit)}
.nav>a .logo-neon path{fill:rgb(var(--cta-rgb))}
.footer-signature .logo-neon path{fill:rgb(var(--neon-rgb))}
.nav>a .logo-neon.is-glowing{animation:logo-glow-light 2.8s ease both}
.footer-signature .logo-neon.is-glowing{animation:logo-glow-dark 3.1s ease both}
.footer-signature .logo-neon.is-glowing path{animation:logo-strike 1.3s steps(1,end) both,logo-core 1s ease 2.1s both}
@keyframes logo-glow-light{0%,64%{filter:drop-shadow(0 0 1px rgb(var(--neon-rgb) / .6)) drop-shadow(0 0 7px rgb(var(--neon-rgb) / .5)) drop-shadow(0 0 16px rgb(var(--neon-rgb) / .25))}
  100%{filter:drop-shadow(0 0 0 rgb(var(--neon-rgb) / 0)) drop-shadow(0 0 0 rgb(var(--neon-rgb) / 0)) drop-shadow(0 0 0 rgb(var(--neon-rgb) / 0))}}
@keyframes logo-glow-dark{0%,68%{filter:drop-shadow(0 0 3px rgb(var(--neon-rgb))) drop-shadow(0 0 16px rgb(var(--neon-rgb))) drop-shadow(0 0 44px rgb(var(--neon-rgb) / .6))}
  100%{filter:drop-shadow(0 0 0 rgb(var(--neon-rgb) / 0)) drop-shadow(0 0 0 rgb(var(--neon-rgb) / 0)) drop-shadow(0 0 0 rgb(var(--neon-rgb) / 0))}}
@keyframes logo-strike{0%{opacity:0}10%{opacity:.85}17%{opacity:.05}33%{opacity:1}40%{opacity:.3}56%,100%{opacity:1}}
@keyframes logo-core{0%{fill:color-mix(in srgb,rgb(var(--neon-rgb)) 40%,#fff)}100%{fill:rgb(var(--neon-rgb))}}
@media (prefers-reduced-motion:reduce){.logo-neon.is-glowing,.logo-neon.is-glowing path{animation:none}}