/* The scrolling neon tube (the homepage signature), reusable on any page with <body class="tube-page has-tube">.
   The SVG is the height of the document and scrolls natively; tube.js promotes it to its own layer and chunks the lit strokes so phones only re-rasterise the piece that is changing.
   The tube runs down the right rail; every [data-sign] on the page gets a loop under it and lights when the tube reaches it. */
.tube-page { --rail: clamp(52px, 8vw, 128px); }
.tube-page .wrap { padding-right: calc(var(--gutter) + var(--rail)); }
.tube-page .head-main, .tube-page .head-nav > ul { padding-right: calc(var(--gutter) + var(--rail)); }
.tube-page .sign[data-sign] { display: block; width: max-content; max-width: 100%; margin-bottom: 92px; }
.tube-page .sign[data-sign].tight { margin-bottom: 72px; }

#tube { position: absolute; left: 0; top: 0; width: 100%; z-index: 5; pointer-events: none; overflow: visible; }
#tube.tube-layer { will-change: transform; }                 /* own compositor layer: the page under the tube is never repainted */
#tube g.seg path { stroke-linecap: butt; }                    /* chunked lit strokes: butt caps so joints do not double up */
#tube .endcap-halo { fill: var(--neon); opacity: .10; }
#tube .endcap-mid { fill: var(--neon); opacity: .28; }
#tube .t { fill: none; stroke-linecap: round; stroke-linejoin: round; }
#tube .glass { stroke: var(--unlit); stroke-width: 7; opacity: .75; }
#tube .halo { stroke: var(--neon); stroke-width: 34; opacity: .10; transition: opacity .6s; }
#tube .mid { stroke: var(--neon); stroke-width: 14; opacity: .28; transition: opacity .6s; }
#tube .lit { stroke: var(--neon); stroke-width: 6.5; transition: opacity .6s; }
#tube .coreL { stroke: var(--core); stroke-width: 2.4; transition: opacity .6s; }
#tube #hit { stroke: transparent; stroke-width: 44; pointer-events: stroke; cursor: pointer; fill: none; }
#tube .head { fill: url(#tubeGlow); }
#tube .spark { fill: #fff; }
body.is-off #tube .halo, body.is-off #tube .mid, body.is-off #tube .lit, body.is-off #tube .coreL, body.is-off #tube .head, body.is-off #tube .endcap-halo, body.is-off #tube .endcap-mid { opacity: 0; }

@media (max-width: 900px) {
  .tube-page { --rail: 34px; }
  .tube-page .sign[data-sign] { margin-bottom: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  #tube .head { display: none; }
}