/* round 20: the premium layer. A deeper, living dark green (11 Nov: no ruled grid on dark, the thread is hand ink now); a thread down the middle; staggered entrances. Quiet: seen on a second look. */
/* 1. the new dark green. Brand #114136 stays the base of the lights; the ground is deeper. Two drifting lights, a faint survey grid, grain. */
.sec.dk,.doors,.ft{position:relative;overflow:hidden;isolation:isolate;background-color:#0A2A23;background-image:linear-gradient(180deg,#0B2D26 0,#0A2822 100%)}
.sec.dk::before,.doors::before,.ft::before{content:'';position:absolute;inset:-25%;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 34% at 18% 32%,rgba(17,65,54,.95),rgba(17,65,54,0) 70%),
    radial-gradient(30% 36% at 82% 68%,rgba(143,203,176,.12),rgba(143,203,176,0) 70%),
    radial-gradient(26% 26% at 56% 12%,rgba(143,203,176,.08),rgba(143,203,176,0) 70%);
  animation:prDrift 42s ease-in-out infinite alternate;will-change:transform}
.sec.dk::after,.doors::after,.ft::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .56 0 0 0 0 .8 0 0 0 0 .69 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;animation:prGrain 26s linear infinite}
@keyframes prDrift{0%{transform:translate3d(-3%,-2%,0) rotate(0deg)}50%{transform:translate3d(3%,2%,0) rotate(2deg)}100%{transform:translate3d(-1%,4%,0) rotate(-2deg)}}
@keyframes prGrain{to{background-position:160px 160px}}
.rsec{background-image:linear-gradient(180deg,#0B2D26 0,#0A2822 100%)}
.sec.dk>*:not(.float):not(.tseg),.doors>.dv,.doors>.cmail,.ft>*{position:relative;z-index:3}
.sec.dk>.float{z-index:1}
/* 2. the thread (premium-r20.js): one overlay for the whole page, drawn only in the gaps between sections, so it never passes a glyph. A node sits on each section's top edge; the last node is the Send button. */
.thr,.thb{position:absolute;left:0;top:0;width:100%;pointer-events:none}
.thb{z-index:3}.thr{z-index:4}
.thb .tbl{position:absolute;left:0;right:0}
.thr svg{position:absolute;left:0;top:0;overflow:visible}
.thr path{fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter}
.thr .tb.dk{stroke:rgba(143,203,176,.16)}.thr .tb.lt{stroke:rgba(17,65,54,.14)}
.thr .tp.dk{stroke:rgba(143,203,176,.62)}.thr .tp.lt{stroke:rgba(17,65,54,.46)}
.thr .tn{position:absolute;width:14px;height:14px;border-radius:50%;box-sizing:border-box;transition:background .5s var(--ease),box-shadow .5s var(--ease),border-color .5s}
.thr .tn.dk{border:1px solid rgba(143,203,176,.6);background:#0A2A23}.thr .tn.lt{border:1px solid rgba(17,65,54,.5);background:var(--soft)}
.thr .tn.dk.on{background:var(--mint);border-color:var(--mint);box-shadow:0 0 0 6px rgba(143,203,176,.2),0 0 22px rgba(143,203,176,.6)}
.thr .tn.lt.on{background:var(--green);border-color:var(--green);box-shadow:0 0 0 6px rgba(17,65,54,.12)}
.thr .tpulse{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;border:1.5px solid var(--mint);opacity:0;animation:thrPulse 1.4s cubic-bezier(.2,.7,.1,1) 1}
@keyframes thrPulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(9)}}
.cm-send{transition:box-shadow .6s var(--ease),transform .25s var(--ease),background .25s}
.cm-send.thr-on{box-shadow:0 0 0 6px rgba(143,203,176,.18),0 0 28px rgba(143,203,176,.45)}
/* the hero, areas and research are three dark rooms in a row: each gets its own light position and tint, so they read as three rooms */
#areas.sec.dk{background-image:linear-gradient(180deg,#0B2D27 0,#0A2923 100%)}
#areas.sec.dk::before{background:
    radial-gradient(40% 36% at 82% 22%,rgba(17,65,54,.95),rgba(17,65,54,0) 70%),
    radial-gradient(28% 34% at 14% 78%,rgba(143,203,176,.10),rgba(143,203,176,0) 70%),
    radial-gradient(22% 24% at 46% 96%,rgba(95,180,150,.10),rgba(95,180,150,0) 70%)}
#research.sec.dk{background-color:#082620;background-image:linear-gradient(180deg,#09261F 0,#0A2B24 100%)}
#research.sec.dk::before{background:
    radial-gradient(46% 40% at 50% 54%,rgba(143,203,176,.15),rgba(143,203,176,0) 70%),
    radial-gradient(30% 34% at 6% 14%,rgba(17,65,54,.9),rgba(17,65,54,0) 70%),
    radial-gradient(30% 34% at 96% 90%,rgba(17,65,54,.85),rgba(17,65,54,0) 70%)}
#research.sec.dk::after{background-size:160px 160px;opacity:.4}
#areas.sec.dk::after{background-size:160px 160px}
.sec.lt{position:relative}
.sec.lt>*:not(.tseg),.how .in{position:relative;z-index:3}
/* 3. staggered entrances: every part of a section arrives one after another */
.rvx{opacity:0;transform:translate3d(0,22px,0);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--rd,0s)}
.rvx.rvi{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.sec.dk::before,.doors::before,.ft::before,.sec.dk::after,.doors::after,.ft::after{animation:none}.rvx{opacity:1;transform:none;transition:none}.thr .tpulse{display:none}.cm-send{transition:none}}