/* Each menu is a later view of the same slowly drifting sky. */
#home-content{--intro-cloud-scene:0}
#network-checklist{--intro-cloud-scene:1}
#dual-router{--intro-cloud-scene:2}
#promotion-ip{--intro-cloud-scene:3}
#channel-partner{--intro-cloud-scene:4}
/* Decorative clouds share the existing sky gradient across all five introductions. */
:is(#home-content,#network-checklist,#dual-router,#promotion-ip,#channel-partner) .nc-welcome{
 position:relative;
 isolation:isolate;
 overflow:hidden;
}
:is(#home-content,#network-checklist,#dual-router,#promotion-ip,#channel-partner) .nc-welcome::before{
 content:"";
 position:absolute;
 inset:0;
 z-index:0;
 pointer-events:none;
 background:url("images/intro-clouds.svg?v=20261107-cirrus") center center / cover no-repeat;
 background-position:calc(50% - var(--intro-cloud-scene,0) * 55px) center;
 animation:intro-cloud-flow 76s ease-in-out infinite alternate;
 animation-delay:calc(var(--intro-cloud-scene,0) * -11s);
}
:is(#home-content,#network-checklist,#dual-router,#promotion-ip,#channel-partner) .nc-welcome>.nc-shell{
 position:relative;
 z-index:1;
}
@media(max-width:640px){
 :is(#home-content,#network-checklist,#dual-router,#promotion-ip,#channel-partner) .nc-welcome::before{
  background-size:auto 100%;
  background-position:calc(72% - var(--intro-cloud-scene,0) * 30px) center;
  opacity:.65;
 }
}
@keyframes intro-cloud-flow{
 from{transform:translate3d(12px,0,0)}
 to{transform:translate3d(-38px,-4px,0)}
}
@media(prefers-reduced-motion:reduce){
 :is(#home-content,#network-checklist,#dual-router,#promotion-ip,#channel-partner) .nc-welcome::before{animation:none}
}
@media print{
 :is(#home-content,#network-checklist,#dual-router,#promotion-ip,#channel-partner) .nc-welcome::before{display:none}
}