/* Solid Information | perspective grid with pointer-reactive luminosity. Hero only. */
.x-hero { --grid-shift-x:0px; --grid-shift-y:0px; }
.x-hero .x-grid,
.x-hero .x-grid-fine,
.x-hero .x-grid-cursor,
.x-hero .x-grid-highlight { position:absolute; inset:-26px; display:block; pointer-events:none; background-repeat:repeat; }
/* Two near-transparent architectural grids shift in different directions with the mouse. */
.x-hero .x-grid {
 opacity:.88; background-size:54px 54px;
 background-image:linear-gradient(to bottom,rgba(123,204,236,.115) 1px,transparent 1px),linear-gradient(to right,rgba(123,204,236,.115) 1px,transparent 1px);
 transform:translate3d(calc(var(--px,0) * -12px),calc(var(--py,0) * -12px),0);
 -webkit-mask-image:radial-gradient(ellipse 94% 78% at 50% 34%,#000 12%,transparent 95%);
 mask-image:radial-gradient(ellipse 94% 78% at 50% 34%,#000 12%,transparent 95%);
}
.x-hero .x-grid-fine {
 opacity:.4; background-size:18px 18px;
 background-image:linear-gradient(to bottom,rgba(116,198,234,.09) 1px,transparent 1px),linear-gradient(to right,rgba(116,198,234,.09) 1px,transparent 1px);
 transform:translate3d(calc(var(--px,0) * -19px),calc(var(--py,0) * -19px),0);
 -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000,transparent 88%);
 mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000,transparent 88%);
}
/* A concentrated section of brighter grid follows the cursor.  The underlying grid stays visible. */
.x-hero .x-grid-cursor {
 opacity:var(--grid-active,0); background-size:54px 54px;
 background-image:linear-gradient(to bottom,rgba(128,223,255,.5) 1px,transparent 1px),linear-gradient(to right,rgba(128,223,255,.5) 1px,transparent 1px);
 transform:translate3d(calc(var(--px,0) * -12px),calc(var(--py,0) * -12px),0);
 -webkit-mask-image:radial-gradient(ellipse 240px 220px at var(--mx,50%) var(--my,35%),#000 0%,rgba(0,0,0,.6) 28%,transparent 100%);
 mask-image:radial-gradient(ellipse 240px 220px at var(--mx,50%) var(--my,35%),#000 0%,rgba(0,0,0,.6) 28%,transparent 100%);
 filter:drop-shadow(0 0 4px rgba(57,190,244,.24));
}
.x-hero .x-grid-highlight {
 opacity:var(--grid-active,0); inset:0;
 background:radial-gradient(360px circle at var(--mx,50%) var(--my,35%),rgba(33,154,223,.13) 0%,rgba(26,132,198,.045) 46%,transparent 75%);
}
.x-hero .x-grid-routes {
 position:absolute;inset:0;display:block;width:100%;height:100%;min-height:650px;opacity:.36;overflow:hidden;
 transform:translate3d(calc(var(--px,0) * -6px),calc(var(--py,0) * -6px),0);
 -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 62%,transparent 96%);
 mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 62%,transparent 96%);
}
.x-hero .x-grid-traces path { fill:none;stroke:#54c9ee;stroke-width:1;opacity:.15;vector-effect:non-scaling-stroke; }
.x-hero .x-grid-pulses path { fill:none;stroke:url(#x-route-glow);stroke-width:2;stroke-linecap:round;stroke-dasharray:18 1150;filter:drop-shadow(0 0 5px rgba(75,201,245,.5));vector-effect:non-scaling-stroke; }
.x-hero .x-grid-pulses path:nth-child(2) { stroke-dasharray:12 970;stroke-dashoffset:-410; }
.x-hero .x-grid-pulses path:nth-child(3) { stroke-dasharray:24 1250;stroke-dashoffset:-850; }
.x-hero .x-grid-pulses path:nth-child(4) { stroke-dasharray:14 1100;stroke-dashoffset:-220; }
.x-hero .x-grid-nodes circle { fill:#9fe6ff;opacity:.45;filter:drop-shadow(0 0 4px #40c8f5); }
@media (prefers-reduced-motion:no-preference) {
 .x-hero .x-grid-pulses path { animation:x-grid-flow 13s linear infinite; }
 .x-hero .x-grid-pulses path:nth-child(2) { animation-duration:17s; }
 .x-hero .x-grid-pulses path:nth-child(3) { animation-duration:15s; }
 .x-hero .x-grid-pulses path:nth-child(4) { animation-duration:19s; }
 .x-hero .x-grid-nodes circle { animation:x-grid-node 6s ease-in-out infinite alternate; }
 .x-hero .x-grid-nodes circle:nth-child(2n) { animation-delay:-3s; }
 .x-hero .x-grid-nodes circle:nth-child(3n) { animation-delay:-1.8s; }
 @keyframes x-grid-flow { to {stroke-dashoffset:-2200;} }
 @keyframes x-grid-node { from {opacity:.15;} to {opacity:.75;} }
}
@media (hover:none), (pointer:coarse) {
 .x-hero .x-grid-cursor,.x-hero .x-grid-highlight { display:none; }
 .x-hero .x-grid,.x-hero .x-grid-fine,.x-hero .x-grid-routes {transform:none;}
}
@media (max-width:767px) { .x-hero .x-grid-routes { opacity:.22;min-height:520px; } .x-hero .x-grid {opacity:.57;} .x-hero .x-grid-fine {opacity:.2;} }
@media (prefers-reduced-motion:reduce) {
 .x-hero .x-grid-pulses path,.x-hero .x-grid-nodes circle {animation:none;}
 .x-hero .x-grid,.x-hero .x-grid-fine,.x-hero .x-grid-routes,.x-hero .x-grid-cursor {transform:none;}
 .x-hero .x-grid-cursor,.x-hero .x-grid-highlight {display:none;}
}

/* Pause route animations when the hero is out of view or the tab is hidden. */
.x-hero.x-grid-paused .x-grid-pulses path,
.x-hero.x-grid-paused .x-grid-nodes circle {animation-play-state:paused!important;}
@media (max-width:767px){
 .x-hero .x-grid-pulses path{filter:none;}
 .x-hero .x-grid-nodes circle{filter:none;}
}